added report data by project and date wise
This commit is contained in:
parent
37212e489e
commit
1157643916
@ -3,6 +3,7 @@ import { useController } from "react-hook-form";
|
||||
|
||||
const DatePicker = ({
|
||||
name,
|
||||
defaultDate,
|
||||
control,
|
||||
placeholder = "DD-MM-YYYY",
|
||||
className = "",
|
||||
|
||||
@ -1,52 +1,114 @@
|
||||
import React from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
|
||||
const Progress = ({
|
||||
color = "#00aaff",
|
||||
series = 40,
|
||||
progress_variant = "success",
|
||||
height = 130,
|
||||
series = 0,
|
||||
total = 0,
|
||||
height = 100,
|
||||
width = 100,
|
||||
completed =0,
|
||||
}) => {
|
||||
const options = {
|
||||
chart: {
|
||||
type: "radialBar",
|
||||
},
|
||||
colors: [color],
|
||||
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: "55%",
|
||||
},
|
||||
track: {
|
||||
background: "#f1f1f1",
|
||||
},
|
||||
|
||||
hollow: { size: "55%" },
|
||||
track: { background: "#f1f1f1" },
|
||||
dataLabels: {
|
||||
name: { show: false },
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: "18px",
|
||||
fontSize: "13px",
|
||||
color: color,
|
||||
fontWeight: 600,
|
||||
offsetY: 7,
|
||||
offsetY:7,
|
||||
formatter: () => `${series}%`,
|
||||
formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
stroke: { lineCap: "round" },
|
||||
};
|
||||
|
||||
return (
|
||||
<Chart
|
||||
options={options}
|
||||
series={[Number(series)]}
|
||||
type="radialBar"
|
||||
height={height}
|
||||
/>
|
||||
<div style={{ width: "fit-content" }}>
|
||||
<Chart
|
||||
options={options}
|
||||
series={[Number(series)]}
|
||||
type="radialBar"
|
||||
height={height}
|
||||
width={width}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Progress;
|
||||
|
||||
|
||||
// const Progress = ({
|
||||
// completed = 0,
|
||||
// inProgress = 0,
|
||||
// total = 100,
|
||||
// height = 140,
|
||||
// width = 140,
|
||||
// }) => {
|
||||
// const completedPercent =
|
||||
// total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||
|
||||
// const progressPercent =
|
||||
// total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||
|
||||
// const options = {
|
||||
// chart: {
|
||||
// type: "radialBar",
|
||||
// },
|
||||
|
||||
// colors: ["#28a745", "#0d6efd"],
|
||||
|
||||
// plotOptions: {
|
||||
// radialBar: {
|
||||
// hollow: {
|
||||
// size: "35%",
|
||||
// },
|
||||
|
||||
// track: {
|
||||
// margin: 4,
|
||||
// },
|
||||
|
||||
// dataLabels: {
|
||||
// name: { show: false },
|
||||
|
||||
// value: {
|
||||
// show: true,
|
||||
// fontSize: "14px",
|
||||
// fontWeight: 600,
|
||||
// offsetY: 5,
|
||||
// formatter: () => `${completed + inProgress}/${total}`,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// labels: ["Completed", "In Progress"],
|
||||
// stroke: {
|
||||
// lineCap: "round",
|
||||
// },
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div style={{ width: "fit-content" }}>
|
||||
// <Chart
|
||||
// options={options}
|
||||
// series={[completedPercent, progressPercent]}
|
||||
// type="radialBar"
|
||||
// height={height}
|
||||
// width={width}
|
||||
// />
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
@ -1,41 +1,66 @@
|
||||
import { getCompletionPercentage } from "../../utils/dateUtils";
|
||||
import Progress from "./Progress";
|
||||
import ReportsLegend from "./ReportsLegend";
|
||||
|
||||
const ReportsDonutCard = ({
|
||||
title,
|
||||
percentage,
|
||||
value,
|
||||
total,
|
||||
donutClass = "",
|
||||
footer = "Team members present on the site"
|
||||
footer = "Team members present on the site",
|
||||
chartColor,
|
||||
}) => {
|
||||
return (
|
||||
<div className="reports-card">
|
||||
<div className="border-top card border-primary py-4 px-2">
|
||||
<h4 className="reports-card-title">{title}</h4>
|
||||
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`reports-donut thin ${donutClass}`}
|
||||
style={{ percentage: percentage }}
|
||||
>
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
<div className="d-flex justify-content-center align-items-center flex-column">
|
||||
<div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
|
||||
<Progress
|
||||
color={chartColor}
|
||||
width={120}
|
||||
height={120}
|
||||
series={getCompletionPercentage(value, total)}
|
||||
completed={value}
|
||||
total={total}
|
||||
/>
|
||||
<ReportsLegend />
|
||||
</div>
|
||||
|
||||
<ReportsLegend />
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
||||
<p className="text-muted">{footer}</p>
|
||||
<div className="text-center p-2">
|
||||
<p className="text-muted mb-0">{footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportsDonutCard;
|
||||
|
||||
export const ReportsCard = ({
|
||||
title,
|
||||
value,
|
||||
total,
|
||||
donutClass = "",
|
||||
footer = "Team members present on the site",
|
||||
chartColor,
|
||||
}) => {
|
||||
return (
|
||||
<div className="border-top card border-primary py-4 px-2">
|
||||
<h4 className="reports-card-title">{title}</h4>
|
||||
|
||||
<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>
|
||||
|
||||
<div className="text-center p-2">
|
||||
<p className="text-muted mb-0">{footer}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
const ReportsLegend = () => {
|
||||
return (
|
||||
<div className="reports-legend" style={{ width: "50%", padding: "15px" }}>
|
||||
<div className="reports-legend-item">
|
||||
<span className="reports-legend-color reports-legend-green" />
|
||||
Completed
|
||||
<div className=" d-inline-flex flex-column text-start gap-2 pe-5">
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-green"></span>
|
||||
<span>Completed</span>
|
||||
</div>
|
||||
|
||||
<div className="reports-legend-item">
|
||||
<span className="reports-legend-color reports-legend-blue" />
|
||||
In Progress
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-blue"></span>
|
||||
<span>In Progress</span>
|
||||
</div>
|
||||
|
||||
<div className="reports-legend-item">
|
||||
<span className="reports-legend-color reports-legend-gray" />
|
||||
Pending
|
||||
<div className=" d-flex align-items-center gap-2">
|
||||
<span className="reports-legend-color reports-legend-gray"></span>
|
||||
<span>Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,794 +2,69 @@ import React from "react";
|
||||
import { useProjectReportByProject } from "../../hooks/useReports";
|
||||
import Progress from "./Progress";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
|
||||
|
||||
const ReportDPR = ({ project, day }) => {
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectReportByProject(project);
|
||||
console.log(data);
|
||||
const ReportDPR = ({ project, date }) => {
|
||||
const { data, isLoading, isError, error } = useProjectReportByProject(
|
||||
project,
|
||||
localToUtc(date)
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
<div className="card">
|
||||
{/* <div class="reports-container"> */}
|
||||
{/* <!-- Header */}
|
||||
{/* <div class="reports-header">
|
||||
<div class="d-flex flex-wrap align-items-start reports-project-info">
|
||||
<strong>Project:</strong>
|
||||
<select class="form-select" aria-label="Default select example">
|
||||
<option selected>Select Project</option>
|
||||
<option value="1">ANP ultimas wakad</option>
|
||||
<option value="2">Raja Bahadur</option>
|
||||
<option value="3">Godrej</option>
|
||||
</select>
|
||||
<br />
|
||||
<strong>Date:</strong> 17 September 2025
|
||||
<div class="col-md-6 col-12 mb-6">
|
||||
<label for="flatpickr-date" class="form-label">
|
||||
Date Picker
|
||||
</label>
|
||||
<div class="flatpickr-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control flatpickr-input active"
|
||||
placeholder="YYYY-MM-DD"
|
||||
id="flatpickr-date"
|
||||
readonly="readonly"
|
||||
/>
|
||||
<div
|
||||
class="flatpickr-calendar animate static arrowTop arrowLeft"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="flatpickr-months">
|
||||
<span class="flatpickr-prev-month">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 17 17"
|
||||
>
|
||||
<g></g>
|
||||
<path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="flatpickr-month">
|
||||
<div class="flatpickr-current-month">
|
||||
<span class="cur-month">November </span>
|
||||
<div class="numInputWrapper">
|
||||
<input
|
||||
class="numInput cur-year"
|
||||
type="number"
|
||||
tabindex="-1"
|
||||
aria-label="Year"
|
||||
/>
|
||||
<span class="arrowUp"></span>
|
||||
<span class="arrowDown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="flatpickr-next-month">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 17 17"
|
||||
>
|
||||
<g></g>
|
||||
<path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flatpickr-innerContainer">
|
||||
<div class="flatpickr-rContainer">
|
||||
<div class="flatpickr-weekdays">
|
||||
<div class="flatpickr-weekdaycontainer">
|
||||
<span class="flatpickr-weekday">Sun</span>
|
||||
<span class="flatpickr-weekday">Mon</span>
|
||||
<span class="flatpickr-weekday">Tue</span>
|
||||
<span class="flatpickr-weekday">Wed</span>
|
||||
<span class="flatpickr-weekday">Thu</span>
|
||||
<span class="flatpickr-weekday">Fri</span>
|
||||
<span class="flatpickr-weekday">Sat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flatpickr-days" tabindex="-1">
|
||||
<div class="dayContainer">
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 26, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
26
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 27, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
27
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 28, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
28
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 29, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
29
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 30, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
30
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day prevMonthDay"
|
||||
aria-label="October 31, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
31
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 1, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 2, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 3, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 4, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 5, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 6, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 7, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
7
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 8, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 9, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
9
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 10, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day today"
|
||||
aria-label="November 11, 2025"
|
||||
aria-current="date"
|
||||
tabindex="-1"
|
||||
>
|
||||
11
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 12, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
12
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 13, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
13
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 14, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
14
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 15, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
15
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 16, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
16
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 17, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
17
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 18, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
18
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 19, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
19
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 20, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
20
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 21, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
21
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 22, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 23, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
23
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 24, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
24
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 25, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
25
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 26, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
26
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 27, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
27
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 28, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
28
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 29, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
29
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day"
|
||||
aria-label="November 30, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
30
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 1, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 2, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 3, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 4, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 5, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
<span
|
||||
class="flatpickr-day nextMonthDay"
|
||||
aria-label="December 6, 2025"
|
||||
tabindex="-1"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* <!-- Status Note */}
|
||||
{/* <div class="reports-status-note">
|
||||
* Project Status Reported - Generated at 18-Sep-2025 03:30:03 UTC
|
||||
</div> */}
|
||||
<div className="d-flex text-start px-6 mt-2">
|
||||
<div className="d-flex text-start px-2 mt-2">
|
||||
Project Status Reported - Generated at{" "}
|
||||
{formatUTCToLocalTime(data?.date, true)}
|
||||
</div>
|
||||
|
||||
{/* <!-- Status Cards */}
|
||||
<div class="reports-status-cards">
|
||||
<div class="reports-card">
|
||||
<h4 class="reports-card-title">TODAY'S ATTENDANCE</h4>
|
||||
<div style={{ display: "flex", flexwrap: "wrap" }}>
|
||||
{/* <!-- Left Column */}
|
||||
<div
|
||||
style={{
|
||||
width: "50%",
|
||||
boxSizing: "bordtarter-box",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* <!-- Medium */}
|
||||
<div class="reports-donut thin" style={{ percentage: 90 }}>
|
||||
<span>20 / 30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-2">
|
||||
<ReportsDonutCard
|
||||
title={"TODAY'S ATTENDANCE"}
|
||||
total={data?.totalEmployees}
|
||||
value={data?.todaysAttendances}
|
||||
/>
|
||||
<ReportsDonutCard
|
||||
title={"DAILY TASKS COMPLETED"}
|
||||
total={data?.totalCompletedTask}
|
||||
value={data?.totalPlannedWork}
|
||||
chartColor={"blue"}
|
||||
/>
|
||||
|
||||
{/* <!-- Right Column */}
|
||||
<div
|
||||
class="reports-legend"
|
||||
style={{
|
||||
width: "50%",
|
||||
padding: "15px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
||||
<p class="text-muted">Team members present on the site</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ReportsDonutCard
|
||||
title={"PROJECT COMPLETION STATUS"}
|
||||
total={data?.totalPlannedWork}
|
||||
value={data?.totalCompletedWork}
|
||||
chartColor={"green"}
|
||||
/>
|
||||
|
||||
<div class="reports-card">
|
||||
<h4 class="reports-card-title">DAILY TASKS COMPLETED</h4>
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
{/* <!-- Left Column */}
|
||||
<div
|
||||
style={{
|
||||
width: "50%",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
justify: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* <!-- Medium */}
|
||||
<div
|
||||
class="reports-donut thin reports-donut-primary"
|
||||
style={{ percentage: "66" }}
|
||||
>
|
||||
<span>20 / 30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <!-- Right Column */}
|
||||
<div
|
||||
class="reports-legend"
|
||||
style={{
|
||||
width: "50%",
|
||||
padding: "15px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
||||
<p class="text-muted">Team members present on the site</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-card">
|
||||
<h4 class="reports-card-title">DAILY TASKS COMPLETED</h4>
|
||||
<p class="reports-value reports-tasks">20 / 30</p>
|
||||
<div class="card px-3 border-top border-warning">
|
||||
<h4 class="reports-card-title">Attendance Pending Report</h4>
|
||||
<p>Team member present</p>
|
||||
<div class="reports-legend">
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
Completed
|
||||
<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 class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
In Progress
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="text-secondry"> Checking</span>{" "}
|
||||
<span className="text-secondry"> {data?.checkoutPending}</span>{" "}
|
||||
</div>
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="text-secondry"> Total Employee</span>{" "}
|
||||
<span className="text-secondry">
|
||||
{" "}
|
||||
{data?.totalEmployees - data?.todaysAttendances}
|
||||
</span>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reports-card">
|
||||
<h4 class="reports-card-title">PROJECT COMPLETION STATUS</h4>
|
||||
<p class=" reports-value reports-completion">20 / 30</p>
|
||||
<p>Team member present</p>
|
||||
<div class="reports-legend">
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reports-card">
|
||||
<h4 class="reports-card-title">Regularization Pending</h4>
|
||||
<p class="reports-value reports-tasks">28/32</p>
|
||||
<p class="text-muted">Regularization Pending</p>
|
||||
<div class="reports-legend">
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div class="reports-legend-item">
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reports-card">
|
||||
{/* {/* <!-- Row 1: Header */}
|
||||
<div>
|
||||
<h4 class="reports-card-title">Checkout Pending</h4>
|
||||
</div>
|
||||
|
||||
{/* {/* <!-- Row 2: Two Columns */}
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
{/* {/* <!-- Left Column */}
|
||||
<div
|
||||
style={{
|
||||
width: "50%",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
justify: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* {/* <!-- Medium */}
|
||||
<div
|
||||
class="reports-donut thin reports-donut-success"
|
||||
style={{ percentage: "73" }}
|
||||
>
|
||||
<span>73%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* {/* <!-- Right Column */}
|
||||
<div
|
||||
class="reports-legend"
|
||||
style={{
|
||||
width: "50%",
|
||||
padding: "15px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* {/* <!-- Row 3: Full Width */}
|
||||
<div>
|
||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
||||
<p class="text-muted">Team members present on the site</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-card">
|
||||
<div>
|
||||
<h4 class="reports-card-title">Activity Report Pending</h4>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
{/* {/* <!-- Left Column */}
|
||||
<div
|
||||
style={{
|
||||
width: "50%",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
justify: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* {/* <!-- Medium */}
|
||||
<div
|
||||
class="reports-donut thin reports-donut-warning"
|
||||
style={{ percentage: "0" }}
|
||||
>
|
||||
<span>0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* {/* <!-- Right Column */}
|
||||
<div
|
||||
class="reports-legend"
|
||||
style={{
|
||||
width: "50%",
|
||||
padding: "15px",
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
||||
Completed
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="reports-legend-item"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
textAlign: "left",
|
||||
display: "left",
|
||||
justify: "left",
|
||||
alignItems: "left!important",
|
||||
}}
|
||||
>
|
||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
||||
Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
||||
<p class="text-muted">Team members present on the site</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reports-card">
|
||||
<div className="reports-card">
|
||||
{/* {/* <!-- Row 1: Header */}
|
||||
<div>
|
||||
<h4 class="reports-card-title">Team Strength on Site</h4>
|
||||
@ -811,9 +86,9 @@ const ReportDPR = ({ project, day }) => {
|
||||
</div>
|
||||
|
||||
{/* {/* <!-- Activities */}
|
||||
<div class="reports-activities">
|
||||
<div className="reports-activities">
|
||||
<h2>Activities (Tasks) Performed 17-Sep-2025</h2>
|
||||
<table class="reports-table">
|
||||
<table className="reports-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>NAME</th>
|
||||
@ -823,24 +98,18 @@ const ReportDPR = ({ project, day }) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Siddharth Barde</td>
|
||||
<td>Site Engineer</td>
|
||||
<td>17-Sep-2025 11:47 AM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Siddharth Barde</td>
|
||||
<td>Site Engineer</td>
|
||||
<td>17-Sep-2025 11:47 AM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Siddharth Barde</td>
|
||||
<td>Site Engineer</td>
|
||||
<td>17-Sep-2025 11:47 AM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
{data?.performedAttendance?.map((att) => (
|
||||
<tr>
|
||||
<td>{att.name}</td>
|
||||
<td>{att.roleName}</td>
|
||||
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
|
||||
<td>
|
||||
{att.outTime
|
||||
? formatUTCToLocalTime(att.outTime, true)
|
||||
: "--"}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { ReportsRepository } from "../repositories/GlobalRepository"
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ReportsRepository } from "../repositories/GlobalRepository";
|
||||
|
||||
|
||||
export const useProjectReportByProject = (projectId)=>{
|
||||
return useQuery({
|
||||
queryKey:["daily_report",projectId],
|
||||
queryFn:async()=>{
|
||||
const resp = await ReportsRepository.getDailyProgressByProject(projectId);
|
||||
return resp.data;
|
||||
},
|
||||
enabled:!!projectId
|
||||
})
|
||||
}
|
||||
export const useProjectReportByProject = (projectId, date) => {
|
||||
return useQuery({
|
||||
queryKey: ["daily_report", projectId, date],
|
||||
queryFn: async () => {
|
||||
const resp = await ReportsRepository.getDailyProgressByProject(
|
||||
projectId,
|
||||
date
|
||||
);
|
||||
return resp.data;
|
||||
},
|
||||
enabled: !!projectId && !!date,
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||
import ReportDPR from "../../components/reports/report-dpr";
|
||||
import "./Reports.css";
|
||||
@ -8,15 +8,23 @@ import DatePicker from "../../components/common/DatePicker";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const Reports = () => {
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
const [selectedProject, setSelectedProject] = useState();
|
||||
const { projectNames, isError, loading } = useProjectName(true);
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const { control, watch } = useForm({
|
||||
defaultValues: {
|
||||
startDate: "",
|
||||
startDate: yesterday.toISOString().split("T")[0],
|
||||
},
|
||||
});
|
||||
const selelectedDate = watch("startDate");
|
||||
|
||||
|
||||
useEffect(()=>{
|
||||
if(!selectedProject && projectNames){
|
||||
setSelectedProject(projectNames[0]?.id)
|
||||
}
|
||||
},[projectNames])
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
@ -53,7 +61,7 @@ const Reports = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ReportDPR project={selectedProject} day={selelectedDate} />
|
||||
<ReportDPR project={selectedProject} date={selelectedDate} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -97,6 +97,6 @@ const GlobalRepository = {
|
||||
export default GlobalRepository;
|
||||
|
||||
export const ReportsRepository = {
|
||||
getDailyProgressByProject: (projectId) =>
|
||||
api.get(`/api/Market/get/project/report/${projectId}`),
|
||||
getDailyProgressByProject: (projectId,date) =>
|
||||
api.get(`/api/Market/get/project/report/${projectId}?date=${date}`),
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user