ok

src/pages/Dashboard.js

@@ -10,7 +10,7 @@ import { ThreeDots } from "react-loader-spinner";
 import Header from '../components/Header';
 import CircularDiagram from "./CircularDiagram";
 import API_BASE_URL from '../config';
-import BarChart from '../components/BarChart';
+import DailyCharts from '../components/DailyCharts';
 
 const LinktreePage = ({ user, setModal }) => {
   const navigate = useNavigate();
@@ -746,7 +746,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
 
               </div>
               <h3>penambahan stok</h3>
-              <BarChart Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
+              <DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
               <div style={{ height: '24vh' }}></div>
             </div>
 

src/pages/MaterialList.js

@@ -325,7 +325,6 @@ const MaterialList = ({ cafeId, handleClose }) => {
                 )}
                 <div style={styles.cardContent}>
                   <h3 style={styles.cardTitle}>{currentMaterial.name}</h3>
-                  <p>{currentMaterial.unit}</p>
                 </div>
                 <div style={styles.buttonContainer}>
                   <button
@@ -542,10 +541,10 @@ const styles = {
     marginBottom: "5px",
   },
   image: {
-    width: "250px",
-    height: "150px",
+    width: "100px",
+    height: "100px",
+    borderRadius: '50%',
     objectFit: "contain",
-    borderRadius: "8px",
     marginBottom: "10px",
   },
   error: {

src/pages/Reports.js

@@ -7,7 +7,8 @@ import styles from "./Transactions.module.css";
 import "./Switch.css";
 
 import MultiSwitch from "react-multi-switch-toggle";
-import BarChart from '../components/BarChart';
+import DailyCharts from '../components/DailyCharts.js';
+import PeriodCharts from '../components/PeriodCharts.js';
 
 const RoundedRectangle = ({
   onClick,
@@ -128,27 +129,27 @@ const App = ({ cafeId,
   const filteredItems = analytics.itemSales || [];
 
   const colors = [
-    "#FF0000", // Red
-    "#FF6F00", // Dark Orange
-    "#FFD700", // Gold
-    "#32CD32", // Lime Green
-    "#00CED1", // Dark Turquoise
-    "#1E90FF", // Dodger Blue
-    "#8A2BE2", // BlueViolet
-    "#FF00FF", // Magenta
-    "#FF1493", // Deep Pink
-    "#FF4500", // OrangeRed
-    "#FFDAB9", // Peach Puff
-    "#4B0082", // Indigo
-    "#00FF7F", // Spring Green
-    "#C71585", // Medium Violet Red
-    "#F0E68C", // Khaki
-    "#FF6347", // Tomato
-    "#006400", // Dark Green
-    "#8B4513", // SaddleBrown
-    "#00BFFF", // Deep Sky Blue
-    "#FF69B4", // Hot Pink
+    "#E63946", // Bright Red
+    "#F4A261", // Soft Orange
+    "#FFD166", // Sunshine Yellow
+    "#06D6A0", // Mint Green
+    "#118AB2", // Rich Teal
+    "#9D4EDD", // Vivid Violet
+    "#FF66B3", // Bubblegum Pink
+    "#FF7F50", // Coral
+    "#FFA07A", // Light Salmon
+    "#F7CAD0", // Blush Pink
+    "#A8DADC", // Aqua Blue
+    "#457B9D", // Steel Blue
+    "#2A9D8F", // Jungle Green
+    "#FFB703", // Mustard Yellow
+    "#E9C46A", // Honey Gold
+    "#264653", // Charcoal Green
+    "#D4A5A5", // Rose Beige
+    "#A6D6F0", // Sky Blue
+    "#BC4749", // Cranberry Red
   ];
+  
 
   const segments = filteredItems.map((item, index) => ({
     percentage: item.percentage,
@@ -321,7 +322,11 @@ const App = ({ cafeId,
             ))}
           </div>
         </div>
-        <BarChart transactionGraph={analytics?.transactionGraph} type={analytics?.type} aggregatedReports={analytics?.aggregatedReports} colors={colors}/>
+        {filter == 'yesterday' || filter == 'weekly' ?
+        <DailyCharts transactionGraph={analytics?.transactionGraph} type={filter} colors={colors}/>
+        :
+        <PeriodCharts type={filter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors}/>
+                }
       </div>
       <div class="ItemLister_PaymentOption__YZlDL"><div style={{ marginTop: '20px' }} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>