format DPR page
This commit is contained in:
parent
a477090cb8
commit
7143af1e1e
@ -8,7 +8,7 @@ const Progress = ({
|
||||
total = 0,
|
||||
height = 100,
|
||||
width = 100,
|
||||
completed =0,
|
||||
completed = 0,
|
||||
}) => {
|
||||
const options = {
|
||||
chart: {
|
||||
@ -24,16 +24,19 @@ const Progress = ({
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: "13px",
|
||||
width:"12px",
|
||||
textWrap:"wrap",
|
||||
width: "12px",
|
||||
textWrap: "wrap",
|
||||
color: color,
|
||||
fontWeight: 400,
|
||||
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;
|
||||
|
||||
|
||||
// const Progress = ({
|
||||
// completed = 0,
|
||||
// inProgress = 0,
|
||||
|
||||
@ -10,10 +10,10 @@ const ReportsDonutCard = ({
|
||||
footer = "Team members present on the site",
|
||||
chartColor,
|
||||
legend1 = "Completed",
|
||||
legend2 = "Pending"
|
||||
legend2 = "Pending",
|
||||
}) => {
|
||||
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>
|
||||
|
||||
<div className="d-flex justify-content-center align-items-center flex-column">
|
||||
@ -26,10 +26,7 @@ const ReportsDonutCard = ({
|
||||
completed={value}
|
||||
total={total}
|
||||
/>
|
||||
<ReportsLegend
|
||||
legend1={legend1}
|
||||
legend2={legend2}
|
||||
/>
|
||||
<ReportsLegend legend1={legend1} legend2={legend2} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -56,7 +53,6 @@ export const ReportsCard = ({
|
||||
|
||||
<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">
|
||||
|
||||
<ReportsLegend />
|
||||
</div>
|
||||
</div>
|
||||
@ -67,5 +63,3 @@ export const ReportsCard = ({
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import Progress from "./Progress";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const ReportDPR = ({ project, date }) => {
|
||||
const { data, isLoading, isError, error } = useProjectReportByProject(
|
||||
@ -12,94 +13,117 @@ const ReportDPR = ({ project, date }) => {
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="card py-2">
|
||||
<div className="card py-2 mb-5">
|
||||
<div className="d-flex text-start px-2 mt-2">
|
||||
Project Status Reported - Generated at{" "}
|
||||
{formatUTCToLocalTime(data?.date, true)}
|
||||
</div>
|
||||
|
||||
{/* <!-- Status Cards */}
|
||||
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-4">
|
||||
<ReportsDonutCard
|
||||
title={"TODAY'S ATTENDANCE"}
|
||||
total={data?.totalEmployees}
|
||||
value={data?.todaysAttendances}
|
||||
legend1="Today's Attendance"
|
||||
legend2="Total Employees"
|
||||
/>
|
||||
<ReportsDonutCard
|
||||
title={"DAILY TASKS COMPLETED"}
|
||||
total={data?.totalCompletedTask}
|
||||
value={data?.totalPlannedWork}
|
||||
chartColor={"blue"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
|
||||
<ReportsDonutCard
|
||||
title={"PROJECT COMPLETION STATUS"}
|
||||
total={data?.totalPlannedWork}
|
||||
value={data?.totalCompletedWork}
|
||||
chartColor={"green"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
|
||||
<div className="border-top card border-warning py-4 px-2">
|
||||
<h5 className="reports-card-title">Attendance Pending Report</h5>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="text-secondry"> Regualrization</span>{" "}
|
||||
<span className="text-secondry">
|
||||
{" "}
|
||||
{data?.regularizationPending}
|
||||
</span>{" "}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<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 className="row px-5 py-4">
|
||||
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
|
||||
{" "}
|
||||
<ReportsDonutCard
|
||||
title={"TODAY'S ATTENDANCE"}
|
||||
total={data?.totalEmployees}
|
||||
value={data?.todaysAttendances}
|
||||
legend1="Today's Attendance"
|
||||
legend2="Total Employees"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
|
||||
{" "}
|
||||
<ReportsDonutCard
|
||||
title={"DAILY TASKS COMPLETED"}
|
||||
total={data?.totalCompletedTask}
|
||||
value={data?.totalPlannedWork}
|
||||
chartColor={"blue"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
|
||||
{" "}
|
||||
<ReportsDonutCard
|
||||
title={"PROJECT COMPLETION STATUS"}
|
||||
total={data?.totalPlannedWork}
|
||||
value={data?.totalCompletedWork}
|
||||
chartColor={"green"}
|
||||
footer=""
|
||||
legend1="Completed Work"
|
||||
legend2="Planned Work"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="text-secondry"> Regualrization</span>{" "}
|
||||
<span className="text-secondry">
|
||||
{" "}
|
||||
{data?.regularizationPending}
|
||||
</span>{" "}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<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 className="row px-3">
|
||||
<div className="row px-5 pb-5">
|
||||
<div className="col-4">
|
||||
<div className="reports-card">
|
||||
<div className="reports-card h-100" style={{ minHeight: "250px" }}>
|
||||
{/* {/* <!-- Row 1: Header */}
|
||||
<div>
|
||||
<h4 className="reports-card-title">Team Strength on Site</h4>
|
||||
</div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
{data?.teamOnSite
|
||||
?.filter((item) => item?.numberofEmployees > 0)
|
||||
?.map((member, index) => (
|
||||
<tr key={index}>
|
||||
<td style={{ textAlign: "left" }}>
|
||||
{member?.roleName}
|
||||
</td>
|
||||
{data?.teamOnSite?.filter(
|
||||
(item) => item?.numberofEmployees > 0
|
||||
).length > 0 ? (
|
||||
data?.teamOnSite
|
||||
|
||||
<td style={{ textAlign: "right" }}>
|
||||
{member?.numberofEmployees}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
?.filter((item) => item?.numberofEmployees > 0)
|
||||
?.map((member, index) => (
|
||||
<tr key={index}>
|
||||
<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>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-8">
|
||||
{/* {/* <!-- Activities */}
|
||||
<div className="reports-card">
|
||||
<div className="reports-card h-100" style={{ minHeight: "250px" }}>
|
||||
<h4 className="reports-card-title">Employee In-Out Report </h4>
|
||||
<table className="reports-table">
|
||||
<thead>
|
||||
@ -111,18 +135,34 @@ const ReportDPR = ({ project, date }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data?.performedAttendance?.map((att, index) => (
|
||||
<tr key={att.index + att.name}>
|
||||
<td>{att.name}</td>
|
||||
<td>{att.roleName}</td>
|
||||
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
|
||||
<td>
|
||||
{att.outTime
|
||||
? formatUTCToLocalTime(att.outTime, true)
|
||||
: "--"}
|
||||
{data?.performedAttendance?.length > 0 ? (
|
||||
data?.performedAttendance?.map((att, index) => (
|
||||
<tr key={att.index + att.name}>
|
||||
<td>{att.name}</td>
|
||||
<td>{att.roleName}</td>
|
||||
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
|
||||
<td>
|
||||
{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>
|
||||
</tr>
|
||||
))}
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user