Modify Project overview design

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,12 +45,12 @@ const Dashboard = () => {
           <ProjectProgressChart />
         </div>
 
-        {/* <div className="col-xxl-6 col-lg-6">
+        <div className="col-xxl-6 col-lg-6">
-          <Attendance />
+          <ProjectOverview />
-        </div> */}
+        </div>
       </div>
     </div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;

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">
+          <div className="card-header text-start">
-            <h6 class="card-action-title mb-0">
+            <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,17 +1,18 @@
 import React from "react";
+import { useEffect, useState } from "react";
+
 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) => {
+  const getProgressInPercentage = (planned, completed) => {
-    return (completed * 100) / planned + "%";
+    if (completed && planned) return (completed * 100) / planned;
-  };
+    else return 0;
-  const getProgressInNumber = (planned, completed) => {
-    var number = (completed * 100) / planned;
-    return FormattedNumber(number);
   };
 
   const project_detail = projects.find((pro) => pro.id == project);
@@ -30,7 +31,7 @@ const ProjectOverview = ({ project }) => {
 
     // Handle non-numeric values gracefully
     if (isNaN(numericValue)) {
-      return <span>Invalid Number</span>;
+      return 0;
     }
 
     let options = {};
@@ -58,6 +59,91 @@ 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 (project_detail) {
+      let val = getProgressInPercentage(
+        project_detail.plannedWork,
+        project_detail.completedWork
+      );
+      setRadialPercentage(val);
+    } else setRadialPercentage(0);
+  }, [project_detail]);
+
   return (
     <div className="card mb-6">
       <div className="card-header text-start">
@@ -69,55 +155,58 @@ const ProjectOverview = ({ project }) => {
       </div>
       <div className="card-body">
         <ul className="list-unstyled mb-0 mt-3 pt-1">
-          <li className="d-flex align-items-center mb-3">
+          <li>
-            <i className="bx bx-check"></i>
+            <Chart
-            <span className="fw-medium mx-2">Task Planned:</span>{" "}
+              options={radialBarOptions}
-            <span>{project_detail?.plannedWork}</span>
+              series={radialBarOptions.series} // Series is directly from the options object
+              type="radialBar"
+              height="100%"
+            />
           </li>
-          <li className="d-flex align-items-center mb-3">
+          <li>
-            <i className="bx bx-star"></i>
+            <div class="d-flex gap-11 justify-content-between">
-            <span className="fw-medium mx-2">Task Completed:</span>{" "}
+              <div class="d-flex">
-            <span>{project_detail?.completedWork}</span>
+                <div class="avatar me-2">
-          </li>
+                  <span class="avatar-initial rounded-2 bg-label-primary">
-          <li className="d-flex align-items-center mb-3">
+                    <i class="icon-base bx bx-check icon-lg text-primary"></i>
-            <i className="bx bx-user"></i>
+                  </span>
-            <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>
                 </div>
-                <div
+                <div class="d-flex flex-column">
-                  className="progress mb-4 rounded"
+                  <small className="fw-bold">Planned</small>
-                  style={{ height: "8px" }}
+                  <h5 class="mb-0">
-                >
+                    {FormattedNumber(project_detail?.plannedWork)}
-                  <div
+                  </h5>
-                    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>
-              </>
+              </div>
-            )}
+              <div class="d-flex">
+                <div class="avatar me-2">
+                  <span class="avatar-initial rounded-2 bg-label-info">
+                    <i class="icon-base bx bx-star icon-lg text-info"></i>
+                  </span>
+                </div>
+                <div class="d-flex flex-column">
+                  <small className="fw-bold">Completed</small>
+                  <h5 class="mb-0">
+                    {FormattedNumber(project_detail?.completedWork)}
+                  </h5>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="d-flex gap-11 mt-5">
+              <div class="d-flex">
+                <div class="avatar me-2">
+                  <span class="avatar-initial rounded-2 bg-label-primary">
+                    <i class="icon-base bx bx-group icon-lg text-primary"></i>
+                  </span>
+                </div>
+                <div class="d-flex flex-column">
+                  <small className="fw-bold">Current Team Size</small>
+                  <h5 class="mb-0">{project_detail?.teamSize}</h5>
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </div>