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

Move all the Projects Completion Status-related code from the Dashboard component into a new component named 'Projects Completion Status'.

Browse Source
This commit is contained in:
kartik.sharma 2025-05-23 14:18:53 +05:30
parent 396706dcf5
commit 5e462a88f7
2 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Dashboard/Dashboard.jsx
View File

@ -8,6 +8,7 @@ import {
useDashboardTeamsCardData,
useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data";
import ProjectCompletionChart from "./ProjectCompletionChart";
const Dashboard = () => {
const { projects, loading } = useProjects();
@ -55,15 +56,6 @@ const Dashboard = () => {
(a, b) => new Date(a.date) - new Date(b.date)
);
// Bar chart logic
const projectNames = projects?.map((p) => p.name) || [];
const projectProgress =
projects?.map((p) => {
const completed = p.completedWork || 0;
const planned = p.plannedWork || 1;
const percent = (completed / planned) * 100;
return Math.min(Math.round(percent), 100);
}) || [];
// Line chart data
const lineChartSeries = [
@ -170,22 +162,8 @@ const Dashboard = () => {
</div>
{/* Bar Chart */}
<div className="col-xxl-6 col-lg-6">
<div className="card h-100">
<div className="card-header d-flex align-items-start justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Projects</h5>
<p className="card-subtitle">Projects Completion Status</p>
</div>
</div>
<div className="card-body">
<HorizontalBarChart
categories={projectNames}
seriesData={projectProgress}
loading={loading}
/>
</div>
</div>
<div className="col-xxl-6 col-lg-6">
<ProjectCompletionChart />
</div>
{/* Line Chart */}

37
src/components/Dashboard/ProjectCompletionChart.jsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import { useProjects } from "../../hooks/useProjects";
const ProjectCompletionChart = () => {
const { projects, loading } = useProjects();
// Bar chart logic
const projectNames = projects?.map((p) => p.name) || [];
const projectProgress =
projects?.map((p) => {
const completed = p.completedWork || 0;
const planned = p.plannedWork || 1;
const percent = (completed / planned) * 100;
return Math.min(Math.round(percent), 100);
}) || [];
return (
<div className="card h-100">
<div className="card-header d-flex align-items-start justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Projects</h5>
<p className="card-subtitle">Projects Completion Status</p>
</div>
</div>
<div className="card-body">
<HorizontalBarChart
categories={projectNames}
seriesData={projectProgress}
loading={loading}
/>
</div>
</div>
);
};
export default ProjectCompletionChart;