From a070d23304723e83f324166e77634c7b14e5c8b7 Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Sat, 25 Oct 2025 10:26:41 +0530
Subject: [PATCH] added skeleton for dashboard card figures cards

---
 public/assets/css/core-extend.css             |  6 ++
 .../TaskReportFilterPanel.jsx                 |  6 +-
 src/components/Dashboard/Dashboard.jsx        |  6 +-
 .../Dashboard/DashboardSkeleton.jsx           | 56 +++++++++++++++++++
 src/components/Dashboard/Projects.jsx         | 29 ++++++----
 src/components/Dashboard/Tasks.jsx            | 35 +++++++-----
 src/components/Dashboard/Teams.jsx            | 33 +++++++----
 7 files changed, 133 insertions(+), 38 deletions(-)

diff --git a/public/assets/css/core-extend.css b/public/assets/css/core-extend.css
index 7823d036..5b780c72 100644
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@@ -25,6 +25,12 @@ font-size: 2rem;
 .text-md-b {
 font-weight: normal;
 }
+.cursor-wait{
+  cursor:wait;
+}
+.cursor-notallowed {
+ cursor: not-allowed;
+}
 
 .text-xxs { font-size: 0.55rem; }       /* 8px */
 .text-xs { font-size: 0.75rem; }       /* 12px */
diff --git a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
index 6b1d15dc..2af3636d 100644
--- a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
+++ b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
@@ -29,7 +29,9 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
     handleSubmit,
     formState: { errors },
   } = methods;
