ok

src/components/Item.module.css

@@ -163,8 +163,8 @@
   font-style: normal;
   font-weight: 600;
   margin-top: 19px;
-  margin-left: 5px;
-  margin-right: 5px;
+  margin-left: 1px;
+  margin-right: 1px;
   width: 25px;
   text-align: center;
 }

src/components/Modal.js

@@ -105,7 +105,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
           <MaterialMutationsPage  handleClose={handleOverlayClick} cafeId={shop.cafeId} />
         )}
         {modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
-        {modalContent === "reports" && <Reports handleClose={handleOverlayClick} cafeId={shop.cafeId} />}
+        {modalContent === "reports" && <Reports user={user} handleClose={handleOverlayClick} cafeId={shop.cafeId} />}
 
         
         {modalContent === "create_coupon" && <CreateCoupon />}

src/pages/Reports.js

@@ -125,6 +125,7 @@ const App = ({ forCafe = true, cafeId = -1,
 
   const fetchData = async (filter) => {
     if (selectedCafeId == '-1') return;
+    console.log(selectedCafeId, filter)
     try {
       setLoading(true);
       // Fetch the analytics data with the selected filter
@@ -149,6 +150,7 @@ const App = ({ forCafe = true, cafeId = -1,
   }, [cafeId]);
 
   useEffect(() => {
+    console.log(selectedCafeId)
     fetchData(filter); // Fetch data when filter changes
   }, [filter, selectedCafeId]);
 
@@ -494,7 +496,7 @@ const App = ({ forCafe = true, cafeId = -1,
           }
         </div>
       </div>
-      {!forCafe && selectedCafeId != -1 &&
+      {selectedCafeId != -1 &&
         <div style={{
           textAlign: "center",
           marginTop: '30px'
@@ -721,8 +723,9 @@ const App = ({ forCafe = true, cafeId = -1,
           </div>
         </div>
       }
+      {!forCafe &&
+      <>
       <div className={`${styles.couponContainer}`}>
-        {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>}
         <div>
           {!forCafe &&
             <div className={styles.dateSelectorWrapper} style={{ fontSize: '13px' }}>
@@ -751,6 +754,8 @@ const App = ({ forCafe = true, cafeId = -1,
         })}
         <button className={`${styles.addCoupon}`} onClick={() => setModal('claim-coupon')}>Tambahkan Voucher</button>
       </div>
+      </>
+  }
     </div>
   );
 };