From cf11e995ded9bed1bd8b307a1df19baef757be60 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Fri, 23 May 2025 13:56:50 +0530
Subject: [PATCH] Move all the project-related code from the Dashboard
 component into a new component named 'Progress Overview by Project'.

---
 src/components/Dashboard/Dashboard.jsx        | 136 +-----------------
 .../Dashboard/ProjectProgressChart.jsx        | 126 ++++++++++++++++
 2 files changed, 129 insertions(+), 133 deletions(-)
 create mode 100644 src/components/Dashboard/ProjectProgressChart.jsx

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a352f5a5..ce915566 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -8,53 +8,18 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import ProjectProgressChart from "./ProjectProgressChart";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
   const [selectedProjectId, setSelectedProjectId] = useState("all");
   const [range, setRange] = useState("1W");
 
-  const getDaysFromRange = (range) => {
-    switch (range) {
-      case "1D":
-        return 1;
-      case "1W":
-        return 7;
-      case "15D":
-        return 15;
-      case "1M":
-        return 30;
-      case "3M":
-        return 90;
-      case "1Y":
-        return 365;
-      case "5Y":
-        return 1825;
-      default:
-        return 7;
-    }
-  };
-
-  const days = getDaysFromRange(range);
-  const today = new Date();
-  // const FromDate = today.toISOString().split("T")[0];
-  const FromDate = today.toLocaleDateString('en-CA'); // Always today
 
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
   const { tasksCardData } = useDashboardTasksCardData();
 
-  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
-    days,
-    FromDate,
-    projectId: selectedProjectId === "all" ? null : selectedProjectId,
-  });
-
-  // Sort dashboard_data by date ascending
-  const sortedDashboardData = [...dashboard_data].sort(
-    (a, b) => new Date(a.date) - new Date(b.date)
-  );
-
   // Bar chart logic
   const projectNames = projects?.map((p) => p.name) || [];
   const projectProgress =
@@ -65,31 +30,7 @@ const Dashboard = () => {
       return Math.min(Math.round(percent), 100);
     }) || [];
 
-  // Line chart data
-  const lineChartSeries = [
-    {
-      name: "Planned Work",
-      data: sortedDashboardData.map((d) => d.plannedTask || 0),
-    },
-    {
-      name: "Completed Work",
-      data: sortedDashboardData.map((d) => d.completedTask || 0),
-    },
-  ];
-
-  const lineChartCategories = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", {
-      month: "short",
-      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">
@@ -190,78 +131,7 @@ const Dashboard = () => {
 
         {/* Line Chart */}
         <div className="col-xxl-6 col-lg-6">
-          <div className="card h-100">
-            <div className="card-header">
-              {/* Row 1: Title + Project Selector */}
-              <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
-                <div className="card-title mb-0 text-start">
-                  <h5 className="mb-1">Project Progress</h5>
-                  <p className="card-subtitle">Progress Overview by Project</p>
-                </div>
-
-                <div className="btn-group">
-                  <button
-                    className="btn btn-outline-primary btn-sm dropdown-toggle"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    {selectedProjectId === "all"
-                      ? "All Projects"
-                      : projects?.find((p) => p.id === selectedProjectId)
-                          ?.name || "Select Project"}
-                  </button>
-
-                  <ul className="dropdown-menu">
-                    <li>
-                      <button
-                        className="dropdown-item"
-                        onClick={() => setSelectedProjectId("all")}
-                      >
-                        All Projects
-                      </button>
-                    </li>
-                    {projects?.map((project) => (
-                      <li key={project.id}>
-                        <button
-                          className="dropdown-item"
-                          onClick={() => setSelectedProjectId(project.id)}
-                        >
-                          {project.name}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-
-              {/* Row 2: Time Range Buttons */}
-              <div className="d-flex flex-wrap  mt-2">
-                {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
-                  <button
-                    key={key}
-                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                      range === key
-                        ? " border-bottom border-primary text-primary"
-                        : "text-muted"
-                    }`}
-                    style={{ cursor: "pointer", transition: "all 0.2s ease" }}
-                    onClick={() => setRange(key)}
-                  >
-                    {key}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="card-body ">
-              <LineChart
-                seriesData={lineChartSeries}
-                categories={lineChartCategories}
-                loading={isLineChartLoading}
-                lineChartCategoriesDates={lineChartCategoriesDates}
-              />
-            </div>
-          </div>
+          <ProjectProgressChart />
         </div>
       </div>
     </div>
diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx
new file mode 100644
index 00000000..e96b8a48
--- /dev/null
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
+import { useDashboard_Data } from "../../hooks/useDashboard_Data";
+
+const ProjectProgressChart = () => {
+  const { projects } = useProjects();
+  const [selectedProjectId, setSelectedProjectId] = useState("all");
+  const [range, setRange] = useState("1W");
+
+  const getDaysFromRange = (range) => {
+    switch (range) {
+      case "1D": return 1;
+      case "1W": return 7;
+      case "15D": return 15;
+      case "1M": return 30;
+      case "3M": return 90;
+      case "1Y": return 365;
+      case "5Y": return 1825;
+      default: return 7;
+    }
+  };
+
+  const days = getDaysFromRange(range);
+  const today = new Date();
+  const FromDate = today.toLocaleDateString('en-CA');
+
+  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
+    days,
+    FromDate,
+    projectId: selectedProjectId === "all" ? null : selectedProjectId,
+  });
+
+  const sortedDashboardData = [...dashboard_data].sort(
+    (a, b) => new Date(a.date) - new Date(b.date)
+  );
+
+  const lineChartSeries = [
+    {
+      name: "Planned Work",
+      data: sortedDashboardData.map((d) => d.plannedTask || 0),
+    },
+    {
+      name: "Completed Work",
+      data: sortedDashboardData.map((d) => d.completedTask || 0),
+    },
+  ];
+
+  const lineChartCategories = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
+  );
+  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+  );
+
+  return (
+    <div className="card h-100">
+      <div className="card-header">
+        {/* Row 1: Title + Project Selector */}
+        <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Project Progress</h5>
+            <p className="card-subtitle">Progress Overview by Project</p>
+          </div>
+
+          <div className="btn-group">
+            <button
+              className="btn btn-outline-primary btn-sm dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              {selectedProjectId === "all"
+                ? "All Projects"
+                : projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
+            </button>
+
+            <ul className="dropdown-menu">
+              <li>
+                <button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
+                  All Projects
+                </button>
+              </li>
+              {projects?.map((project) => (
+                <li key={project.id}>
+                  <button
+                    className="dropdown-item"
+                    onClick={() => setSelectedProjectId(project.id)}
+                  >
+                    {project.name}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Row 2: Time Range Buttons */}
+        <div className="d-flex flex-wrap  mt-2">
+          {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
+            <button
+              key={key}
+              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
+                range === key ? " border-bottom border-primary text-primary" : "text-muted"
+              }`}
+              style={{ cursor: "pointer", transition: "all 0.2s ease" }}
+              onClick={() => setRange(key)}
+            >
+              {key}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="card-body ">
+        <LineChart
+          seriesData={lineChartSeries}
+          categories={lineChartCategories}
+          loading={isLineChartLoading}
+          lineChartCategoriesDates={lineChartCategoriesDates}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectProgressChart;