diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index bed2ff1..df6dc74 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -112,7 +112,8 @@ const RoundedRectangle = ({
 
 const App = ({ forCafe = true, cafeId = -1,
   handleClose, otherCafes, coupons, setModal, user }) => {
-    const [modalStatus, setModalStatus] = useState(null); 
+  const [couponList, setCouponList] = useState(coupons);
+  const [modalStatus, setModalStatus] = useState(null);
   const [selectedCafeId, setSelectedCafeId] = useState(cafeId);
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
@@ -128,10 +129,10 @@ const App = ({ forCafe = true, cafeId = -1,
       setLoading(true);
       // Fetch the analytics data with the selected filter
       let analyticsData = null;
-      if(user.roleId == 1)
+      if (user.roleId == 1)
         analyticsData = (selectedCafeId !== '' && selectedCafeId !== 0)
-        ? await getReports(selectedCafeId, filter)
-        : await getAnalytics(filter);
+          ? await getReports(selectedCafeId, filter)
+          : await getAnalytics(filter);
       else analyticsData = await getAnalytics(filter, selectedCafeId);
 
       console.log(analyticsData);
@@ -311,12 +312,12 @@ const App = ({ forCafe = true, cafeId = -1,
       let updatedFullTexts;
 
       if (otherCafes.length === 0) {
-        updatedFullTexts = [[user.roleId == 0 ? "Buat Voucher":"Buat bisnis", 0]];
+        updatedFullTexts = [[user.roleId == 0 ? "Buat Voucher" : "Buat bisnis", 0]];
         setSelectedCafeId(-1);
       } else if (otherCafes.length === 1) {
         updatedFullTexts = [
           [otherCafes[0].name || otherCafes[0].username, otherCafes[0].cafeId || otherCafes[0].userId],
-          [user.roleId == 0 ? "Buat Voucher":"Buat bisnis", -1]
+          [user.roleId == 0 ? "Buat Voucher" : "Buat bisnis", -1]
         ];
 
         setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
@@ -324,7 +325,7 @@ const App = ({ forCafe = true, cafeId = -1,
         updatedFullTexts = [
           ["semua", 0], // First entry is "semua"
           ...otherCafes.map(item => [item.name || item.username, item.cafeId || item.userId]), // Map over cafes to get name and cafeId pairs
-          [user.roleId == 0 ? "Buat Voucher":"Tambah Bisnis +", -1] // Add the "+" entry
+          [user.roleId == 0 ? "Buat Voucher" : "Tambah Bisnis +", -1] // Add the "+" entry
         ];
 
         setSelectedCafeId(0);
@@ -386,11 +387,33 @@ const App = ({ forCafe = true, cafeId = -1,
 
     // Get the cafeId from the selected text based on the index
     const selectedText = texts[index]; // Get the selected name from the texts array
+    let unSelectedText;
+    if (texts[index - 1] != undefined) unSelectedText = texts[index - 1]; // Get the selected name from the texts array
     const selectedItem = fullTexts.find(item => item[0] === selectedText); // Find the corresponding full item
+    const unSelectedItem = fullTexts.find(item => item[0] === unSelectedText); // Find the corresponding full item
     if (selectedItem) {
       setSelectedCafeId(selectedItem[1]); // Get the cafeId (second part of the pair)
     }
-    if(selectedItem[1] == -1 && user.roleId == 0) setModal('create_coupon', {}, () => {setSelectedSwitch(0);setSelectedCafeId(0)});
+    let nextSelectedId = selectedItem[1]
+    if (selectedItem[1] == -1 && user.roleId == 0) setModal('create_coupon', {}, () => { setSelectedSwitch(1); setSelectedCafeId(unSelectedItem[1]); nextSelectedId=unSelectedItem[1] });
+    console.log(analytics)
+    if (user && user.roleId === 0 && analytics) {
+      // Filter the analytics items based on userId
+      if(selectedItem[1] != 0 && selectedItem[1] != -1){
+      const filteredData = analytics.items.filter(
+        (data) => data.userId === nextSelectedId
+      );
+    
+      // Extract coupons from the filtered data
+      const couponsToAdd = filteredData.flatMap((data) => data.coupons);
+    
+      // Log the coupons to be added
+      console.log(couponsToAdd);
+      // Assuming setCouponList is a function that updates the coupon list
+      setCouponList(couponsToAdd || []);
+    }
+    else setCouponList([])
+    }
 
     setResetKey((prevKey) => prevKey + 1); // Increase the key to force re-render
   };
@@ -409,10 +432,10 @@ const App = ({ forCafe = true, cafeId = -1,
       if (!create) {
         setModalStatus('failed');
       }
-      
+
       // Add a 2-second delay before proceeding
       await delay(2000);
-  
+
       handleClose();
       setModalStatus(null); // Reset status
       window.location.reload(); // Reload the page
@@ -423,7 +446,7 @@ const App = ({ forCafe = true, cafeId = -1,
       if (!create) {
         setModalStatus('failed');
       }
-  
+
       // Add a 2-second delay before proceeding
       await delay(2000);
       handleClose();
@@ -431,7 +454,7 @@ const App = ({ forCafe = true, cafeId = -1,
       window.location.reload(); // Reload the page
     }
   };
-  
+
 
   return (
     <div style={{
@@ -660,7 +683,7 @@ const App = ({ forCafe = true, cafeId = -1,
           }
         </div>
       }
-      {!forCafe && selectedCafeId == -1 && user.roleId == 1 && 
+      {!forCafe && selectedCafeId == -1 && user.roleId == 1 &&
         <div style={{
           textAlign: "center",
         }}>
@@ -673,23 +696,23 @@ const App = ({ forCafe = true, cafeId = -1,
             }}
           >
 
-              <RoundedRectangle
-                title={"Masukkan nama bisnis"}
-                width="calc(100% - 10px)"
-              >
-                <input
-                  value={itemName}
-                  onChange={(e) => setItemName(e.target.value)}
-                  style={{
-                    width: '70%',
-                    fontSize: '25px',
-                    borderRadius: '7px',
-                    border: '1px solid black'
-                  }}
-                />
-              </RoundedRectangle>
+            <RoundedRectangle
+              title={"Masukkan nama bisnis"}
+              width="calc(100% - 10px)"
+            >
+              <input
+                value={itemName}
+                onChange={(e) => setItemName(e.target.value)}
+                style={{
+                  width: '70%',
+                  fontSize: '25px',
+                  borderRadius: '7px',
+                  border: '1px solid black'
+                }}
+              />
+            </RoundedRectangle>
+
 
-            
             <RoundedRectangle
               title={"Buat Bisnis"}
               width="calc(100% - 10px)"
@@ -698,40 +721,36 @@ const App = ({ forCafe = true, cafeId = -1,
           </div>
         </div>
       }
-      {user?.roleId == 1 &&
-        <>
-          <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' }}>
-                  <div
-                    className={`${styles.dateSelector} ${styles.dateSelectorActive}`} style={{ position: 'relative', width: 'calc(32vw - 30px)' }}
-                  >
-                    <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid green` }}></div>
-                    <div
-                      style={{ color: 'black' }}>
-                      Voucher
-                    </div>
-                  </div>
+      <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' }}>
+              <div
+                className={`${styles.dateSelector} ${styles.dateSelectorActive}`} style={{ position: 'relative', width: 'calc(32vw - 30px)' }}
+              >
+                <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid green` }}></div>
+                <div
+                  style={{ color: 'black' }}>
+                  Voucher
                 </div>
-              }
+              </div>
             </div>
-          </div>
-          <div style={{ padding: '25px', paddingTop: '0', paddingBottom: '0' }}>
-
-            {coupons && coupons.map((coupon) => {
-              return <Coupon
-                code={coupon?.code || null}
-                value={coupon?.discountValue}
-                period={coupon?.discountPeriods}
-                expiration={coupon?.discountEndDate}
-              />
-            })}
-            <button className={`${styles.addCoupon}`} onClick={() => setModal('claim-coupon')}>Tambahkan Voucher</button>
-          </div>
-        </>
-      }
+          }
+        </div>
+      </div>
+      <div style={{ padding: '25px', paddingTop: '0', paddingBottom: '0' }}>
+          {/* <h1>{couponList.length}</h1> */}
+        {couponList && couponList.map((coupon) => {
+          return <Coupon
+            code={coupon?.code || null}
+            value={coupon?.discountValue}
+            period={coupon?.discountPeriods}
+            expiration={coupon?.discountEndDate}
+          />
+        })}
+        <button className={`${styles.addCoupon}`} onClick={() => setModal('claim-coupon')}>Tambahkan Voucher</button>
+      </div>
     </div>
   );
 };