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

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

@ -1,5 +1,6 @@
import React from "react";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
useEmployeesByProjectAllocated,
@ -10,12 +11,20 @@ import Chart from "react-apexcharts";
const ProjectOverview = ({ project }) => {
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) => {
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) => {
@ -135,14 +144,27 @@ const ProjectOverview = ({ project }) => {
const radialBarOptions = getRadialBarOptions(radialPercentage);
useEffect(() => {
if (project_detail) {
if (current_project) {
let val = getProgressInPercentage(
project_detail.plannedWork,
project_detail.completedWork
current_project.plannedWork,
current_project.completedWork
);
setRadialPercentage(val);
} 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 (
<div className="card mb-6">
@ -154,27 +176,32 @@ const ProjectOverview = ({ project }) => {
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled mb-0 mt-3 pt-1">
<li>
<ul className="list-none p-0 m-0 space-y-4">
{/* Example List Item 1 */}
<li className="flex flex-wrap">
{/* First div: takes full width on small screens, half width on medium and up */}
<div class="d-flex flex-wrap w-100">
<div class="me-2 mb-2" style={{ flex: "1 1 auto" }}>
<Chart
options={radialBarOptions}
series={radialBarOptions.series} // Series is directly from the options object
type="radialBar"
height="100%"
/>
</li>
<li>
<div class="d-flex gap-11 justify-content-between">
</div>
{/* Second div: takes full width on small screens, half width on medium and up */}
<div class="mb-2" style={{ flex: "1 1 auto" }}>
<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-check icon-lg text-primary"></i>
</span>
</div>
<div class="d-flex flex-column">
<small className="fw-bold">Planned</small>
<div class="d-flex flex-column text-start">
<small className="fw-bold">Tasks Planned</small>
<h5 class="mb-0">
{FormattedNumber(project_detail?.plannedWork)}
{FormattedNumber(current_project?.plannedWork)}
</h5>
</div>
</div>
@ -184,26 +211,26 @@ const ProjectOverview = ({ project }) => {
<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>
<div class="d-flex flex-column text-start">
<small className="fw-bold">Tasks Completed</small>
<h5 class="mb-0">
{FormattedNumber(project_detail?.completedWork)}
{FormattedNumber(current_project?.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">
<div class="d-flex flex-column text-start">
<small className="fw-bold">Current Team Size</small>
<h5 class="mb-0">{project_detail?.teamSize}</h5>
<h5 class="mb-0">
{FormattedNumber(current_project?.teamSize)}
</h5>
</div>
</div>
</div>
</div>
</div>