ok

src/pages/Reports.js

@@ -7,6 +7,7 @@ import styles from "./Transactions.module.css";
 import "./Switch.css";
 
 import MultiSwitch from "react-multi-switch-toggle";
+import BarChart from '../components/BarChart';
 
 const RoundedRectangle = ({
   onClick,
@@ -104,7 +105,7 @@ const App = ({ cafeId,
   handleClose }) => {
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState("daily");
+  const [filter, setFilter] = useState("yesterday");
 
   const fetchData = async (filter) => {
     try {
@@ -124,7 +125,7 @@ const App = ({ cafeId,
     fetchData(filter); // Fetch data when filter changes
   }, [filter]);
 
-  const filteredItems = analytics.items || [];
+  const filteredItems = analytics.itemSales || [];
 
   const colors = [
     "#FF0000", // Red
@@ -178,13 +179,13 @@ const App = ({ cafeId,
   }
 
   function onToggle(selectedItem) {
-    const filterMap = ["daily", "weekly", "monthly", "yearly"];
+    const filterMap = ["yesterday", "weekly", "monthly", "yearly"];
     setFilter(filterMap[selectedItem]);
   }
 
   const filterTexts = ["1", "7", "30", "365"];
   const comparisonText =
-    filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)];
+    filterTexts[["yesterday", "weekly", "monthly", "yearly"].indexOf(filter)];
   // const formatDate = (isoDateString) => {
   //   const date = new Date(isoDateString);
   //   return date.toLocaleDateString("en-US", {
@@ -213,7 +214,7 @@ const App = ({ cafeId,
       }}>
         <MultiSwitch
           texts={["kemarin", "minggu ini", "bulan ini", "tahun ini"]}
-          selectedSwitch={["daily", "weekly", "monthly", "yearly"].indexOf(
+          selectedSwitch={["yesterday", "weekly", "monthly", "yearly"].indexOf(
             filter
           )}
           borderColor={'#b3b1b1'}
@@ -237,8 +238,8 @@ const App = ({ cafeId,
           <RoundedRectangle
             title="Pendapatan"
             fontSize="12px"
-            value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
-            percentage={roundToInteger(analytics.growthIncome)}
+            value={!loading && "Rp" + formatIncome(analytics?.currentTotals?.income)}
+            percentage={roundToInteger(analytics?.growth?.incomeGrowth)}
             invert={false}
             loading={loading}
           />
@@ -246,28 +247,28 @@ const App = ({ cafeId,
           <RoundedRectangle
             title="Pengeluaran"
             fontSize="12px"
-            value={!loading && "Rp" + formatIncome(analytics?.currentOutcome)}
-            percentage={roundToInteger(analytics.growthOutcome)}
+            value={!loading && "Rp" + formatIncome(analytics?.currentTotals?.outcome)}
+            percentage={roundToInteger(analytics?.growth?.outcomeGrowth)}
             invert={true}
             loading={loading}
           />
           <RoundedRectangle
             title="Transaksi"
-            value={analytics.totalTransactions}
-            percentage={roundToInteger(analytics.growthTransactions)}
+            value={analytics?.currentTotals?.transactions}
+            percentage={roundToInteger(analytics?.growth?.transactionGrowth)}
             invert={false}
             loading={loading}
           />
-          {analytics?.items &&
-            analytics?.items.length > 0 && (
+          {analytics?.itemSales &&
+            analytics?.itemSales.length > 0 && (
               <RoundedRectangle
                 title={"Item favorit"}
-                value={analytics?.items[0]?.name}
+                value={analytics?.itemSales[0]?.itemName}
                 loading={loading}
               />
             )}
-          {(!analytics?.items ||
-            analytics?.items.length === 0) && (
+          {(!analytics?.itemSales ||
+            analytics?.itemSales.length === 0) && (
               <RoundedRectangle
                 title={"Item favorit"}
                 value={"-"}
@@ -314,12 +315,12 @@ const App = ({ cafeId,
                 >
                   ★
                 </div>
-                <h5 style={{ margin: 0, textAlign: "left" }}>{item.name}</h5>
+                <h5 style={{ margin: 0, textAlign: "left" }}>{item.itemName}</h5>
               </div>
             ))}
           </div>
         </div>
-
+        <BarChart transactionGraph={analytics?.transactionGraph} colors={colors}/>
       </div>
       <div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>