Merge branch 'Kartik_Enhancement#337' into Issue_May_4W

# Conflicts:
#	src/components/Dashboard/Dashboard.jsx

src/components/Dashboard/Dashboard.jsx

@@ -8,29 +8,80 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
-import ProjectProgressChart from "./ProjectProgressChart";
+import ProjectCompletionChart from "./ProjectCompletionChart";
 
 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();
 
-  // Bar chart logic
+  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
-  const projectNames = projects?.map((p) => p.name) || [];
+    days,
-  const projectProgress =
+    FromDate,
-    projects?.map((p) => {
+    projectId: selectedProjectId === "all" ? null : selectedProjectId,
-      const completed = p.completedWork || 0;
+  });
-      const planned = p.plannedWork || 1;
+
-      const percent = (completed / planned) * 100;
+  // Sort dashboard_data by date ascending
-      return Math.min(Math.round(percent), 100);
+  const sortedDashboardData = [...dashboard_data].sort(
-    }) || [];
+    (a, b) => new Date(a.date) - new Date(b.date)
+  );
 
 
+  // 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">
@@ -112,26 +163,83 @@ const Dashboard = () => {
 
         {/* Bar Chart */}
        <div className="col-xxl-6 col-lg-6">
-          <div className="card h-100">
+          <ProjectCompletionChart />
-            <div className="card-header d-flex align-items-start justify-content-between">
-              <div className="card-title mb-0 text-start">
-                <h5 className="mb-1">Projects</h5>
-                <p className="card-subtitle">Projects Completion Status</p>
-              </div>
-            </div>
-            <div className="card-body">
-              <HorizontalBarChart
-                categories={projectNames}
-                seriesData={projectProgress}
-                loading={loading}
-              />
-            </div>
-          </div>
         </div>
 
         {/* Line Chart */}
         <div className="col-xxl-6 col-lg-6">
-          <ProjectProgressChart />
+          <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>
         </div>
       </div>
     </div>

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import HorizontalBarChart from "../Charts/HorizontalBarChart";
+import { useProjects } from "../../hooks/useProjects";
+
+const ProjectCompletionChart = () => {
+  const { projects, loading } = useProjects();
+
+  // Bar chart logic
+  const projectNames = projects?.map((p) => p.name) || [];
+  const projectProgress =
+    projects?.map((p) => {
+      const completed = p.completedWork || 0;
+      const planned = p.plannedWork || 1;
+      const percent = (completed / planned) * 100;
+      return Math.min(Math.round(percent), 100);
+    }) || [];
+
+  return (
+    <div className="card h-100">
+      <div className="card-header d-flex align-items-start justify-content-between">
+        <div className="card-title mb-0 text-start">
+          <h5 className="mb-1">Projects</h5>
+          <p className="card-subtitle">Projects Completion Status</p>
+        </div>
+      </div>
+      <div className="card-body">
+        <HorizontalBarChart
+          categories={projectNames}
+          seriesData={projectProgress}
+          loading={loading}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCompletionChart;