ok

src/pages/Reports.js

@@ -114,6 +114,8 @@ const App = ({ forCafe = true, cafeId = -1,
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("yesterday");
+  const [circularFilter, setCircularFilter] = useState("item");
+  const [graphFilter, setGraphFilter] = useState("income");
 
   const [itemName, setItemName] = useState('');
 
@@ -143,7 +145,7 @@ const App = ({ forCafe = true, cafeId = -1,
     fetchData(filter); // Fetch data when filter changes
   }, [filter, selectedCafeId]);
 
-  const filteredItems = analytics?.itemSales || analytics?.items || [];
+  const filteredItems = (selectedCafeId != 0 && selectedCafeId != -1) ? (circularFilter == 'item' ? analytics?.itemSales || [] : analytics.materialSpend || []) : analytics?.items || [];
 
   const colors = [
     "#af9463", // Bright Red
@@ -172,6 +174,11 @@ const App = ({ forCafe = true, cafeId = -1,
     return total + cafeTotal;
   }, 0);
 
+  const totalSpendAcrossAllCafes = filteredItems.reduce((total, cafe) => {
+    const cafeTotal = (cafe.report?.materialSpend || []).reduce((sum, item) => sum + item.spend, 0);
+    return total + cafeTotal;
+  }, 0);
+
   // Define a color palette or generate colors dynamically
   const colorPalette = colors;
 
@@ -214,6 +221,42 @@ 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
+
+    return cafeItems.map((item, index) => {
+      const percentage = totalSpendAcrossAllCafes > 0
+        ? ((item.spend / totalSpendAcrossAllCafes) * 100).toFixed(2)
+        : 0;
+
+      console.log(`${item.materialName}: ${(percentage)}%`); // Log item name and percentage
+
+      // Assign a unique color from the color palette
+      const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors
+
+      colorIndex++; // Increment to ensure a new color for the next item
+
+      return {
+        itemName: item.materialName,
+        sold: item.spend,
+        percentage: percentage,
+        color: color,
+      };
+    });
+  }) : filteredItems.map((item, index) => {
+    const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors
+    colorIndex++; // Increment to ensure a new color for the next item
+    return {
+      itemName: item.materialName,
+      percentage: item.percentage,
+      color: color,
+    };
+  });
+
+  materialSegments.sort((a, b) => b.spend - a.spend);
+
 
   console.log(selectedCafeId)
   console.log(segments)
@@ -474,23 +517,46 @@ const App = ({ forCafe = true, cafeId = -1,
                 `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 dimulai dari data kemarin` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, 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.`}
               </h6>
             </div>
           </div>
+          
+          <div className={styles.filterSelectorWrapper}>
+            <div className={`${styles.filterSelector} ${circularFilter == 'item' ? '':styles.filterSelectorInactive}
+                }`}
+              onClick={() =>
+                setCircularFilter('item')
+              }
+              style={{ color: 'black', position: 'relative' }}
+            >
+              <div>Item laku</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${circularFilter == 'material' ? '':styles.filterSelectorInactive}
+                }`}
+
+              onClick={() =>
+                setCircularFilter('material')
+              }
+              >
+              <div>Bahan baku</div>
+            </div>
+          </div>
           <div
             style={{
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               padding: "20px",
+              paddingTop: 0
             }}
           >
             <div style={{ flex: 1 }}>
-              <CircularDiagram segments={segments} />
+              <CircularDiagram segments={circularFilter == 'item' ? segments : materialSegments} />
             </div>
             <div style={{ flex: 1, marginLeft: "20px" }}>
-              {segments.map((item, index) => (
+              {(circularFilter === 'item' ? segments : materialSegments).map((item, index) => (
                 <div
                   key={index}
                   style={{
@@ -513,10 +579,42 @@ const App = ({ forCafe = true, cafeId = -1,
               ))}
             </div>
           </div>
+          
+          <div className={styles.filterSelectorWrapper}>
+            <div className={`${styles.filterSelector} ${graphFilter == 'income' ? '':styles.filterSelectorInactive}
+                }`}
+              onClick={() =>
+                setGraphFilter('income')
+              }
+              style={{ color: 'black', position: 'relative' }}
+            >
+              <div>Pemasukan</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${graphFilter == 'outcome' ? '':styles.filterSelectorInactive}
+                }`}
+
+              onClick={() =>
+                setGraphFilter('outcome')
+              }
+              >
+              <div>Pengeluaran</div>
+            </div>
+            <div
+              className={`${styles.filterSelector} ${graphFilter == 'transactions' ? '':styles.filterSelectorInactive}
+                }`}
+
+                onClick={() =>
+                  setGraphFilter('transactions')
+                }
+              >
+              <div>Transaksi</div>
+            </div>
+          </div>
           {filter == 'yesterday' || filter == 'weekly' ?
             <DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
             :
-            <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
+            <PeriodCharts type={filter} graphFilter={graphFilter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
           }
         </div>
       }