diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 5007f5c..e2204e4 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -221,7 +221,7 @@ const App = ({ forCafe = true, cafeId = -1,
 
   segments.sort((a, b) => b.sold - a.sold);
 
-  
+
   let materialSegments = (selectedCafeId == 0 || selectedCafeId == -1) ? filteredItems.flatMap((cafe) => {
     const cafeItems = cafe.report?.materialSpend || [];
     console.log(cafeItems); // Log all items for the cafe
@@ -514,16 +514,16 @@ const App = ({ forCafe = true, cafeId = -1,
               <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
               <h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
                 {(filter == 'yesterday' || filter == 'weekly') ?
-                `Data dihitung dengan membandingkan
+                  `Data dihitung dengan membandingkan
                 ${comparisonText} hari terakhir dengan ${comparisonText} hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
-              :
-              (filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan berakhir pada data kemarin.` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan berakhir pada data kemarin.`}
+                  :
+                  (filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan berakhir pada data kemarin.` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan berakhir pada data kemarin.`}
               </h6>
             </div>
           </div>
-          
+
           <div className={styles.filterSelectorWrapper}>
-            <div className={`${styles.filterSelector} ${circularFilter == 'item' ? '':styles.filterSelectorInactive}
+            <div className={`${styles.filterSelector} ${circularFilter == 'item' ? '' : styles.filterSelectorInactive}
                 }`}
               onClick={() =>
                 setCircularFilter('item')
@@ -533,13 +533,13 @@ const App = ({ forCafe = true, cafeId = -1,
               <div>Item laku</div>
             </div>
             <div
-              className={`${styles.filterSelector} ${circularFilter == 'material' ? '':styles.filterSelectorInactive}
+              className={`${styles.filterSelector} ${circularFilter == 'material' ? '' : styles.filterSelectorInactive}
                 }`}
 
               onClick={() =>
                 setCircularFilter('material')
               }
-              >
+            >
               <div>Bahan baku</div>
             </div>
           </div>
@@ -579,9 +579,9 @@ const App = ({ forCafe = true, cafeId = -1,
               ))}
             </div>
           </div>
-          
+
           <div className={styles.filterSelectorWrapper}>
-            <div className={`${styles.filterSelector} ${graphFilter == 'income' ? '':styles.filterSelectorInactive}
+            <div className={`${styles.filterSelector} ${graphFilter == 'income' ? '' : styles.filterSelectorInactive}
                 }`}
               onClick={() =>
                 setGraphFilter('income')
@@ -591,23 +591,23 @@ const App = ({ forCafe = true, cafeId = -1,
               <div>Pemasukan</div>
             </div>
             <div
-              className={`${styles.filterSelector} ${graphFilter == 'outcome' ? '':styles.filterSelectorInactive}
+              className={`${styles.filterSelector} ${graphFilter == 'outcome' ? '' : styles.filterSelectorInactive}
                 }`}
 
               onClick={() =>
                 setGraphFilter('outcome')
               }
-              >
+            >
               <div>Pengeluaran</div>
             </div>
             <div
-              className={`${styles.filterSelector} ${graphFilter == 'transactions' ? '':styles.filterSelectorInactive}
+              className={`${styles.filterSelector} ${graphFilter == 'transactions' ? '' : styles.filterSelectorInactive}
                 }`}
 
-                onClick={() =>
-                  setGraphFilter('transactions')
-                }
-              >
+              onClick={() =>
+                setGraphFilter('transactions')
+              }
+            >
               <div>Transaksi</div>
             </div>
           </div>
@@ -630,7 +630,7 @@ const App = ({ forCafe = true, cafeId = -1,
               padding: "20px",
             }}
           >
-            {user.roleId == 0 ?
+            {user?.roleId == 0 ?
               <RoundedRectangle
                 title={"Masukkan nama bisnis"}
                 width="calc(100% - 10px)"
@@ -666,47 +666,47 @@ const App = ({ forCafe = true, cafeId = -1,
 
             }
             <RoundedRectangle
-              title={user.roleId === 0 ? "Buat Voucher" : "Buat Bisnis"}
+              title={user?.roleId === 0 ? "Buat Voucher" : "Buat Bisnis"}
               width="calc(100% - 10px)"
-              onClick={() => (user.roleId === 0 ? createCoupon(itemName) : createCafe(itemName))}
+              onClick={() => (user?.roleId === 0 ? createCoupon(itemName) : createCafe(itemName))}
             />
           </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
+      {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>
-              </div>
+              }
             </div>
-          }
-        </div>
-      </div>
-      <div style={{ padding: '25px', paddingTop: '0', paddingBottom: '0' }}>
+          </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>
-      </>
-  }
+            {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>
   );
 };