ok

src/components/BarChart.module.css

@@ -1,5 +1,6 @@
 .chartItemContainer{
     position: relative;
+    font-size: 14px;
 }
 .chartItemWrapper {
     position: absolute;

src/components/Coupon.css

@@ -62,9 +62,9 @@
   pointer-events: none;
   position: absolute;
   top: -38px;
-  width: 200px;
+  width: 170px;
-  height: 200px;
+  height: 170px;
-  right: -35px;
+  right: -30px;
   transform: scale(-0.8,0.8);
 }
 
@@ -76,11 +76,11 @@
 
 .RibbonBannerInverted h1 {
   margin: 0; /* Remove default margin */
-  font-size: 20px; /* Adjust font size as needed */
+  font-size: 18px; /* Adjust font size as needed */
   transform: rotate(-44.7deg)scale(-1,1); /* Rotate the text */
   transform-origin: center; /* Rotate around its center */
   white-space: nowrap; /* Prevent text wrapping */
   position: absolute;
-  top: 68px;
+  top: 57px;
-  left: -9px;
+  left: -12px;
 }

src/components/ItemLister.js

@@ -756,8 +756,8 @@ const ItemLister = ({
             )}
             {(isEdit && !isFirstStep || !isEdit) &&
               <>
-              {isEdit && <div style={{display: 'flex', justifyContent: 'space-between'}}><div onClick={()=>setIsFirstStep(true)}style={{color: 'black', fontSize: '50px', width: '30px'}}>&larr;</div>
+                {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{marginTop: '49px', marginRight: '10px', marginLeft: '10px'}} onClick={()=>setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>
-              <h3 style={{color: 'black'}}>Daftar item</h3><button style={{visibility: 'hidden', width: '30px'}}></button></div>}
+                  <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' :'Daftar item'}</h2></div>}
                 <div className={styles["item-list"]}>
                   {user && (
                     user.userId == shopOwnerId || user.cafeId == shopId) &&

src/components/ItemLister.module.css

@@ -212,3 +212,14 @@
   margin-bottom: 25px;
   cursor: pointer;
 }
+
+.item-list-title {
+  margin-top: 46px;
+  margin-left: 0px;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 6vw;
+  color: black;
+  text-align: left;
+}

src/pages/Dashboard.js

@@ -864,7 +864,35 @@ const LinktreePage = ({ user, setModal }) => {
         //     <div style={{ height: '2px' }}></div>
         //   </div>
         //   </>
-        <Reports otherCafes={items?.items}/>
+        <div>
+          <div className={styles.header}>
+
+            <Header
+              HeaderText={"Dashboard"}
+              isEdit={() => setIsModalOpen(true)}
+              isLogout={handleLogout}
+              user={user}
+              showProfile={true}
+              setModal={setModal}
+              HeaderMargin='0px'
+            />
+          </div>
+
+          <Reports forCafe={false} otherCafes={items?.items} />
+          
+          <div style={{ padding: '25px' }}>
+            <h2>Kupon</h2>
+            {coupons && coupons.map((coupon) => {
+              return <Coupon
+                code={coupon?.code || null}
+                value={coupon?.discountValue}
+                period={coupon?.discountPeriods}
+                expiration={coupon?.discountEndDate}
+              />
+            })}
+            <button onClick={() => setModal('claim-coupon')}></button>
+          </div>
+        </div>
       ) : (
         <div className={styles.centeredLinktreePage}>
           <div className={styles.dashboardLine}></div>

src/pages/Join.module.css

@@ -68,7 +68,7 @@
   font-weight: 400;
   line-height: 1.5rem;
   font-size: 14px;
-  font-family: 'poppins';
+  font-family: "Plus Jakarta Sans", sans-serif;
   color: black;
   margin-bottom: 1.5rem;
 }
@@ -77,7 +77,7 @@
   font-weight: 400;
   line-height: 1.5rem;
   font-size: 14px;
-  font-family: 'poppins';
+  font-family: "Plus Jakarta Sans", sans-serif;
   color: transparent;
   margin-bottom: -2.5rem;
 }

src/pages/LinktreePage.module.css

@@ -150,7 +150,7 @@
   font-weight: 400;
   line-height: 1.5rem;
   font-size: 14px;
-  font-family: 'poppins';
+  font-family: "Plus Jakarta Sans", sans-serif;
   color: black;
   margin-bottom: 1.5rem;
 }

