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 = ({
|
const DatePicker = ({
|
||||||
name,
|
name,
|
||||||
|
defaultDate,
|
||||||
control,
|
control,
|
||||||
placeholder = "DD-MM-YYYY",
|
placeholder = "DD-MM-YYYY",
|
||||||
className = "",
|
className = "",
|
||||||
|
|||||||
@ -1,52 +1,114 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Chart from "react-apexcharts";
|
import Chart from "react-apexcharts";
|
||||||
|
import { formatFigure } from "../../utils/appUtils";
|
||||||
|
|
||||||
const Progress = ({
|
const Progress = ({
|
||||||
color = "#00aaff",
|
color = "#00aaff",
|
||||||
series = 40,
|
series = 0,
|
||||||
progress_variant = "success",
|
total = 0,
|
||||||
height = 130,
|
height = 100,
|
||||||
|
width = 100,
|
||||||
|
completed =0,
|
||||||
}) => {
|
}) => {
|
||||||
const options = {
|
const options = {
|
||||||
chart: {
|
chart: {
|
||||||
type: "radialBar",
|
type: "radialBar",
|
||||||
},
|
},
|
||||||
colors: [color],
|
colors: [color],
|
||||||
|
|
||||||
plotOptions: {
|
plotOptions: {
|
||||||
radialBar: {
|
radialBar: {
|
||||||
hollow: {
|
hollow: { size: "55%" },
|
||||||
size: "55%",
|
track: { background: "#f1f1f1" },
|
||||||
},
|
|
||||||
track: {
|
|
||||||
background: "#f1f1f1",
|
|
||||||
},
|
|
||||||
|
|
||||||
dataLabels: {
|
dataLabels: {
|
||||||
name: { show: false },
|
name: { show: false },
|
||||||
value: {
|
value: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "18px",
|
fontSize: "13px",
|
||||||
|
color: color,
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
offsetY: 7,
|
offsetY: 7,
|
||||||
offsetY:7,
|
formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`,
|
||||||
formatter: () => `${series}%`,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
stroke: { lineCap: "round" },
|
stroke: { lineCap: "round" },
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Chart
|
<div style={{ width: "fit-content" }}>
|
||||||
options={options}
|
<Chart
|
||||||
series={[Number(series)]}
|
options={options}
|
||||||
type="radialBar"
|
series={[Number(series)]}
|
||||||
height={height}
|
type="radialBar"
|
||||||
/>
|
height={height}
|
||||||
|
width={width}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Progress;
|
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";
|
import ReportsLegend from "./ReportsLegend";
|
||||||
|
|
||||||
const ReportsDonutCard = ({
|
const ReportsDonutCard = ({
|
||||||
title,
|
title,
|
||||||
percentage,
|
|
||||||
value,
|
value,
|
||||||
|
total,
|
||||||
donutClass = "",
|
donutClass = "",
|
||||||
footer = "Team members present on the site"
|
footer = "Team members present on the site",
|
||||||
|
chartColor,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="reports-card">
|
<div className="border-top card border-primary py-4 px-2">
|
||||||
<h4 className="reports-card-title">{title}</h4>
|
<h4 className="reports-card-title">{title}</h4>
|
||||||
|
|
||||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
<div className="d-flex justify-content-center align-items-center flex-column">
|
||||||
<div
|
<div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
|
||||||
style={{
|
<Progress
|
||||||
width: "50%",
|
color={chartColor}
|
||||||
display: "flex",
|
width={120}
|
||||||
justifyContent: "center",
|
height={120}
|
||||||
alignItems: "center"
|
series={getCompletionPercentage(value, total)}
|
||||||
}}
|
completed={value}
|
||||||
>
|
total={total}
|
||||||
<div
|
/>
|
||||||
className={`reports-donut thin ${donutClass}`}
|
<ReportsLegend />
|
||||||
style={{ percentage: percentage }}
|
|
||||||
>
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ReportsLegend />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ padding: "10px", textAlign: "center" }}>
|
<div className="text-center p-2">
|
||||||
<p className="text-muted">{footer}</p>
|
<p className="text-muted mb-0">{footer}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ReportsDonutCard;
|
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 = () => {
|
const ReportsLegend = () => {
|
||||||
return (
|
return (
|
||||||
<div className="reports-legend" style={{ width: "50%", padding: "15px" }}>
|
<div className=" d-inline-flex flex-column text-start gap-2 pe-5">
|
||||||
<div className="reports-legend-item">
|
<div className=" d-flex align-items-center gap-2">
|
||||||
<span className="reports-legend-color reports-legend-green" />
|
<span className="reports-legend-color reports-legend-green"></span>
|
||||||
Completed
|
<span>Completed</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="reports-legend-item">
|
<div className=" d-flex align-items-center gap-2">
|
||||||
<span className="reports-legend-color reports-legend-blue" />
|
<span className="reports-legend-color reports-legend-blue"></span>
|
||||||
In Progress
|
<span>In Progress</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="reports-legend-item">
|
<div className=" d-flex align-items-center gap-2">
|
||||||
<span className="reports-legend-color reports-legend-gray" />
|
<span className="reports-legend-color reports-legend-gray"></span>
|
||||||
Pending
|
<span>Pending</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2,794 +2,69 @@ import React from "react";
|
|||||||
import { useProjectReportByProject } from "../../hooks/useReports";
|
import { useProjectReportByProject } from "../../hooks/useReports";
|
||||||
import Progress from "./Progress";
|
import Progress from "./Progress";
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import { localToUtc } from "../../utils/appUtils";
|
||||||
|
import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
|
||||||
|
|
||||||
const ReportDPR = ({ project, day }) => {
|
const ReportDPR = ({ project, date }) => {
|
||||||
const { data, isLoading, isError, error } =
|
const { data, isLoading, isError, error } = useProjectReportByProject(
|
||||||
useProjectReportByProject(project);
|
project,
|
||||||
console.log(data);
|
localToUtc(date)
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{" "}
|
|
||||||
<div className="card">
|
<div className="card">
|
||||||
{/* <div class="reports-container"> */}
|
<div className="d-flex text-start px-2 mt-2">
|
||||||
{/* <!-- 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">
|
|
||||||
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 class="reports-status-cards">
|
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-2">
|
||||||
<div class="reports-card">
|
<ReportsDonutCard
|
||||||
<h4 class="reports-card-title">TODAY'S ATTENDANCE</h4>
|
title={"TODAY'S ATTENDANCE"}
|
||||||
<div style={{ display: "flex", flexwrap: "wrap" }}>
|
total={data?.totalEmployees}
|
||||||
{/* <!-- Left Column */}
|
value={data?.todaysAttendances}
|
||||||
<div
|
/>
|
||||||
style={{
|
<ReportsDonutCard
|
||||||
width: "50%",
|
title={"DAILY TASKS COMPLETED"}
|
||||||
boxSizing: "bordtarter-box",
|
total={data?.totalCompletedTask}
|
||||||
display: "flex",
|
value={data?.totalPlannedWork}
|
||||||
justifyContent: "center",
|
chartColor={"blue"}
|
||||||
alignItems: "center",
|
/>
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <!-- Medium */}
|
|
||||||
<div class="reports-donut thin" style={{ percentage: 90 }}>
|
|
||||||
<span>20 / 30</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* <!-- Right Column */}
|
<ReportsDonutCard
|
||||||
<div
|
title={"PROJECT COMPLETION STATUS"}
|
||||||
class="reports-legend"
|
total={data?.totalPlannedWork}
|
||||||
style={{
|
value={data?.totalCompletedWork}
|
||||||
width: "50%",
|
chartColor={"green"}
|
||||||
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 class="card px-3 border-top border-warning">
|
||||||
<h4 class="reports-card-title">DAILY TASKS COMPLETED</h4>
|
<h4 class="reports-card-title">Attendance Pending Report</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>
|
|
||||||
<p>Team member present</p>
|
<p>Team member present</p>
|
||||||
<div class="reports-legend">
|
<div className="d-flex flex-column gap-2">
|
||||||
<div class="reports-legend-item">
|
<div className="d-flex justify-content-between">
|
||||||
<span class="reports-legend-color reports-legend-blue"></span>{" "}
|
<span className="text-secondry"> Regualrization</span>{" "}
|
||||||
Completed
|
<span className="text-secondry">
|
||||||
|
{" "}
|
||||||
|
{data?.regularizationPending}
|
||||||
|
</span>{" "}
|
||||||
</div>
|
</div>
|
||||||
<div class="reports-legend-item">
|
<div className="d-flex justify-content-between">
|
||||||
<span class="reports-legend-color reports-legend-green"></span>{" "}
|
<span className="text-secondry"> Checking</span>{" "}
|
||||||
In Progress
|
<span className="text-secondry"> {data?.checkoutPending}</span>{" "}
|
||||||
</div>
|
</div>
|
||||||
<div class="reports-legend-item">
|
<div className="d-flex justify-content-between">
|
||||||
<span class="reports-legend-color reports-legend-gray"></span>{" "}
|
<span className="text-secondry"> Total Employee</span>{" "}
|
||||||
Pending
|
<span className="text-secondry">
|
||||||
|
{" "}
|
||||||
|
{data?.totalEmployees - data?.todaysAttendances}
|
||||||
|
</span>{" "}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="reports-card">
|
<div className="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">
|
|
||||||
{/* {/* <!-- Row 1: Header */}
|
{/* {/* <!-- Row 1: Header */}
|
||||||
<div>
|
<div>
|
||||||
<h4 class="reports-card-title">Team Strength on Site</h4>
|
<h4 class="reports-card-title">Team Strength on Site</h4>
|
||||||
@ -811,9 +86,9 @@ const ReportDPR = ({ project, day }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* {/* <!-- Activities */}
|
{/* {/* <!-- Activities */}
|
||||||
<div class="reports-activities">
|
<div className="reports-activities">
|
||||||
<h2>Activities (Tasks) Performed 17-Sep-2025</h2>
|
<h2>Activities (Tasks) Performed 17-Sep-2025</h2>
|
||||||
<table class="reports-table">
|
<table className="reports-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>NAME</th>
|
<th>NAME</th>
|
||||||
@ -823,24 +98,18 @@ const ReportDPR = ({ project, day }) => {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
{data?.performedAttendance?.map((att) => (
|
||||||
<td>Siddharth Barde</td>
|
<tr>
|
||||||
<td>Site Engineer</td>
|
<td>{att.name}</td>
|
||||||
<td>17-Sep-2025 11:47 AM</td>
|
<td>{att.roleName}</td>
|
||||||
<td>-</td>
|
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
|
||||||
</tr>
|
<td>
|
||||||
<tr>
|
{att.outTime
|
||||||
<td>Siddharth Barde</td>
|
? formatUTCToLocalTime(att.outTime, true)
|
||||||
<td>Site Engineer</td>
|
: "--"}
|
||||||
<td>17-Sep-2025 11:47 AM</td>
|
</td>
|
||||||
<td>-</td>
|
</tr>
|
||||||
</tr>
|
))}
|
||||||
<tr>
|
|
||||||
<td>Siddharth Barde</td>
|
|
||||||
<td>Site Engineer</td>
|
|
||||||
<td>17-Sep-2025 11:47 AM</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,14 +1,16 @@
|
|||||||
import { useQuery } from "@tanstack/react-query"
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { ReportsRepository } from "../repositories/GlobalRepository"
|
import { ReportsRepository } from "../repositories/GlobalRepository";
|
||||||
|
|
||||||
|
export const useProjectReportByProject = (projectId, date) => {
|
||||||
export const useProjectReportByProject = (projectId)=>{
|
return useQuery({
|
||||||
return useQuery({
|
queryKey: ["daily_report", projectId, date],
|
||||||
queryKey:["daily_report",projectId],
|
queryFn: async () => {
|
||||||
queryFn:async()=>{
|
const resp = await ReportsRepository.getDailyProgressByProject(
|
||||||
const resp = await ReportsRepository.getDailyProgressByProject(projectId);
|
projectId,
|
||||||
return resp.data;
|
date
|
||||||
},
|
);
|
||||||
enabled:!!projectId
|
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 { ComingSoonPage } from "../Misc/ComingSoonPage";
|
||||||
import ReportDPR from "../../components/reports/report-dpr";
|
import ReportDPR from "../../components/reports/report-dpr";
|
||||||
import "./Reports.css";
|
import "./Reports.css";
|
||||||
@ -8,15 +8,23 @@ import DatePicker from "../../components/common/DatePicker";
|
|||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
const Reports = () => {
|
const Reports = () => {
|
||||||
const [selectedProject, setSelectedProject] = useState("");
|
const [selectedProject, setSelectedProject] = useState();
|
||||||
const { projectNames, isError, loading } = useProjectName(true);
|
const { projectNames, isError, loading } = useProjectName(true);
|
||||||
|
const yesterday = new Date();
|
||||||
|
yesterday.setDate(yesterday.getDate() - 1);
|
||||||
const { control, watch } = useForm({
|
const { control, watch } = useForm({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
startDate: "",
|
startDate: yesterday.toISOString().split("T")[0],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const selelectedDate = watch("startDate");
|
const selelectedDate = watch("startDate");
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(!selectedProject && projectNames){
|
||||||
|
setSelectedProject(projectNames[0]?.id)
|
||||||
|
}
|
||||||
|
},[projectNames])
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
@ -53,7 +61,7 @@ const Reports = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ReportDPR project={selectedProject} day={selelectedDate} />
|
<ReportDPR project={selectedProject} date={selelectedDate} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -97,6 +97,6 @@ const GlobalRepository = {
|
|||||||
export default GlobalRepository;
|
export default GlobalRepository;
|
||||||
|
|
||||||
export const ReportsRepository = {
|
export const ReportsRepository = {
|
||||||
getDailyProgressByProject: (projectId) =>
|
getDailyProgressByProject: (projectId,date) =>
|
||||||
api.get(`/api/Market/get/project/report/${projectId}`),
|
api.get(`/api/Market/get/project/report/${projectId}?date=${date}`),
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user