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

format DPR page

Browse Source
This commit is contained in:
Vikas Nale 2025-12-14 16:49:06 +05:30
parent a477090cb8
commit 7143af1e1e
3 changed files with 127 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/reports/Progress.jsx
View File

@ -8,7 +8,7 @@ const Progress = ({
total = 0, total = 0,
height = 100, height = 100,
width = 100, width = 100,
completed =0, completed = 0,
}) => { }) => {
const options = { const options = {
chart: { chart: {
@ -24,16 +24,19 @@ const Progress = ({
value: { value: {
show: true, show: true,
fontSize: "13px", fontSize: "13px",
width:"12px", width: "12px",
textWrap:"wrap", textWrap: "wrap",
color: color, color: color,
fontWeight: 400, fontWeight: 400,
offsetY: 7, offsetY: 7,
formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`, formatter: () =>
`${formatFigure(completed, {
notation: "compact",
})} / ${formatFigure(total, { notation: "compact" })}`,
},
style: {
textWrap: "wrap",
}, },
style:{
textWrap:"wrap",
}
}, },
}, },
}, },
@ -54,7 +57,6 @@ const Progress = ({
}; };
export default Progress; export default Progress;
// const Progress = ({ // const Progress = ({
// completed = 0, // completed = 0,
// inProgress = 0, // inProgress = 0,

12
src/components/reports/ReportsDonutCard.jsx
View File

@ -10,10 +10,10 @@ const ReportsDonutCard = ({
footer = "Team members present on the site", footer = "Team members present on the site",
chartColor, chartColor,
legend1 = "Completed", legend1 = "Completed",
legend2 = "Pending" legend2 = "Pending",
}) => { }) => {
return ( return (
<div className="border-top card border-primary py-4 px-2"> <div className="border-top card border-primary py-4 px-2 h-100">
<h4 className="reports-card-title">{title}</h4> <h4 className="reports-card-title">{title}</h4>
<div className="d-flex justify-content-center align-items-center flex-column"> <div className="d-flex justify-content-center align-items-center flex-column">
@ -26,10 +26,7 @@ const ReportsDonutCard = ({
completed={value} completed={value}
total={total} total={total}
/> />
<ReportsLegend <ReportsLegend legend1={legend1} legend2={legend2} />
legend1={legend1}
legend2={legend2}
/>
</div> </div>
</div> </div>
@ -56,7 +53,6 @@ export const ReportsCard = ({
<div className="d-flex justify-content-start align-items-center flex-column"> <div className="d-flex justify-content-start align-items-center flex-column">
<div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3"> <div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
<ReportsLegend /> <ReportsLegend />
</div> </div>
</div> </div>
@ -67,5 +63,3 @@ export const ReportsCard = ({
</div> </div>
); );
}; };

66
src/components/reports/report-dpr.jsx
View File

@ -4,6 +4,7 @@ import Progress from "./Progress";
import { formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { localToUtc } from "../../utils/appUtils"; import { localToUtc } from "../../utils/appUtils";
import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard"; import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
import { SpinnerLoader } from "../common/Loader";
const ReportDPR = ({ project, date }) => { const ReportDPR = ({ project, date }) => {
const { data, isLoading, isError, error } = useProjectReportByProject( const { data, isLoading, isError, error } = useProjectReportByProject(
@ -12,14 +13,16 @@ const ReportDPR = ({ project, date }) => {
); );
return ( return (
<> <>
<div className="card py-2"> <div className="card py-2 mb-5">
<div className="d-flex text-start px-2 mt-2"> <div className="d-flex text-start px-2 mt-2">
Project Status Reported - Generated at{" "} Project Status Reported - Generated at{" "}
{formatUTCToLocalTime(data?.date, true)} {formatUTCToLocalTime(data?.date, true)}
</div> </div>
{/* <!-- Status Cards */} {/* <!-- Status Cards */}
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-4"> <div className="row px-5 py-4">
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
{" "}
<ReportsDonutCard <ReportsDonutCard
title={"TODAY'S ATTENDANCE"} title={"TODAY'S ATTENDANCE"}
total={data?.totalEmployees} total={data?.totalEmployees}
@ -27,6 +30,9 @@ const ReportDPR = ({ project, date }) => {
legend1="Today's Attendance" legend1="Today's Attendance"
legend2="Total Employees" legend2="Total Employees"
/> />
</div>
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
{" "}
<ReportsDonutCard <ReportsDonutCard
title={"DAILY TASKS COMPLETED"} title={"DAILY TASKS COMPLETED"}
total={data?.totalCompletedTask} total={data?.totalCompletedTask}
@ -36,7 +42,9 @@ const ReportDPR = ({ project, date }) => {
legend1="Completed Work" legend1="Completed Work"
legend2="Planned Work" legend2="Planned Work"
/> />
</div>
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
{" "}
<ReportsDonutCard <ReportsDonutCard
title={"PROJECT COMPLETION STATUS"} title={"PROJECT COMPLETION STATUS"}
total={data?.totalPlannedWork} total={data?.totalPlannedWork}
@ -46,8 +54,9 @@ const ReportDPR = ({ project, date }) => {
legend1="Completed Work" legend1="Completed Work"
legend2="Planned Work" legend2="Planned Work"
/> />
</div>
<div className="border-top card border-warning py-4 px-2"> <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
<div className="border-top card border-warning py-4 px-2 h-100">
<h5 className="reports-card-title">Attendance Pending Report</h5> <h5 className="reports-card-title">Attendance Pending Report</h5>
<div className="d-flex flex-column gap-2"> <div className="d-flex flex-column gap-2">
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
@ -59,7 +68,10 @@ const ReportDPR = ({ project, date }) => {
</div> </div>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<span className="text-secondry"> Checking</span>{" "} <span className="text-secondry"> Checking</span>{" "}
<span className="text-secondry"> {data?.checkoutPending}</span>{" "} <span className="text-secondry">
{" "}
{data?.checkoutPending}
</span>{" "}
</div> </div>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<span className="text-secondry"> Total Employee</span>{" "} <span className="text-secondry"> Total Employee</span>{" "}
@ -71,16 +83,21 @@ const ReportDPR = ({ project, date }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="row px-3"> </div>
<div className="row px-5 pb-5">
<div className="col-4"> <div className="col-4">
<div className="reports-card"> <div className="reports-card h-100" style={{ minHeight: "250px" }}>
{/* {/* <!-- Row 1: Header */} {/* {/* <!-- Row 1: Header */}
<div> <div>
<h4 className="reports-card-title">Team Strength on Site</h4> <h4 className="reports-card-title">Team Strength on Site</h4>
</div> </div>
<table style={{ width: "100%" }}> <table style={{ width: "100%" }}>
<tbody> <tbody>
{data?.teamOnSite {data?.teamOnSite?.filter(
(item) => item?.numberofEmployees > 0
).length > 0 ? (
data?.teamOnSite
?.filter((item) => item?.numberofEmployees > 0) ?.filter((item) => item?.numberofEmployees > 0)
?.map((member, index) => ( ?.map((member, index) => (
<tr key={index}> <tr key={index}>
@ -92,14 +109,21 @@ const ReportDPR = ({ project, date }) => {
{member?.numberofEmployees} {member?.numberofEmployees}
</td> </td>
</tr> </tr>
))} ))
) : (
<tr>
<td colSpan="2" style={{ textAlign: "center" }}>
No Records Available
</td>
</tr>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div className="col-8"> <div className="col-8">
{/* {/* <!-- Activities */} {/* {/* <!-- Activities */}
<div className="reports-card"> <div className="reports-card h-100" style={{ minHeight: "250px" }}>
<h4 className="reports-card-title">Employee In-Out Report </h4> <h4 className="reports-card-title">Employee In-Out Report </h4>
<table className="reports-table"> <table className="reports-table">
<thead> <thead>
@ -111,7 +135,8 @@ const ReportDPR = ({ project, date }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{data?.performedAttendance?.map((att, index) => ( {data?.performedAttendance?.length > 0 ? (
data?.performedAttendance?.map((att, index) => (
<tr key={att.index + att.name}> <tr key={att.index + att.name}>
<td>{att.name}</td> <td>{att.name}</td>
<td>{att.roleName}</td> <td>{att.roleName}</td>
@ -122,7 +147,22 @@ const ReportDPR = ({ project, date }) => {
: "--"} : "--"}
</td> </td>
</tr> </tr>
))} ))
) : (
<tr>
<td
colSpan="4"
className="text-center py-4 border-0"
style={{ height: "200px" }}
>
{isLoading ? (
<SpinnerLoader />
) : (
<div className="py-8">No Records Available</div>
)}
</td>
</tr>
)}
</tbody> </tbody>
</table> </table>
</div> </div>