From 94fbeef5d1c85a4090524aef988d92495af8ec5b Mon Sep 17 00:00:00 2001
From: "pramod.mahajan" <pramod.mahajan@marcoaiot.com>
Date: Fri, 5 Dec 2025 19:32:23 +0530
Subject: [PATCH] added skeleton

---
 .../Dashboard/CollectionOverview.jsx          |  4 +-
 .../Dashboard/CollectionOverviewSkeleton.jsx  | 40 +++++++++++++++++++
 src/components/Dashboard/Dashboard.jsx        | 19 +++++----
 .../ServiceProjectJob/JobStatusLog.jsx        |  5 ++-
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Dashboard/CollectionOverviewSkeleton.jsx

diff --git a/src/components/Dashboard/CollectionOverview.jsx b/src/components/Dashboard/CollectionOverview.jsx
index 448072b4..d20cd0d3 100644
--- a/src/components/Dashboard/CollectionOverview.jsx
+++ b/src/components/Dashboard/CollectionOverview.jsx
@@ -3,7 +3,7 @@ import Chart from "react-apexcharts";
 import { useGetCollectionOverview } from "../../hooks/useDashboard_Data";
 import { formatFigure } from "../../utils/appUtils";
 
-const CollectionOverview = ({ data }) => {
+const CollectionOverview = ({ data, isLoading }) => {
   const borderColor = "#ddd";
   const labelColor = "#6c757d";
 
@@ -104,7 +104,7 @@ const CollectionOverview = ({ data }) => {
 };
 
 export default CollectionOverview;
-export const TopicBarChart = ({ data }) => {
+export const TopicBarChart = ({ data,isLoading }) => {
   const data1 = {
     totalDueAmount: 213590,
     totalCollectedAmount: 5000,
diff --git a/src/components/Dashboard/CollectionOverviewSkeleton.jsx b/src/components/Dashboard/CollectionOverviewSkeleton.jsx
new file mode 100644
index 00000000..b4e85709
--- /dev/null
+++ b/src/components/Dashboard/CollectionOverviewSkeleton.jsx
@@ -0,0 +1,40 @@
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{ height, width }}
+  ></div>
+);
+export const CollectionOverviewSkeleton = () => {
+  return (
+   <div className="card row p-1">
+
+      {/* LEFT SIDE */} 
+      <div className="col-8">
+        <div className="">
+
+          {/* Header */}
+          <div className="d-flex align-items-center justify-content-between mb-3">
+            <SkeletonLine height={24} width="180px" />
+          </div>
+
+          {/* Due & Collected summary */}
+          <div className="d-flex align-items-center text-start px-6 mb-3">
+            <SkeletonLine height={16} width="100px" className="me-2" />
+            <SkeletonLine height={20} width="120px" className="me-2" />
+            <SkeletonLine height={16} width="120px" className="ms-2 me-2" />
+            <SkeletonLine height={20} width="120px" />
+          </div>
+
+          {/* Chart Skeleton */}
+          <SkeletonLine height={250} width="100%" className="mt-2" />
+
+        </div>
+
+   
+     
+      </div>
+    </div>
+
+  );
+};
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a400d7a8..dbedb169 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -26,6 +26,7 @@ import {
   TEAM_ATTENDANCE,
 } from "../../utils/constants";
 import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
+import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";
 
 const Dashboard = () => {
   // Get the selected project ID from Redux store
@@ -35,7 +36,7 @@ const Dashboard = () => {
   const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
   const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
 
-  const { data } = useGetCollectionOverview();
+  const { data,isLoading,isError } = useGetCollectionOverview();
   console.log("data-->", data);
   return (
     <div className="container-fluid mt-5">
@@ -98,14 +99,18 @@ const Dashboard = () => {
             </div>
           </div>
         )}
-         <div className=" col-md-8">
-         {data &&   <div className="card"><TopicBarChart data={data} /></div>}
-
+        <div className="col-md-8">
+          {isLoading ? (
+            <CollectionOverviewSkeleton />
+          ) : (
+            data && (
+              <div className="card">
+                <TopicBarChart data={data} />
+              </div>
+            )
+          )}
         </div>
-
-        
       </div>
-     
     </div>
   );
 };
diff --git a/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx b/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx
index 719f13de..b2fce0d7 100644
--- a/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-import Timeline from "../../common/Timeline";
+
 import { getColorNameFromHex } from "../../../utils/appUtils";
+import Timeline from "../../common/TimeLine";
 
 const JobStatusLog = ({ data }) => {
   // Prepare timeline items
@@ -31,7 +32,7 @@ const JobStatusLog = ({ data }) => {
   return (
     <div className="card shadow-none p-0">
       <div className="card-body p-3">
-          <Timeline items={timelineData} transparent={true} />
+        <Timeline items={timelineData} transparent={true} />
       </div>
     </div>
   );