From 4445ef18abff6d2292732300c4e07d58c2c67804 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Mon, 26 May 2025 11:19:59 +0530
Subject: [PATCH] Dashboard Component View.

---
 src/components/Dashboard/Dashboard.jsx | 230 ++-----------------------
 1 file changed, 14 insertions(+), 216 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index e4ac83ef..1e4cceaf 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -1,252 +1,50 @@
-import React, { useState } from "react";
-import HorizontalBarChart from "../Charts/HorizontalBarChart";
-import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
+import React from "react";
 import {
-  useDashboard_Data,
   useDashboardProjectsCardData,
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import Projects from "./Projects";
 import Teams from "./Teams";
+import TasksCard from "./Tasks";
+import ProjectCompletionChart from "./ProjectCompletionChart";
+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 =
-    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);
-    }) || [];
-
-  // 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">
         {/* Projects Card */}
         <div className="col-sm-6 col-lg-4">
-          <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">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
-                Projects
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {projectsCardData.totalProjects?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {projectsCardData.ongoingProjects?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Ongoing</small>
-              </div>
-            </div>
-          </div>
+          <Projects projectsCardData={projectsCardData} />
         </div>
 
         {/* Teams Card */}
-       <div className="col-sm-6 col-lg-4">
-          <Teams teamsCardData={teamsCardData} /> {/* Use the Teams component */}
+        <div className="col-sm-6 col-lg-4">
+          <Teams teamsCardData={teamsCardData} />
         </div>
 
         {/* Tasks Card */}
         <div className="col-sm-6 col-lg-4">
-          <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">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="bx bx-task text-success"></i> Tasks
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.totalTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.completedTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Completed</small>
-              </div>
-            </div>
-          </div>
+          <TasksCard tasksCardData={tasksCardData} />
         </div>
 
-        {/* Bar Chart */}
+        {/* Bar Chart (Project Completion) */}
         <div className="col-xxl-6 col-lg-6">
-          <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>
+          <ProjectCompletionChart />
         </div>
 
-        {/* Line Chart */}
+        {/* Line Chart (Project Progress) */}
         <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>
   );
 };
 
-export default Dashboard;
+export default Dashboard;
\ No newline at end of file
-- 
2.43.0