ok banget

src/pages/Reports.js

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { ThreeDots } from "react-loader-spinner";
 import {
-  getFavourite,
   getReports,
-  getIncome,
 } from "../helpers/transactionHelpers.js";
 import CircularDiagram from "./CircularDiagram";
 import styles from "./Transactions.module.css";
@@ -89,8 +86,8 @@ const RoundedRectangle = ({
           <div style={valueStyle}>{loading ? "Loading..." : value}</div>
           <div style={percentageStyle}>
             {loading ? "" : percentage}
-            {percentage != undefined && !loading && "%"}
-            {percentage != undefined && !loading && (
+            {percentage !== undefined && !loading && "%"}
+            {percentage !== undefined && !loading && (
               <span style={arrowStyle}>
                 {percentage > 0 ? "↗" : percentage === 0 ? "-" : "↘"}
               </span>
@@ -105,11 +102,9 @@ const RoundedRectangle = ({
 
 const App = ({ cafeId, 
   handleClose }) => {
-  const [favouriteItems, setFavouriteItems] = useState([]);
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState("daily");
-  const [viewStock, setViewStock] = useState(false);
 
   const fetchData = async (filter) => {
     try {
@@ -129,10 +124,8 @@ const App = ({ cafeId,
     fetchData(filter); // Fetch data when filter changes
   }, [filter]);
 
-  const [sold, percentage] = analytics[filter] || [0, 0];
   const filteredItems = analytics.items || [];
 
-  const totalSold = filteredItems.reduce((sum, item) => sum + item.count, 0);
   const colors = [
     "#FF0000", // Red
     "#FF6F00", // Dark Orange
@@ -192,15 +185,15 @@ const App = ({ cafeId,
   const filterTexts = ["1", "7", "30", "365"];
   const comparisonText =
     filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)];
-  const formatDate = (isoDateString) => {
-    const date = new Date(isoDateString);
-    return date.toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "numeric",
-    });
-  };
+  // const formatDate = (isoDateString) => {
+  //   const date = new Date(isoDateString);
+  //   return date.toLocaleDateString("en-US", {
+  //     year: "numeric",
+  //     month: "long",
+  //     day: "numeric",
+  //     hour: "numeric",
+  //   });
+  // };
 
   return (
     <div style={{
@@ -209,7 +202,8 @@ const App = ({ cafeId,
       width: '100vw',
       top: 0,
       right: 0,
-      backgroundColor: 'rgb(207, 207, 207)'}}
+      backgroundColor: 'rgb(207, 207, 207)',
+      overflowY: 'auto'}}
       >
       <h2 className={styles["Transactions-title"]}>Laporan</h2>
       <div style={{ textAlign: "center",