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>
); );
}; };

188
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,94 +13,117 @@ 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">
<ReportsDonutCard <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
title={"TODAY'S ATTENDANCE"} {" "}
total={data?.totalEmployees} <ReportsDonutCard
value={data?.todaysAttendances} title={"TODAY'S ATTENDANCE"}
legend1="Today's Attendance" total={data?.totalEmployees}
legend2="Total Employees" value={data?.todaysAttendances}
/> legend1="Today's Attendance"
<ReportsDonutCard legend2="Total Employees"
title={"DAILY TASKS COMPLETED"} />
total={data?.totalCompletedTask} </div>
value={data?.totalPlannedWork} <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
chartColor={"blue"} {" "}
footer="" <ReportsDonutCard
legend1="Completed Work" title={"DAILY TASKS COMPLETED"}
legend2="Planned Work" total={data?.totalCompletedTask}
/> value={data?.totalPlannedWork}
chartColor={"blue"}
<ReportsDonutCard footer=""
title={"PROJECT COMPLETION STATUS"} legend1="Completed Work"
total={data?.totalPlannedWork} legend2="Planned Work"
value={data?.totalCompletedWork} />
chartColor={"green"} </div>
footer="" <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
legend1="Completed Work" {" "}
legend2="Planned Work" <ReportsDonutCard
/> title={"PROJECT COMPLETION STATUS"}
total={data?.totalPlannedWork}
<div className="border-top card border-warning py-4 px-2"> value={data?.totalCompletedWork}
<h5 className="reports-card-title">Attendance Pending Report</h5> chartColor={"green"}
<div className="d-flex flex-column gap-2"> footer=""
<div className="d-flex justify-content-between"> legend1="Completed Work"
<span className="text-secondry"> Regualrization</span>{" "} legend2="Planned Work"
<span className="text-secondry"> />
{" "} </div>
{data?.regularizationPending} <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
</span>{" "} <div className="border-top card border-warning py-4 px-2 h-100">
</div> <h5 className="reports-card-title">Attendance Pending Report</h5>
<div className="d-flex justify-content-between"> <div className="d-flex flex-column gap-2">
<span className="text-secondry"> Checking</span>{" "} <div className="d-flex justify-content-between">
<span className="text-secondry"> {data?.checkoutPending}</span>{" "} <span className="text-secondry"> Regualrization</span>{" "}
</div> <span className="text-secondry">
<div className="d-flex justify-content-between"> {" "}
<span className="text-secondry"> Total Employee</span>{" "} {data?.regularizationPending}
<span className="text-secondry"> </span>{" "}
{" "} </div>
{data?.todaysAttendances} <div className="d-flex justify-content-between">
</span>{" "} <span className="text-secondry"> Checking</span>{" "}
<span className="text-secondry">
{" "}
{data?.checkoutPending}
</span>{" "}
</div>
<div className="d-flex justify-content-between">
<span className="text-secondry"> Total Employee</span>{" "}
<span className="text-secondry">
{" "}
{data?.todaysAttendances}
</span>{" "}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="row px-3"> <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(
?.filter((item) => item?.numberofEmployees > 0) (item) => item?.numberofEmployees > 0
?.map((member, index) => ( ).length > 0 ? (
<tr key={index}> data?.teamOnSite
<td style={{ textAlign: "left" }}>
{member?.roleName}
</td>
<td style={{ textAlign: "right" }}> ?.filter((item) => item?.numberofEmployees > 0)
{member?.numberofEmployees} ?.map((member, index) => (
</td> <tr key={index}>
</tr> <td style={{ textAlign: "left" }}>
))} {member?.roleName}
</td>
<td style={{ textAlign: "right" }}>
{member?.numberofEmployees}
</td>
</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,18 +135,34 @@ const ReportDPR = ({ project, date }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{data?.performedAttendance?.map((att, index) => ( {data?.performedAttendance?.length > 0 ? (
<tr key={att.index + att.name}> data?.performedAttendance?.map((att, index) => (
<td>{att.name}</td> <tr key={att.index + att.name}>
<td>{att.roleName}</td> <td>{att.name}</td>
<td>{formatUTCToLocalTime(att.inTime, true)}</td> <td>{att.roleName}</td>
<td> <td>{formatUTCToLocalTime(att.inTime, true)}</td>
{att.outTime <td>
? formatUTCToLocalTime(att.outTime, true) {att.outTime
: "--"} ? formatUTCToLocalTime(att.outTime, true)
: "--"}
</td>
</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> </td>
</tr> </tr>
))} )}
</tbody> </tbody>
</table> </table>
</div> </div>