Move all the Projects Completion Status-related code from the Dashboard component into a new component named 'Projects Completion Status'.

src/components/Dashboard/Dashboard.jsx

@@ -8,6 +8,7 @@ import {
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import ProjectCompletionChart from "./ProjectCompletionChart";
 
 const Dashboard = () => {
   const { projects, loading } = useProjects();
@@ -55,15 +56,6 @@ const Dashboard = () => {
     (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 = [
@@ -170,22 +162,8 @@ const Dashboard = () => {
         </div>
 
         {/* Bar Chart */}
-        <div className="col-xxl-6 col-lg-6">
+       <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 */}

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;