From fc2d115f40c978aa69686aacb606e04972fd48f5 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Sat, 25 Oct 2025 12:12:36 +0530
Subject: [PATCH] fixed move figure out f card - using type=  compact

---
 src/components/Dashboard/Tasks.jsx | 88 ++++++++++++++++--------------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
index b1e04b09..c386eb15 100644
--- a/src/components/Dashboard/Tasks.jsx
+++ b/src/components/Dashboard/Tasks.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
 import { TasksSkeleton } from "./DashboardSkeleton";
+import { formatCurrency, formatFigure } from "../../utils/appUtils";
 
 const TasksCard = () => {
   const projectId = useSelectedProject();
@@ -16,49 +17,56 @@ const TasksCard = () => {
   } = useDashboardTasksCardData(projectId);
   if (isLoading) return <TasksSkeleton />;
   return (
-  <div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
-  {/* Header */}
-  <div className="d-flex justify-content-start align-items-center mb-3">
-    <h5 className="fw-bold mb-0 ms-2">
-      <i className="bx bx-task text-success"></i> Tasks
-    </h5>
-  </div>
-
-  {isError ? (
-    <div className="d-flex flex-column justify-content-center align-items-center p-3">
-      <i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
-      <small className="text-muted mb-2">
-        {error?.message || "Unable to load data at the moment."}
-      </small>
-      <span
-        className={`text-muted ${isFetching ? "cursor-wait" : "cursor-pointer"}`}
-        onClick={refetch}
-      >
-        <i className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}></i>
-        Retry
-      </span>
-    </div>
-  ) : (
-    <div className="d-flex justify-content-around align-items-start flex-wrap mt-n2">
-      {/* Total Tasks */}
-      <div className="text-center flex-fill p-2">
-        <h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
-          {tasksCardData?.totalTasks?.toLocaleString() ?? 0}
-        </h4>
-        <small className="text-muted d-block">Total</small>
+    <div className="card p-3 h-100 text-center d-flex flex-column justify-content-between">
+      {/* Header */}
+      <div className="d-flex justify-content-start align-items-center mb-3">
+        <h5 className="fw-bold mb-0 ms-2">
+          <i className="bx bx-task text-success"></i> Tasks
+        </h5>
       </div>
 
-      {/* Completed Tasks */}
-      <div className="text-center flex-fill p-2">
-        <h4 className="mb-0 fw-bold text-truncate" style={{ wordBreak: "break-word" }}>
-          {tasksCardData?.completedTasks?.toLocaleString() ?? 0}
-        </h4>
-        <small className="text-muted d-block">Completed</small>
-      </div>
-    </div>
-  )}
-</div>
+      {isError ? (
+        <div className="d-flex flex-column justify-content-center align-items-center p-3">
+          <i className="bx bx-error-circle bx-sm fs-2 mb-2"></i>
+          <small className="text-muted mb-2">
+            {error?.message || "Unable to load data at the moment."}
+          </small>
+          <span
+            className={`text-muted ${
+              isFetching ? "cursor-wait" : "cursor-pointer"
+            }`}
+            onClick={refetch}
+          >
+            <i
+              className={`bx bx-refresh me-1 ${isFetching ? "bx-spin" : ""}`}
+            ></i>
+            Retry
+          </span>
+        </div>
+      ) : (
+        <div className="d-flex justify-content-around align-items-start flex-wrap mt-n2">
+          {/* Total Tasks */}
+          <div className="text-center flex-fill p-2">
+            <h4 className="mb-0 fw-bold text-truncate">
+              {formatFigure(tasksCardData?.totalTasks ?? 0, {
+                notation: "compact",
+              })}
+            </h4>
+            <small className="text-muted d-block">Total</small>
+          </div>
 
+          {/* Completed Tasks */}
+          <div className="text-center flex-fill p-2">
+            <h4 className="mb-0 fw-bold text-truncate">
+              {formatFigure(tasksCardData?.completedTasks ?? 0, {
+                notation: "compact",
+              })}
+            </h4>
+            <small className="text-muted d-block">Completed</small>
+          </div>
+        </div>
+      )}
+    </div>
   );
 };