From 7cc9181fb9c49b9663c90c2d72cb0678697bd158 Mon Sep 17 00:00:00 2001
From: "kartik.sharma" <kartik.sharma@marcoaiot.com>
Date: Fri, 23 May 2025 11:18:58 +0530
Subject: [PATCH] Move all the project-related code from the Dashboard
 component into a new component named 'Projects'.

---
 src/components/Dashboard/Dashboard.jsx | 33 +++++---------------------
 src/components/Dashboard/Projects.jsx  | 33 ++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 src/components/Dashboard/Projects.jsx

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a352f5a5..e53175de 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -8,6 +8,7 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import Projects from "./Projects";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -93,30 +94,9 @@ const Dashboard = () => {
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
-        {/* Projects Card */}
+        {/* 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 */}
@@ -209,7 +189,7 @@ const Dashboard = () => {
                     {selectedProjectId === "all"
                       ? "All Projects"
                       : projects?.find((p) => p.id === selectedProjectId)
-                          ?.name || "Select Project"}
+                        ?.name || "Select Project"}
                   </button>
 
                   <ul className="dropdown-menu">
@@ -240,11 +220,10 @@ const Dashboard = () => {
                 {["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
+                    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)}
                   >
diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx
new file mode 100644
index 00000000..5d1679f6
--- /dev/null
+++ b/src/components/Dashboard/Projects.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
+
+const Projects = () => {
+  const { projectsCardData } = useDashboardProjectsCardData();
+
+  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">
+        <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>
+  );
+};
+
+export default Projects;
\ No newline at end of file
-- 
2.43.0