diff --git a/src/components/BarChart.js b/src/components/BarChart.js
index 9675955..f4ca6eb 100644
--- a/src/components/BarChart.js
+++ b/src/components/BarChart.js
@@ -1,126 +1,149 @@
-import React, { useRef, useEffect } from 'react';
-import ReactApexChart from 'react-apexcharts';
+import React, { useState } from "react";
+import Chart from "react-apexcharts";
+import styles from "./BarChart.module.css"; // Import the CSS module
 
-// Colors palette
-const colors = [
-  "#D0E14F", "#B2B83D", "#A9C96E", "#A8B64E",
-  "#FF6347", "#FF4500", "#FF8C00", "#FF7F50",
-  "#1E90FF", "#FF00FF", "#32CD32",
-  "#00CED1", "#FFD700", "#FF1493", "#8A2BE2",
-  "#FFDAB9", "#F0E68C", "#8B4513", "#4B0082", "#C71585",
-  "#FFB6C1", "#E6E6FA", "#98FB98", "#F0FFF0", "#D3D3D3"
-];
+const BarChart = ({ transactionGraph, colors }) => {
+  const [selectedIndex, setSelectedIndex] = useState(-1);
 
-const SimpleLineChart = ({ Data }) => {
-  const lastMonthRef = useRef('');
-  const lastYearRef = useRef('');
-  const usedColors = useRef([]); // Keep track of used colors
+  const processData = (graphData) => {
+    if (!graphData) return null;
+    return graphData.map((dayData) => {
+      const categories = [
+        "0-3",
+        "3-6",
+        "6-9",
+        "9-12",
+        "12-15",
+        "15-18",
+        "18-21",
+        "21-24",
+      ];
 
-  useEffect(() => {
-    usedColors.current = [];
-  }, [Data]);
+      const seriesData = [
+        dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour6To9Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour9To12Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour12To15Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour15To18Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour18To21Transactions.reduce((acc, t) => acc + t.sold, 0),
+        dayData.hour21To24Transactions.reduce((acc, t) => acc + t.sold, 0),
+      ];
 
-  // Ensure Data is not null or undefined
-  const transformedData = (Data?.length ? Data.reduce((acc, { date, materialId, priceAtp, stockDifference, name }) => {
-    function isSameDay(date1, date2) {
-      const d1 = new Date(date1);
-      const d2 = new Date(date2);
-      
-      return d1.getFullYear() === d2.getFullYear() &&
-             d1.getMonth() === d2.getMonth() &&
-             d1.getDate() === d2.getDate();
-    }
-    
-    const existingEntry = acc.find(d => isSameDay(d.date, date));
-    
-    if (existingEntry) {
-      existingEntry[name] = (existingEntry[name] || 0) + (priceAtp * stockDifference);
-    } else {
-      acc.push({
-        date,
-        materialId,
-        name,
-        [name]: priceAtp * stockDifference
-      });
-    }
-    return acc;
-  }, []) : []);
-
-  const sortedData = [...transformedData].sort((a, b) => new Date(a.date) - new Date(b.date));
-  const oldestDate = sortedData[0]?.date;
-  
-  const uniqueMaterials = Array.from(new Set(Data?.map(item => item.name) || []));
-  const uniqueDates = Array.from(new Set(transformedData.map(item => item.date)));
-
-  const getNextColor = () => {
-    const randomIndex = Math.floor(Math.random() * colors.length);
-    let color = null;
-    for (let i = 0; i < colors.length; i++) {
-      const index = (randomIndex + i) % colors.length;
-      if (!usedColors.current.includes(colors[index])) {
-        color = colors[index];
-        usedColors.current.push(color);
-        break;
-      }
-    }
-    return color || '#000000'; 
+      return {
+        date: new Date(dayData.date).toLocaleDateString(),
+        categories,
+        series: [
+          {
+            name: `Transactions on ${new Date(dayData.date).toLocaleDateString()}`,
+            data: seriesData,
+          },
+        ],
+      };
+    });
   };
 
-  // Prepare data for ApexCharts
-  const series = uniqueMaterials.map((material) => {
-    return {
-      name: material,
-      data: transformedData.map(item => item[material] || 0)
-    };
-  });
+  const chartData = processData(transactionGraph);
 
-  const options = {
-    chart: {
-      type: 'line',
-      height: '100%',
-      zoom: {
-        enabled: true
-      }
-    },
-    xaxis: {
-      categories: uniqueDates,
-      labels: {
-        style: {
-          fontSize: '12px',
-        }
-      }
-    },
-    colors: uniqueMaterials.map(() => getNextColor()), // Assign unique colors for each material
-    legend: {
-      position: 'top',
-      horizontalAlign: 'center',
-      itemMargin: {
-        horizontal: 10,
-        vertical: 0
+  let globalMax = null;
+  if (chartData)
+    globalMax = chartData.reduce(
+      (max, data) => {
+        const localMax = Math.max(...data.series[0].data);
+        return localMax > max ? localMax : max;
       },
-      labels: {
-        colors: '#3498db', // Set legend text color
-      },
-    },
-    tooltip: {
-      theme: 'light',
-      style: {
-        fontSize: '14px',
-        color: '#3498db'
-      }
-    }
+      0
+    );
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const monthNames = [
+      "Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"
+    ];
+    const month = monthNames[date.getMonth()];
+    const day = date.getDate();
+    return { month, day };
   };
 
   return (
-    <div style={{ width: '100%', height: '20vh' }}>
-      <ReactApexChart
-        options={options}
-        series={series}
-        type="line"
-        height="100%"
-      />
+    <div className={styles.chartItemContainer}>
+      {chartData &&
+        chartData.map((data, index) => (
+          <div
+            key={index}
+            className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== index
+                ? styles.chartItemWrapperActive
+                : styles.chartItemWrapperInactive
+              }`}
+          >
+            <div className={styles.dateSelectorWrapper}>
+              {chartData.map((item, indexx) => {
+                const { month, day } = formatDate(item.date);
+                return (
+                  <div
+                    key={indexx}
+                    className={`${styles.dateSelector} ${index === indexx ? styles.dateSelectorActive : styles.dateSelectorInactive
+                      }`}
+                    onClick={() =>
+                      selectedIndex !== index ? setSelectedIndex(index) : setSelectedIndex(-1)
+                    }
+                  >
+                    <div>
+                      {day}{" "}
+                      {(indexx === 0 || formatDate(chartData[indexx - 1].date).month !== month) && month}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className={styles.chartWrapper}>
+              <Chart
+                options={{
+                  chart: {
+                    id: `chart-${index}`,
+                    type: "area",
+                    zoom: {
+                      enabled: false,
+                    },
+                    toolbar: {
+                      show: false,
+                    },
+                  },
+                  xaxis: {
+                    categories: data.categories,
+                    labels: {
+                      style: {
+                        colors: index === 0 ? "#000" : "transparent",
+                      },
+                    },
+                  },
+                  yaxis: {
+                    max: globalMax,
+                    labels: {
+                      style: {
+                        colors: "transparent",
+                      },
+                    },
+                  },
+                  grid: {
+                    show: false,
+                  },
+                  fill: {
+                    opacity: 0.5,
+                  },
+                  colors: [colors[index % colors.length]],
+                }}
+                series={data.series}
+                type="area"
+                height={200}
+                width="100%"
+              />
+            </div>
+          </div>
+
+        ))}
     </div>
   );
 };
 
-export default SimpleLineChart;
+export default BarChart;
diff --git a/src/components/BarChart.module.css b/src/components/BarChart.module.css
new file mode 100644
index 0000000..b233269
--- /dev/null
+++ b/src/components/BarChart.module.css
@@ -0,0 +1,49 @@
+.chartItemContainer{
+    position: relative;
+}
+.chartItemWrapper {
+    position: absolute;
+    transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */
+    
+    left: 20px;
+    right: 20px;
+  }
+  .chartItemWrapperActive {
+    top: 200px; /* Move chartItemWrapper down when selected */
+  }
+  
+  .chartItemWrapperInactive {
+    top: 0; /* Reset to original position */
+  }
+  
+  .dateSelectorWrapper {
+    display: flex;
+    justify-content: space-around;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .dateSelector {
+    flex-grow: 1;
+    text-align: center;
+    padding: 10px;
+    border: 1px solid black;
+    border-radius: 10px 10px 0 0;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  .dateSelectorActive {
+    color: black;
+    border-color: black;
+    z-index: 2;
+  }
+  
+  .dateSelectorInactive {
+    color: transparent;
+    border-color: transparent;
+  }
+  
+  .chartWrapper {
+    border: 1px solid black;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index bc506ee..42c16a6 100644
--- a/src/pages/Reports.js
+++ b/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>