add line chart date formatting based on sorted dashboard data

src/components/Charts/LineChart.jsx

@@ -3,10 +3,11 @@ import ReactApexChart from "react-apexcharts";
 import PropTypes from "prop-types";
 
 const LineChart = ({
-    seriesData = [],
+  seriesData = [],
-    categories = [],
+  categories = [],
-    colors = ["#1E90FF", "#FF6347"],
+  colors = ["#1E90FF", "#FF6347"],
-    loading = false
+  loading = false,
+  lineChartCategoriesDates = [],
 }) => {
     const hasValidData =
         Array.isArray(seriesData) &&
@@ -100,11 +101,21 @@ const LineChart = ({
     tooltip: {
       enabled: true,
       x: {
-        formatter: (val, opts) => val
+        formatter: (value, { dataPointIndex }) => {
+          if (
+            lineChartCategoriesDates &&
+            lineChartCategoriesDates.length > dataPointIndex
+          ) {
+            return lineChartCategoriesDates[dataPointIndex];
+          }
+          return value;
+        }
       }
     }
+
   };
 
+
   return (
     <div className="w-full overflow-x-auto">
       <ReactApexChart

src/components/Dashboard/Dashboard.jsx

@@ -82,7 +82,13 @@ const Dashboard = () => {
       day: "numeric",
     })
   );
-
+  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    })
+  );
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
@@ -252,6 +258,7 @@ const Dashboard = () => {
                 seriesData={lineChartSeries}
                 categories={lineChartCategories}
                 loading={isLineChartLoading}
+                lineChartCategoriesDates={lineChartCategoriesDates}
               />
             </div>
           </div>