src/pages/Login.module.css

@@ -77,7 +77,7 @@
     font-weight: 400;
     line-height: 1.5rem;
     font-size: 14px;
-    font-family: 'poppins';
+    font-family: "Plus Jakarta Sans", sans-serif;
     color: black;
     margin-bottom: 1.5rem;
   }

src/pages/Reports.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import {
   getReports,
+  getAnalytics
 } from "../helpers/transactionHelpers.js";
 import CircularDiagram from "./CircularDiagram";
 import styles from "./Transactions.module.css";
@@ -20,13 +21,14 @@ const RoundedRectangle = ({
   loading = false,
   children, // Assuming this is a React component or JSX
   isChildren,
+  width='calc(100% / 2 - 10px)'
 }) => {
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
     justifyContent: "center",
-    width: !children && !isChildren && "calc(100% / 2 - 10px)",
+    width: !children && !isChildren && width,
     height: "auto",
     borderRadius: "15px",
     padding: "20px",
@@ -102,17 +104,22 @@ const RoundedRectangle = ({
   );
 };
 
-const App = ({ cafeId,
+const App = ({ forCafe = true, cafeId="",
   handleClose, otherCafes }) => {
+  const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("yesterday");
 
   const fetchData = async (filter) => {
+    if(selectedCafeId == '-1') return;
     try {
       setLoading(true);
       // Fetch the analytics data with the selected filter
-      const analyticsData = await getReports(cafeId, filter);
+      const analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0) 
+      ? await getReports(selectedCafeId, filter) 
+      : await getAnalytics(filter);
+
       console.log(analyticsData);
       if (analyticsData) setAnalytics(analyticsData);
     } catch (error) {
@@ -122,9 +129,13 @@ const App = ({ cafeId,
     }
   };
 
+  useEffect(() => {
+    setSelectedCafeId(cafeId)
+  }, [cafeId]);
+
   useEffect(() => {
     fetchData(filter); // Fetch data when filter changes
-  }, [filter]);
+  }, [filter, selectedCafeId]);
 
   const filteredItems = analytics.itemSales || [];
 
@@ -193,6 +204,7 @@ const App = ({ cafeId,
   const [texts, setTexts] = useState(['buat kedai']); // initially show only first 3 texts
   const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts
   const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts
+  
   useEffect(() => {
     if (otherCafes != null) {
       let updatedFullTexts;
@@ -204,6 +216,8 @@ const App = ({ cafeId,
           [otherCafes[0].name, otherCafes[0].cafeId],
           ["buat kedai", -1]
         ];
+        
+      setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
       } else {
         updatedFullTexts = [
           ["semua", 0], // First entry is "semua"
@@ -231,15 +245,15 @@ const App = ({ cafeId,
   const [selectedSwitch, setSelectedSwitch] = useState(0);
 
   const onItemToggle = (index) => {
-    let selectedCafeId = null;
   
     // When user clicks the last visible option (index === 2 in the current view)
     if (index === 2) {
       console.log(fullTexts);
-      if (fullTexts.indexOf(texts[2]) < fullTexts.length - 1) {
+      if (fullTexts.findIndex(item => item[0] === texts[2]) < fullTexts.length - 1) {
         setTexts((prevTexts) => {
           const newTexts = [...prevTexts];
-          const nextText = fullTexts[prevTexts.length]; // Get the next item in the full list
+          console.log(prevTexts.length)
+          const nextText = fullTexts[fullTexts.findIndex(item => item[0] === texts[2])+1][0]; // Get the next item in the full list
           newTexts.shift(); // Remove the first element
           newTexts.push(nextText); // Add the next item to the end
           setSelectedSwitch(1); // Change the selected index
@@ -256,7 +270,7 @@ const App = ({ cafeId,
           const newTexts = [...prevTexts];
           const prevText = fullTexts[fullTexts.findIndex(item => item[0] === newTexts[0]) - 1]; // Get the previous item
           newTexts.pop(); // Remove the last element
-          newTexts.unshift(prevText); // Add the previous item to the start
+          newTexts.unshift(prevText[0]); // Add the previous item to the start
           setSelectedSwitch(1); // Change the selected index
           return newTexts;
         });
@@ -270,11 +284,9 @@ const App = ({ cafeId,
     const selectedText = texts[index]; // Get the selected name from the texts array
     const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item
     if (selectedItem) {
-      selectedCafeId = selectedItem[1]; // Get the cafeId (second part of the pair)
+      setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair)
     }
   
-    console.log('Selected cafeId:', selectedCafeId); // Log the selected cafeId
-  
     setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
   };
   
@@ -285,19 +297,22 @@ const App = ({ cafeId,
 
   return (
     <div style={{
-      position: 'fixed',
+      position: forCafe? 'fixed': 'relative',
       height: '100vh',
       width: '100vw',
       top: 0,
       right: 0,
       backgroundColor: 'white',
-      overflowY: 'auto'
+      overflowY: forCafe? 'auto' : 'none',
+      color: 'black',
+      marginTop: forCafe ? 0 : '-22vh'
     }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', padding: '0px 20px 0px 20px', justifyContent: 'space-between' }}>
+      <div style={{ display: 'flex', alignItems: 'center', padding: forCafe? '0px 20px' : '0px 15px', justifyContent: forCafe? 'flex-start':'space-between' }}>
-        <h2 className={styles["Transactions-title"]} style={{ marginTop: 'revert', marginLeft: '0px' }}>Laporan</h2>
+        {forCafe && <div style={{marginTop: '49px', marginRight: '10px'}} onClick={handleClose}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z"/></svg></div>}
+        <h2 className={styles["Transactions-title"]} style={{ marginTop: forCafe? '57px': 'revert', marginLeft: '0px' }}>Laporan</h2>
         <div style={{ marginTop: '10px' }}>
-          {otherCafes && <MultiSwitch
+          {!forCafe && <MultiSwitch
             key={resetKey} // Add key to reset the component and force it to re-render
             texts={texts}
             selectedSwitch={selectedSwitch}
@@ -382,11 +397,19 @@ const App = ({ cafeId,
                 loading={loading}
               />
             )}
+            {!forCafe && selectedCafeId != -1 && selectedCafeId != 0 && (
+                <RoundedRectangle
+                  title={"Kunjungi kedai"}
+                  loading={loading}
+                  width="calc(100% - 10px)"
+                  onClick={() => window.location.href = window.location.origin + '/' + otherCafes.find(item => item.cafeId === selectedCafeId).cafeIdentifyName}
+                />
+              )}
           <div
             style={{ display: "flex", alignItems: "center", margin: "10px" }}
           >
             <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
-            <h6 style={{ margin: 0, textAlign: "left" }}>
+            <h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
               Persentase pertumbuhan dihitung dengan membandingkan {" "}
               {comparisonText} hari terakhir dengan {comparisonText} hari sebelumnya.
             </h6>
@@ -428,12 +451,11 @@ const App = ({ cafeId,
           </div>
         </div>
         {filter == 'yesterday' || filter == 'weekly' ?
-          <DailyCharts transactionGraph={analytics?.transactionGraph} type={filter} colors={colors} />
+          <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
           :
           <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
         }
       </div>
-      <div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };

src/pages/WelcomePage.css

@@ -30,7 +30,7 @@
 .welcoming-text {
   font-size: 24px;
   margin-bottom: 20px;
-  font-family: poppins;
+  font-family: "Plus Jakarta Sans", sans-serif;
 }
 
 .get-started-button {
@@ -42,7 +42,7 @@
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s;
-  font-family: poppins;
+  font-family: "Plus Jakarta Sans", sans-serif;
 }
 
 .get-started-button:hover {