admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

modify content layout in project overview widget

Browse Source
This commit is contained in:
Vikas Nale 2025-07-07 11:39:07 +05:30
parent b512a1dd3d
commit 6f614334a8
1 changed files with 81 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/components/Project/ProjectOverview.jsx
View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { import {
useEmployeesByProjectAllocated, useEmployeesByProjectAllocated,
@ -10,12 +11,20 @@ import Chart from "react-apexcharts";
const ProjectOverview = ({ project }) => { const ProjectOverview = ({ project }) => {
const { projects } = useProjects(); const { projects } = useProjects();
const [current_project, setCurrentProject] = useState(
projects.find((pro) => pro.id == project)
);
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const getProgressInPercentage = (planned, completed) => { const getProgressInPercentage = (planned, completed) => {
if (completed && planned) return (completed * 100) / planned; if (completed && planned) return (completed * 100) / planned;
else return 0; 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 // Utility function to check if a number has a decimal part
const hasDecimal = (num) => { const hasDecimal = (num) => {
@ -135,14 +144,27 @@ const ProjectOverview = ({ project }) => {
const radialBarOptions = getRadialBarOptions(radialPercentage); const radialBarOptions = getRadialBarOptions(radialPercentage);
useEffect(() => { useEffect(() => {
if (project_detail) { if (current_project) {
let val = getProgressInPercentage( let val = getProgressInPercentage(
project_detail.plannedWork, current_project.plannedWork,
project_detail.completedWork current_project.completedWork
); );
setRadialPercentage(val); setRadialPercentage(val);
} else setRadialPercentage(0); } else setRadialPercentage(0);
}, [project_detail]); }, [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 ( return (
<div className="card mb-6"> <div className="card mb-6">
@ -154,56 +176,61 @@ const ProjectOverview = ({ project }) => {
</h6> </h6>
</div> </div>
<div className="card-body"> <div className="card-body">
<ul className="list-unstyled mb-0 mt-3 pt-1"> <ul className="list-none p-0 m-0 space-y-4">
<li> {/* Example List Item 1 */}
<Chart <li className="flex flex-wrap">
options={radialBarOptions} {/* First div: takes full width on small screens, half width on medium and up */}
series={radialBarOptions.series} // Series is directly from the options object <div class="d-flex flex-wrap w-100">
type="radialBar" <div class="me-2 mb-2" style={{ flex: "1 1 auto" }}>
height="100%" <Chart
/> options={radialBarOptions}
</li> series={radialBarOptions.series} // Series is directly from the options object
<li> type="radialBar"
<div class="d-flex gap-11 justify-content-between"> height="100%"
<div class="d-flex"> />
<div class="avatar me-2">
<span class="avatar-initial rounded-2 bg-label-primary">
<i class="icon-base bx bx-check icon-lg text-primary"></i>
</span>
</div>
<div class="d-flex flex-column">
<small className="fw-bold">Planned</small>
<h5 class="mb-0">
{FormattedNumber(project_detail?.plannedWork)}
</h5>
</div>
</div> </div>
<div class="d-flex"> {/* Second div: takes full width on small screens, half width on medium and up */}
<div class="avatar me-2"> <div class="mb-2" style={{ flex: "1 1 auto" }}>
<span class="avatar-initial rounded-2 bg-label-info"> <div>
<i class="icon-base bx bx-star icon-lg text-info"></i> <div class="d-flex">
</span> <div class="avatar me-2">
</div> <span class="avatar-initial rounded-2 bg-label-primary">
<div class="d-flex flex-column"> <i class="icon-base bx bx-check icon-lg text-primary"></i>
<small className="fw-bold">Completed</small> </span>
<h5 class="mb-0"> </div>
{FormattedNumber(project_detail?.completedWork)} <div class="d-flex flex-column text-start">
</h5> <small className="fw-bold">Tasks Planned</small>
</div> <h5 class="mb-0">
</div> {FormattedNumber(current_project?.plannedWork)}
</div> </h5>
</li> </div>
<li> </div>
<div class="d-flex gap-11 mt-5"> <div class="d-flex">
<div class="d-flex"> <div class="avatar me-2">
<div class="avatar me-2"> <span class="avatar-initial rounded-2 bg-label-info">
<span class="avatar-initial rounded-2 bg-label-primary"> <i class="icon-base bx bx-star icon-lg text-info"></i>
<i class="icon-base bx bx-group icon-lg text-primary"></i> </span>
</span> </div>
</div> <div class="d-flex flex-column text-start">
<div class="d-flex flex-column"> <small className="fw-bold">Tasks Completed</small>
<small className="fw-bold">Current Team Size</small> <h5 class="mb-0">
<h5 class="mb-0">{project_detail?.teamSize}</h5> {FormattedNumber(current_project?.completedWork)}
</h5>
</div>
</div>
<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 text-start">
<small className="fw-bold">Current Team Size</small>
<h5 class="mb-0">
{FormattedNumber(current_project?.teamSize)}
</h5>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>