From 2db7faeaa3b527b33fbc27ba82827b96a1240898 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 4 Oct 2025 10:30:13 +0530
Subject: [PATCH] Changes in Dshboard weidget

---
 src/components/Dashboard/Dashboard.jsx        |  3 +++
 src/components/Dashboard/ExpenseByProject.jsx | 13 ++++++++-----
 src/utils/dateUtils.jsx                       | 19 +++++++++++++++----
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index ed549913..31f214d7 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -54,6 +54,9 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+      <div className="col-xxl-6 col-lg-6">
+        <ExpenseByProject />
+      </div>
     </div>
   );
 };
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index 66cbdd45..bd7e115d 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/src/components/Dashboard/ExpenseByProject.jsx
@@ -3,6 +3,8 @@ import Chart from "react-apexcharts";
 import { useExpenseType } from "../../hooks/masterHook/useMaster";
 import { useSelector } from "react-redux";
 import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
+import { formatCurrency } from "../../utils/appUtils";
+import { formatDate_DayMonth } from "../../utils/dateUtils";
 
 const ExpenseByProject = () => {
     const projectId = useSelector((store) => store.localVariables.projectId);
@@ -22,7 +24,7 @@ const ExpenseByProject = () => {
     useEffect(() => {
         if (expenseApiData) {
             const categories = expenseApiData.map(
-                (item) => `${item.monthName} ${item.year}`
+                (item) => formatDate_DayMonth(item.monthName, item.year)
             );
             const data = expenseApiData.map((item) => item.total);
             setChartData({ categories, data });
@@ -40,16 +42,17 @@ const ExpenseByProject = () => {
     const options = {
         chart: { type: "bar", toolbar: { show: false } },
         plotOptions: { bar: { horizontal: false, columnWidth: "55%", borderRadius: 4 } },
-        dataLabels: { enabled: true, formatter: (val) => val },
+        dataLabels: { enabled: true, formatter: (val) => formatCurrency(val) },
         xaxis: {
             categories: chartData.categories,
             labels: { style: { fontSize: "12px" }, rotate: -45 },
         },
         tooltip: {
             y: {
-                formatter: (val) => `${val.toLocaleString()} (${getSelectedTypeName()})`,
+                formatter: (val) => `${formatCurrency(val)} (${getSelectedTypeName()})`,
             },
         },
+
         annotations: { xaxis: [{ x: 0, strokeDashArray: 0, }] },
         fill: { opacity: 1 },
         colors: ["#2196f3"],
@@ -131,8 +134,8 @@ const ExpenseByProject = () => {
                         <button
                             key={item}
                             className={`border-0 px-2 py-1 text-sm rounded ${range === item
-                                    ? "text-white bg-primary"     
-                                    : "text-body bg-transparent"   
+                                ? "text-white bg-primary"
+                                : "text-body bg-transparent"
                                 }`}
                             style={{ cursor: "pointer", transition: "all 0.2s ease" }}
                             onClick={() => setRange(item)}
diff --git a/src/utils/dateUtils.jsx b/src/utils/dateUtils.jsx
index 61ccc8c3..6b5d9746 100644
--- a/src/utils/dateUtils.jsx
+++ b/src/utils/dateUtils.jsx
@@ -94,10 +94,21 @@ export  const getCompletionPercentage = (completedWork, plannedWork)=> {
   return clamped.toFixed(2); 
 }
 
-export const formatDate_DayMonth = (dateInput)=>{
-  const date = new Date(dateInput);
-  return format(date, "d MMM");
-}
+// export const formatDate_DayMonth = (dateInput)=>{
+//   const date = new Date(dateInput);
+//   return format(date, "d MMM");
+// }
+
+export const formatDate_DayMonth = (monthName, year) => {
+  if (!monthName || !year) return "";
+  try {
+    const shortMonth = monthName.substring(0, 3); 
+    return `${shortMonth} ${year}`;
+  } catch {
+    return "";
+  }
+};
+
 
 export const getTenantStatus =(statusId)=>{
   return ActiveTenant === statusId ? " bg-label-success":"bg-label-secondary"