refactor: center chart using Bootstrap utilities and clean up layout

add project overview to dashboard

src/components/Dashboard/Dashboard.jsx

@@ -9,6 +9,7 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
+import ProjectOverview from "../Project/ProjectOverview";
 // import Attendance from "./Attendance";
 
 const Dashboard = () => {
@@ -44,9 +45,9 @@ const Dashboard = () => {
           <ProjectProgressChart />
         </div>
 
-        {/* <div className="col-xxl-6 col-lg-6">
-          <Attendance />
-        </div> */}
+        <div className="col-xxl-6 col-lg-6">
+          <ProjectOverview />
+        </div>
       </div>
     </div>
   );

src/components/Project/AboutProject.jsx

@@ -71,8 +71,8 @@ const AboutProject = ({ data }) => {
       </div>
       {data && (
         <div className="card mb-6">
-          <div class="card-header text-start">
-            <h6 class="card-action-title mb-0">
+          <div className="card-header text-start">
+            <h6 className="card-action-title mb-0">
               {" "}
               <i className="fa fa-building rounded-circle text-primary"></i>
               <span className="ms-2">Project Profile</span>

src/components/Project/ProjectOverview.jsx

@@ -1,20 +1,30 @@
 import React from "react";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
 import {
   useEmployeesByProjectAllocated,
   useProjects,
 } from "../../hooks/useProjects";
+import ReactApexChart from "react-apexcharts";
+import Chart from "react-apexcharts";
 
 const ProjectOverview = ({ project }) => {
   const { projects } = useProjects();
-  const getProgress = (planned, completed) => {
-    return (completed * 100) / planned + "%";
-  };
-  const getProgressInNumber = (planned, completed) => {
-    var number = (completed * 100) / planned;
-    return FormattedNumber(number);
+  const [current_project, setCurrentProject] = useState(
+    projects.find((pro) => pro.id == project)
+  );
+
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+
+  const getProgressInPercentage = (planned, completed) => {
+    if (completed && planned) return (completed * 100) / planned;
+    else return 0;
   };
 
-  const project_detail = projects.find((pro) => pro.id == project);
+  //let project_detail = projects.find((pro) => pro.id == project);
 
   // Utility function to check if a number has a decimal part
   const hasDecimal = (num) => {
@@ -30,7 +40,7 @@ const ProjectOverview = ({ project }) => {
 
     // Handle non-numeric values gracefully
     if (isNaN(numericValue)) {
-      return <span>Invalid Number</span>;
+      return 0;
     }
 
     let options = {};
@@ -58,6 +68,104 @@ const ProjectOverview = ({ project }) => {
     return formattedString;
   }
 
+  const getRadialBarOptions = (percentage) => {
+    return {
+      chart: {
+        height: 350,
+        type: "radialBar",
+        sparkline: {
+          // Often used with gauges for a minimalist look
+          enabled: true,
+        },
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: -90, // Start the gauge from the left (bottom-left)
+          endAngle: 90, // End the gauge at the right (bottom-right)
+          hollow: {
+            size: "70%", // Size of the hollow part of the bar
+          },
+          dataLabels: {
+            show: true,
+            name: {
+              show: true,
+              fontSize: "16px",
+              fontFamily: "Inter, sans-serif",
+              color: "#6B7280", // Tailwind gray-500
+              offsetY: -10,
+            },
+            value: {
+              show: true,
+              fontSize: "28px",
+              fontFamily: "Inter, sans-serif",
+              color: "#374151", // Tailwind gray-700
+              offsetY: 20,
+              formatter: function (val) {
+                return FormattedNumber(val) + "%"; // Format value as percentage
+              },
+            },
+          },
+          track: {
+            background: "#E5E7EB", // Tailwind gray-200 for the track
+            strokeWidth: "97%",
+            margin: 5, // margin in between segments
+            dropShadow: {
+              enabled: true,
+              top: 2,
+              left: 0,
+              blur: 4,
+              opacity: 0.15,
+            },
+          },
+        },
+      },
+      fill: {
+        type: "gradient",
+        gradient: {
+          shade: "dark",
+          type: "horizontal",
+          shadeIntensity: 0.5,
+          gradientToColors: ["#6366F1"], // Tailwind indigo-500
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 1,
+          stops: [0, 100],
+        },
+      },
+      stroke: {
+        lineCap: "round", // Rounded ends for the bar
+      },
+      labels: ["Progress"], // Label for the radial bar
+      series: [percentage], // The percentage value
+    };
+  };
+  const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
+
+  const radialBarOptions = getRadialBarOptions(radialPercentage);
+
+  useEffect(() => {
+    if (current_project) {
+      let val = getProgressInPercentage(
+        current_project.plannedWork,
+        current_project.completedWork
+      );
+      setRadialPercentage(val);
+    } else setRadialPercentage(0);
+  }, [current_project]);
+
+  useEffect(() => {
+    setCurrentProject(projects.find((pro) => pro.id == selectedProject));
+
+    console.log(selectedProject);
+    if (current_project) {
+      let val = getProgressInPercentage(
+        current_project.plannedWork,
+        current_project.completedWork
+      );
+      setRadialPercentage(val);
+    } else setRadialPercentage(0);
+  }, [selectedProject]);
+
   return (
     <div className="card mb-6">
       <div className="card-header text-start">
@@ -68,59 +176,75 @@ const ProjectOverview = ({ project }) => {
         </h6>
       </div>
      <div className="card-body">
-        <ul className="list-unstyled mb-0 mt-3 pt-1">
-          <li className="d-flex align-items-center mb-3">
-            <i className="bx bx-check"></i>
-            <span className="fw-medium mx-2">Task Planned:</span>{" "}
-            <span>{project_detail?.plannedWork}</span>
-          </li>
-          <li className="d-flex align-items-center mb-3">
-            <i className="bx bx-star"></i>
-            <span className="fw-medium mx-2">Task Completed:</span>{" "}
-            <span>{project_detail?.completedWork}</span>
-          </li>
-          <li className="d-flex align-items-center mb-3">
-            <i className="bx bx-user"></i>
-            <span className="fw-medium mx-2">Current team Size:</span>{" "}
-            <span>{project_detail?.teamSize}</span>
-          </li>
-          <li className=" mb-3">
-            {project_detail && (
-              <>
-                <div className="d-flex  text-end mb-2  mt-5">
-                  <small className="text-body text-muted ">
-                    {Math.floor(
-                      getProgressInNumber(
-                        project_detail.plannedWork,
-                        project_detail.completedWork
-                      )
-                    ) || 0}{" "}
-                    % Completed
-                  </small>
+  <ul className="list-unstyled m-0 p-0">
+    <li className="d-flex flex-wrap">
+      <div className="w-100 d-flex flex-wrap">
+        {/* Centered Chart */}
+        <div className="w-100 d-flex justify-content-center mb-3">
+          <div >
+            <Chart
+              options={radialBarOptions}
+              series={radialBarOptions.series}
+              type="radialBar"
+              height="100%"
+            />
+          </div>
+        </div>
+
+        {/* Info Section */}
+        <div className="mb-2" style={{ flex: "1 1 auto" }}>
+          <div>
+            {/* Tasks Planned */}
+            <div className="d-flex align-items-center mb-3">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-primary">
+                  <i className="bx bx-check text-primary fs-4"></i>
+                </span>
+              </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Tasks Planned</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.plannedWork)}
+                </h5>
+              </div>
+            </div>
+
+            {/* Tasks Completed */}
+            <div className="d-flex align-items-center mb-3">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-info">
+                  <i className="bx bx-star text-info fs-4"></i>
+                </span>
+              </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Tasks Completed</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.completedWork)}
+                </h5>
+              </div>
+            </div>
+
+            {/* Team Size */}
+            <div className="d-flex align-items-center">
+              <div className="avatar me-2">
+                <span className="avatar-initial rounded-2 bg-label-primary">
+                  <i className="bx bx-group text-primary fs-4"></i>
+                </span>
+              </div>
+              <div className="d-flex flex-column text-start">
+                <small className="fw-bold">Current Team Size</small>
+                <h5 className="mb-0">
+                  {FormattedNumber(current_project?.teamSize)}
+                </h5>
+              </div>
+            </div>
+          </div>
         </div>
-                <div
-                  className="progress mb-4 rounded"
-                  style={{ height: "8px" }}
-                >
-                  <div
-                    className="progress-bar rounded"
-                    role="progressbar"
-                    style={{
-                      width: getProgress(
-                        project_detail.plannedWork,
-                        project_detail.completedWork
-                      ),
-                    }}
-                    aria-valuenow={project_detail.completedWork}
-                    aria-valuemin="0"
-                    aria-valuemax={project_detail.plannedWork}
-                  ></div>
       </div>
-              </>
-            )}
     </li>
   </ul>
-      </div>
+</div>
+
     </div>
   );
 };