-
+  const closePanel = () => {
+    document.querySelector(".offcanvas.show .btn-close")?.click();
+  };
   const onSubmit = (formData) => {
     const filterPayload = {
       ...formData,
@@ -37,12 +39,14 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
       dateTo: localToUtc(formData.dateTo),
     };
     handleFilter(filterPayload);
+    closePanel();
   };
 
   const onClear = () => {
     setResetKey((prev) => prev + 1);
     handleFilter(TaskReportDefaultValue);
     reset(TaskReportDefaultValue);
+    closePanel();
   };
   return (
     <FormProvider {...methods}>
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index cd39fd82..4c09056a 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -19,8 +19,6 @@ import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 
 const Dashboard = () => {
-    const { teamsCardData } = useDashboardTeamsCardData();
-    const { tasksCardData } = useDashboardTasksCardData();
 
     // Get the selected project ID from Redux store
     const projectId = useSelector((store) => store.localVariables.projectId);
@@ -36,11 +34,11 @@ const Dashboard = () => {
                 )}
 
                 <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <Teams teamsCardData={teamsCardData} />
+                    <Teams  />
                 </div>
 
                 <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <TasksCard tasksCardData={tasksCardData} />
+                    <TasksCard/>
                 </div>
 
                 {isAllProjectsSelected && (
diff --git a/src/components/Dashboard/DashboardSkeleton.jsx b/src/components/Dashboard/DashboardSkeleton.jsx
index c62a6594..89d25636 100644
--- a/src/components/Dashboard/DashboardSkeleton.jsx
+++ b/src/components/Dashboard/DashboardSkeleton.jsx
@@ -52,3 +52,59 @@ export const ProjectCardSkeleton = () => {
   );
 };
 
+export const TeamsSkeleton = () => {
+  return (
+    <>
+      <style>{skeletonStyle}</style>
+
+      <div className="card p-3 h-100 text-center d-flex 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-group text-warning"></i> Teams
+          </h5>
+        </div>
+
+        {/* Skeleton Body */}
+        <div className="d-flex justify-content-around align-items-start mt-n2 w-100">
+          <div className="text-center">
+            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
+            <SkeletonLine height={14} width="90px" className="mx-auto" />
+          </div>
+          <div className="text-center">
+            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
+            <SkeletonLine height={14} width="70px" className="mx-auto" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export const TasksSkeleton = () => {
+  return (
+    <>
+      <style>{skeletonStyle}</style>
+
+      <div className="card p-3 h-100 text-center d-flex 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>
+
+        {/* Skeleton Body */}
+        <div className="d-flex justify-content-around align-items-start mt-n2 w-100">
+          <div className="text-center">
+            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
+            <SkeletonLine height={14} width="70px" className="mx-auto" />
+          </div>
+          <div className="text-center">
+            <SkeletonLine height={28} width="60px" className="mx-auto mb-2" />
+            <SkeletonLine height={14} width="90px" className="mx-auto" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx
index aaa27a06..359b184c 100644
--- a/src/components/Dashboard/Projects.jsx
+++ b/src/components/Dashboard/Projects.jsx
@@ -10,6 +10,7 @@ const Projects = () => {
     isLoading,
     isError,
     error,
+    isFetching,
     refetch,
   } = useDashboardProjectsCardData();
 
@@ -25,7 +26,7 @@ const Projects = () => {
 
   const totalProjects = projectsCardData?.totalProjects ?? 0;
   const ongoingProjects = projectsCardData?.ongoingProjects ?? 0;
-  if(isLoading) return <ProjectCardSkeleton/>
+  if (isLoading) return <ProjectCardSkeleton />;
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -35,15 +36,23 @@ const Projects = () => {
         </h5>
       </div>
 
-      {isLoading ? (
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
-      ) : isError ? (
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-          {error?.message || "Error loading data"}
+      {isError ? (
+        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
+          <i className="bx bx-error-circle bx-sm fs-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 mt-n2">
diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
index 56eb00f0..e4dcd791 100644
--- a/src/components/Dashboard/Tasks.jsx
+++ b/src/components/Dashboard/Tasks.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
+import { TasksSkeleton } from "./DashboardSkeleton";
 
 const TasksCard = () => {
   const projectId = useSelectedProject();
@@ -10,8 +11,10 @@ const TasksCard = () => {
     isLoading,
     isError,
     error,
+    isFetching,
+    refetch,
   } = useDashboardTasksCardData(projectId);
-
+  if (isLoading) return <TasksSkeleton />;
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -20,20 +23,26 @@ const TasksCard = () => {
         </h5>
       </div>
 
-      {isLoading ? (
-        // Loader while fetching
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
-      ) : isError ? (
-        // Show error
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-          {error?.message || "Error loading data"}
+      {isError ? (
+        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
+          <i className="bx bx-error-circle bx-sm fs-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>
       ) : (
-        // Show data
         <div className="d-flex justify-content-around align-items-start mt-n2">
           <div>
             <h4 className="mb-0 fw-bold">
diff --git a/src/components/Dashboard/Teams.jsx b/src/components/Dashboard/Teams.jsx
index 9e9d31f9..bae3d553 100644
--- a/src/components/Dashboard/Teams.jsx
+++ b/src/components/Dashboard/Teams.jsx
@@ -4,16 +4,19 @@ import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
 import eventBus from "../../services/eventBus";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import { TeamsSkeleton } from "./DashboardSkeleton";
 
 const Teams = () => {
   const queryClient = useQueryClient();
- const projectId = useSelectedProject()
+  const projectId = useSelectedProject();
 
   const {
     data: teamsCardData,
     isLoading,
     isError,
     error,
+    isFetching,
+    refetch,
   } = useDashboardTeamsCardData(projectId);
 
   // Handle real-time updates via eventBus
@@ -40,6 +43,7 @@ const Teams = () => {
   const inToday = teamsCardData?.inToday ?? 0;
   const totalEmployees = teamsCardData?.totalEmployees ?? 0;
 
+  if (isLoading) return <TeamsSkeleton />;
   return (
     <div className="card p-3 h-100 text-center d-flex justify-content-between">
       <div className="d-flex justify-content-start align-items-center mb-3">
@@ -48,15 +52,24 @@ const Teams = () => {
         </h5>
       </div>
 
-      {isLoading ? (
-        <div className="d-flex justify-content-center align-items-center flex-grow-1">
-          <div className="spinner-border text-primary" role="status">
-            <span className="visually-hidden">Loading...</span>
-          </div>
-        </div>
-      ) : isError ? (
-        <div className="text-danger flex-grow-1 d-flex justify-content-center align-items-center">
-          {error?.message || "Error loading data"}
+      {isError ? (
+        <div className="d-flex flex-column justify-content-center align-items-center  p-1">
+          <i className="bx bx-error-circle bx-sm fs-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 mt-n2">