From b512a1dd3dff17f32c96bf1ad00b5f915fc21a50 Mon Sep 17 00:00:00 2001 From: Vikas Nale Date: Mon, 7 Jul 2025 10:04:13 +0530 Subject: [PATCH] Modify Project overview design add project overview to dashboard --- src/components/Dashboard/Dashboard.jsx | 9 +- src/components/Project/AboutProject.jsx | 4 +- src/components/Project/ProjectOverview.jsx | 195 +++++++++++++++------ 3 files changed, 149 insertions(+), 59 deletions(-) diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 8ca64981..abbeb9ce 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/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 = () => { - {/*
- -
*/} +
+ +
); }; -export default Dashboard; \ No newline at end of file +export default Dashboard; diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx index a64a09d1..bf07c51e 100644 --- a/src/components/Project/AboutProject.jsx +++ b/src/components/Project/AboutProject.jsx @@ -71,8 +71,8 @@ const AboutProject = ({ data }) => { {data && (
-
-
+
+
{" "} Project Profile diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx index 89b69886..3d05dbd2 100644 --- a/src/components/Project/ProjectOverview.jsx +++ b/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) => { - return (completed * 100) / planned + "%"; - }; - const getProgressInNumber = (planned, completed) => { - var number = (completed * 100) / planned; - return FormattedNumber(number); + const getProgressInPercentage = (planned, completed) => { + if (completed && planned) return (completed * 100) / planned; + else return 0; }; 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 Invalid Number; + 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 (
@@ -69,55 +155,58 @@ const ProjectOverview = ({ project }) => {
    -
  • - - Task Planned:{" "} - {project_detail?.plannedWork} +
  • +
    • -
  • - - Task Completed:{" "} - {project_detail?.completedWork} -
    • -
  • - - Current team Size:{" "} - {project_detail?.teamSize} -
    • -
  • - {project_detail && ( - <> -
    - - {Math.floor( - getProgressInNumber( - project_detail.plannedWork, - project_detail.completedWork - ) - ) || 0}{" "} - % Completed - +
  • +
    +
    +
    + + +
    -
    -
    +
    + Planned +
    + {FormattedNumber(project_detail?.plannedWork)} +
    - - )} +
    +
    +
    + + + +
    +
    + Completed +
    + {FormattedNumber(project_detail?.completedWork)} +
    +
    +
    +
    +
    • +
  • +
    +
    +
    + + + +
    +
    + Current Team Size +
    {project_detail?.teamSize}
    +
    +
    +