ok

src/components/BarChart.js

@@ -98,32 +98,46 @@ const SimpleBarChart = ({ Data }) => {
     const month = formattedDate.toLocaleString('en-US', { month: 'short' }); // Get the abbreviated month (e.g., "Nov")
     const year = formattedDate.getFullYear().toString().slice(2); // Get the last two digits of the year (e.g., "24")
   
-    // Extract the month and year from the date
-    const currentMonth = formattedDate.toLocaleDateString('en-US', { month: 'short' });
-    const currentYear = formattedDate.getFullYear();
+    // Extract the year from the first data point
+    const firstYear = new Date(sortedData[0]?.date).getFullYear();
+  
+    // Check if all dates have the same year
+    const allSameYear = sortedData.every((item) => new Date(item.date).getFullYear() === firstYear);
+  
+    // If all dates are from the same year, show only "day month"
+    if (allSameYear && formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
+        lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
+        // Show just the day and month if all dates have the same year
+        return `${day} ${month}`;
+      }
+    // if (allSameYear) {
+    //   // Show just the day and month if all dates have the same year
+    //   return `${day} ${month}`;
+    // }
   
     // Check if it's the oldest date (first entry)
     if (date === oldestDate) {
-      lastMonthRef.current = currentMonth; // Update lastMonthRef for the first entry
-      lastYearRef.current = currentYear; // Update lastYearRef for the first entry
+      lastMonthRef.current = formattedDate.toLocaleDateString('en-US', { month: 'short' });
+      lastYearRef.current = formattedDate.getFullYear();
       return `${day} ${month} ${year}`; // Format as "day month year" (e.g., "4 Nov 24")
     }
   
     // If the year changes, show the full date with year
-    if (currentYear !== lastYearRef.current) {
-      lastYearRef.current = currentYear; // Update year reference
+    if (formattedDate.getFullYear() !== lastYearRef.current) {
+      lastYearRef.current = formattedDate.getFullYear();
       return `${day} ${month} ${year}`; // Show full date: day month year
     }
   
     // If the month changes, show the full date with month and year
-    if (currentMonth !== lastMonthRef.current) {
-      lastMonthRef.current = currentMonth; // Update month reference
-      return `${day} ${month} ${year}`; // Show full date: day month year
+    if (formattedDate.toLocaleString('en-US', { month: 'short' }) !== lastMonthRef.current) {
+      lastMonthRef.current = formattedDate.toLocaleString('en-US', { month: 'short' });
+      return `${day} ${month} `; // Show full date: day month year
     }
   
     // Only show the day if the month hasn't changed
     return `${day}`; // Show just the day if the month remains the same
   };
+  
 
   // Function to get the next available color from the palette, starting from a random index
   const getNextColor = () => {
@@ -158,8 +172,11 @@ const SimpleBarChart = ({ Data }) => {
             interval={0} // Set interval to 0 to display all dates in data
             ticks={uniqueDates} // Only use unique dates for the XAxis
           />
-          <Tooltip />
-          <Legend />
+          <Tooltip
+          itemStyle={{
+            color: '#3498db', // Set the tooltip text color to blue
+          }}
+        />
           <CartesianGrid strokeDasharray="3 3" />
 
           {/* Dynamically create bars and labels for each unique material */}
@@ -168,7 +185,12 @@ const SimpleBarChart = ({ Data }) => {
               <Bar dataKey={material} fill={getNextColor()}>
               </Bar>
             </React.Fragment>
-          ))}
+          ))}<Legend
+          wrapperStyle={{
+            color: '#3498db', // Set the legend text color to blue
+            backgroundColor: 'white'
+          }}
+        />
         </BarChart>
       </ResponsiveContainer>
     </div>

src/components/Modal.js

@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "./Modal.module.css";
 import CreateClerk from "../pages/CreateClerk"
+import CreateCafe from "../pages/CreateCafe"
+import CreateTenant from "../pages/CreateTenant"
 import TablesPage from "./TablesPage.js";
 import PaymentOptions from "./PaymentOptions.js";
 import TableMaps from "../components/TableMaps";
@@ -43,6 +45,8 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
         {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
         {modalContent === "blocked_notification" && <NotificationBlocked />}
         {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
+        {modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
+        {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
         {modalContent === "edit_tables" && <TablesPage shop={shop} />}
         {modalContent === "new_transaction" && (
           <Transaction propsShopId={shop.cafeId} />