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

Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Feature_Directory

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-27 10:15:06 +05:30
commit ad145db3c7
28 changed files with 1282 additions and 974 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Activities/Attendance.jsx
View File

@ -10,6 +10,7 @@ import {ITEMS_PER_PAGE} from "../../utils/constants";
const Attendance = ({ attendance, getRole, handleModalData }) => { const Attendance = ({ attendance, getRole, handleModalData }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const [todayDate, setTodayDate] = useState(new Date());
// Ensure attendance is an array // Ensure attendance is an array
const attendanceList = Array.isArray(attendance) ? attendance : []; const attendanceList = Array.isArray(attendance) ? attendance : [];
@ -42,6 +43,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
<> <>
<table className="table "> <table className="table ">
<thead> <thead>
<tr className="border-top-0" style={{ textAlign: 'left' }}>
<td >
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
</td>
<td style={{ paddingLeft: '20px' }}>
</td>
</tr>
<tr> <tr>
<th className="border-top-0" colSpan={2}> <th className="border-top-0" colSpan={2}>
Name Name
@ -127,9 +135,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li <li
className={`page-item ${ className={`page-item ${currentPage === 1 ? "disabled" : ""
currentPage === 1 ? "disabled" : "" }`}
}`}
> >
<button <button
className="page-link btn-xs" className="page-link btn-xs"
@ -141,9 +148,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${ className={`page-item ${currentPage === index + 1 ? "active" : ""
currentPage === index + 1 ? "active" : "" }`}
}`}
> >
<button <button
className="page-link " className="page-link "
@ -154,9 +160,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""
currentPage === totalPages ? "disabled" : "" }`}
}`}
> >
<button <button
className="page-link " className="page-link "

311
src/components/Activities/AttendcesLogs.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState, useMemo, useCallback } from "react";
import moment from "moment"; import moment from "moment";
import Avatar from "../common/Avatar"; import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils"; import { convertShortTime } from "../../utils/dateUtils";
@ -7,20 +7,35 @@ import { useSelector, useDispatch } from "react-redux";
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
import DateRangePicker from "../common/DateRangePicker"; import DateRangePicker from "../common/DateRangePicker";
import { getCachedData } from "../../slices/apiDataManager"; import { getCachedData } from "../../slices/apiDataManager";
import usePagination from "../../hooks/usePagination";
import {ITEMS_PER_PAGE} from "../../utils/constants";
const AttendanceLog = ({ handleModalData, projectId }) => { const usePagination = (data, itemsPerPage) => {
const [attendances, setAttendnaces] = useState([]); const [currentPage, setCurrentPage] = useState(1);
const [selectedDate, setSelectedDate] = useState(""); const maxPage = Math.ceil(data.length / itemsPerPage);
const currentItems = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex);
}, [data, currentPage, itemsPerPage]);
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
const resetPage = useCallback(() => setCurrentPage(1), []);
return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
};
const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" }); const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data, loading, error } = useSelector((store) => store.attendanceLogs); const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(true); const [isRefreshing, setIsRefreshing] = useState(false);
const [dates, setDates] = useState([]); const [processedData, setProcessedData] = useState([]);
const today = new Date(); const today = new Date();
today.setHours(0, 0, 0, 0); // Strip time to compare dates only today.setHours(0, 0, 0, 0);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const isSameDay = (dateStr) => { const isSameDay = (dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
@ -42,59 +57,68 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
return nameA.localeCompare(nameB); return nameA.localeCompare(nameB);
}; };
const group1 = data
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
.sort(sortByName);
const group2 = data
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
.sort(sortByName);
const group3 = data
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
.sort(sortByName);
const group4 = data
.filter( ( d ) => d.activity === 4 && isBeforeToday( d.checkOutTime ) )
const group5 = data
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
.sort(sortByName);
const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
const sortedFinalList = [
...group1,
...group2,
...group3,
...group4,
...group5,
...group6,
];
const currentDate = new Date().toLocaleDateString("en-CA");
const { currentPage, totalPages, currentItems, paginate } = usePagination(
sortedFinalList,
ITEMS_PER_PAGE
);
useEffect(() => { useEffect(() => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
if (startDate && endDate) { dispatch(
dispatch( fetchAttendanceData({
fetchAttendanceData({ projectId,
projectId, fromDate: startDate,
fromDate: startDate, toDate: endDate,
toDate: endDate, })
}) );
); setIsRefreshing(false);
} }, [dateRange, projectId, dispatch, isRefreshing]);
}, [dateRange, projectId, isRefreshing]);
useEffect(() => { useEffect(() => {
const attendanceDate = [ const filteredData = showOnlyCheckout
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])), ? data.filter((item) => item.checkOutTime === null)
].sort((a, b) => new Date(b) - new Date(a)); : data;
if (attendanceDate != dates) {
setDates(attendanceDate); const group1 = filteredData
} .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
}, [data]); .sort(sortByName);
const group2 = filteredData
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
.sort(sortByName);
const group3 = filteredData
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
.sort(sortByName);
const group4 = filteredData
.filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
const group5 = filteredData
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
.sort(sortByName);
const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
// Group by date
const groupedByDate = sortedList.reduce((acc, item) => {
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
if (date) {
acc[date] = acc[date] || [];
acc[date].push(item);
}
return acc;
}, {});
// Sort dates in descending order
const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
// Create the final sorted array
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
setProcessedData(finalData);
}, [data, showOnlyCheckout]);
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
processedData,
10
);
// Reset to the first page whenever processedData changes (due to switch on/off)
useEffect(() => {
resetPage();
}, [processedData, resetPage]);
return ( return (
<> <>
@ -103,15 +127,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
id="DataTables_Table_0_length" id="DataTables_Table_0_length"
> >
<div className="col-md-3 my-0 "> <div className="col-md-3 my-0 ">
<DateRangePicker onRangeChange={setDateRange} /> <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
</div> </div>
<div className="col-md-2 m-0 text-end"> <div className="col-md-2 m-0 text-end">
<i <i
className={`bx bx-refresh cursor-pointer fs-4 ${ className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
loading ? "spin" : "" }`}
}`}
title="Refresh" title="Refresh"
onClick={() => setIsRefreshing(!isRefreshing)} onClick={() => setIsRefreshing(true)}
/> />
</div> </div>
</div> </div>
@ -125,8 +148,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</th> </th>
<th className="border-top-1">Date</th> <th className="border-top-1">Date</th>
<th> <th>
<i className="bx bxs-down-arrow-alt text-success"></i>{" "} <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
Check-In
</th> </th>
<th> <th>
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@ -135,107 +157,96 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{loading && <td colSpan={5}>Loading...</td>} {(loading || isRefreshing) && (
{dates.map((date, i) => { <tr>
return ( <td colSpan={6}>Loading...</td>
<React.Fragment key={i}> </tr>
{currentItems.some( )}
(item) => item.checkInTime.split("T")[0] === date {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
) && ( const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
<tr className="table-row-header"> const previousAttendance = arr[index - 1];
<td colSpan={7} className="text-start"> const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
<strong>{date}</strong>
</td> if (!previousDate || currentDate !== previousDate) {
</tr> acc.push(
)} <tr key={`header-${currentDate}`} className="table-row-header">
{currentItems <td colSpan={6} className="text-start">
?.filter((item) => item.checkInTime.includes(date)) <strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
.map((attendance, index) => ( </td>
<tr key={index}> </tr>
<td colSpan={2}> );
<div className="d-flex justify-content-start align-items-center"> }
<Avatar acc.push(
firstName={attendance.firstName} <tr key={index}>
lastName={attendance.lastName} <td colSpan={2}>
/> <div className="d-flex justify-content-start align-items-center">
<div className="d-flex flex-column"> <Avatar
<a firstName={attendance.firstName}
href="#" lastName={attendance.lastName}
className="text-heading text-truncate" />
> <div className="d-flex flex-column">
<span className="fw-normal"> <a
{attendance.firstName} {attendance.lastName} href="#"
</span> className="text-heading text-truncate"
</a> >
</div> <span className="fw-normal">
</div> {attendance.firstName} {attendance.lastName}
</td> </span>
<td> </a>
{" "} </div>
{moment(attendance.checkInTime).format( </div>
"DD-MMM-YYYY" </td>
)} <td>
</td> {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
<td>{convertShortTime(attendance.checkInTime)}</td> </td>
<td> <td>{convertShortTime(attendance.checkInTime)}</td>
{attendance.checkOutTime <td>
? convertShortTime(attendance.checkOutTime) {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
: "--"} </td>
</td> <td className="text-center">
<td className="text-center"> <RenderAttendanceStatus
<RenderAttendanceStatus attendanceData={attendance}
attendanceData={attendance} handleModalData={handleModalData}
handleModalData={handleModalData} Tab={2}
Tab={2} currentDate={today.toLocaleDateString("en-CA")}
currentDate={currentDate} />
/> </td>
</td> </tr>
</tr>
))}
</React.Fragment>
); );
})} return acc;
}, [])}
</tbody> </tbody>
</table> </table>
)} )}
{!loading && data.length === 0 && <span>No employee logs</span>} {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
{error && <td colSpan={5}>{error}</td>} {error && !loading && !isRefreshing && (
<tr>
<td colSpan={6}>{error}</td>
</tr>
)}
</div> </div>
{!loading && ( {!loading && !isRefreshing && processedData.length > 10 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
&laquo; &laquo;
</button> </button>
</li> </li>
{[...Array(totalPages)].map((_, index) => ( {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
<li <li
key={index} key={pageNumber}
className={`page-item ${ className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
currentPage === index + 1 ? "active" : ""
}`}
> >
<button <button className="page-link" onClick={() => paginate(pageNumber)}>
className="page-link " {pageNumber}
onClick={() => paginate(index + 1)}
>
{index + 1}
</button> </button>
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
currentPage === totalPages ? "disabled" : ""
}`}
> >
<button <button className="page-link" onClick={() => paginate(currentPage + 1)}>
className="page-link "
onClick={() => paginate(currentPage + 1)}
>
&raquo; &raquo;
</button> </button>
</li> </li>
@ -246,4 +257,4 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
); );
}; };
export default AttendanceLog; export default AttendanceLog;

152
src/components/Activities/CheckCheckOutForm.jsx
View File

@ -7,20 +7,29 @@ import { usePositionTracker } from "../../hooks/usePositionTracker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice"; import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import {checkIfCurrentDate} from "../../utils/dateUtils"; import { checkIfCurrentDate } from "../../utils/dateUtils";
const schema = z.object({ const schema = z.object({
markTime: z.string().nonempty({message:"Time is required"}), markTime: z.string().nonempty({ message: "Time is required" }),
description:z.string().max(200,"description should less than 200 chracters").optional() description: z.string().max(200, "description should less than 200 chracters").optional()
}); });
const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => { const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
const projectId = useSelector((store)=>store.localVariables.projectId) const projectId = useSelector((store) => store.localVariables.projectId)
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const coords = usePositionTracker(); const coords = usePositionTracker();
const dispatch = useDispatch() const dispatch = useDispatch()
const today = new Date().toISOString().split('T')[0];
const formatDate = (dateString) => {
if (!dateString) {
return '';
}
const [year, month, day] = dateString.split('-');
return `${day}-${month}-${year}`;
};
const { const {
register, register,
@ -29,60 +38,78 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
reset, reset,
setValue, setValue,
} = useForm({ } = useForm({
resolver: zodResolver( schema ), resolver: zodResolver(schema),
mode:"onChange" mode: "onChange"
}); });
const onSubmit = ( data ) => const onSubmit = (data) => {
{ let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,action:modeldata.action,id:modeldata?.id || null} if (modeldata.forWhichTab === 1) {
if(modeldata.forWhichTab === 1){ handleSubmitForm(record)
handleSubmitForm(record) } else {
} else
{
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) ) // if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
// { // {
dispatch(markAttendance(record)) dispatch(markAttendance(record))
.unwrap() .unwrap()
.then( ( data ) => .then((data) => {
{
showToast("Attendance Marked Successfully", "success");
})
.catch( ( error ) =>
{
showToast(error, "error" ); showToast("Attendance Marked Successfully", "success");
})
.catch((error) => {
showToast(error, "error");
});
// } else
// {
// let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
// }
}
});
// } else
// {
// let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
// }
}
closeModal() closeModal()
}; };
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<TimePicker <label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
label="Choose a time" {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
onChange={(e) => setValue("markTime", e)} </label>
interval={10} </div>
checkOutTime={modeldata?.checkOutTime}
checkInTime={modeldata?.checkInTime} <div className="col-6 col-md-6 ">
/> <label className="form-label" htmlFor="checkInDate">
{errors. markTime && <p className="text-danger">{errors.markTime.message}</p>} {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out Date' : 'Check-in Date'}
</label>
<input
type="text"
id="checkInDate"
className="form-control"
value={
modeldata?.checkInTime && !modeldata?.checkOutTime
? formatDate(modeldata?.checkInTime?.split('T')[0]) || ''
: formatDate(today)
}
disabled
/>
</div>
<div className="col-6 col-md-6">
<TimePicker
label="Choose a time"
onChange={(e) => setValue("markTime", e)}
interval={10}
checkOutTime={modeldata?.checkOutTime}
checkInTime={modeldata?.checkInTime}
/>
{errors.markTime && <p className="text-danger">{errors.markTime.message}</p>}
</div> </div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description"> <label className="form-label" htmlFor="description">
Description Description
@ -91,7 +118,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
rows="3" rows="3"
name="description" name="description"
className="form-control" className="form-control"
{...register( "description" )} {...register("description")}
maxLength={200} maxLength={200}
/> />
{errors.description && ( {errors.description && (
@ -99,7 +126,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"} {isLoading ? "Please Wait..." : "Submit"}
@ -109,7 +136,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={()=>closeModal()} onClick={() => closeModal()}
> >
Cancel Cancel
</button> </button>
@ -124,15 +151,15 @@ export default CheckCheckOutmodel;
const schemaReg = z.object({ const schemaReg = z.object({
description:z.string().min(1,{message:"please give reason!"}) description: z.string().min(1, { message: "please give reason!" })
} ); });
export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const coords = usePositionTracker(); const coords = usePositionTracker();
const { const {
register, register,
handleSubmit, handleSubmit,
@ -146,22 +173,21 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
return today.toLocaleDateString('en-CA'); return today.toLocaleDateString('en-CA');
}; };
const onSubmit = ( data ) =>
{
let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude, } const onSubmit = (data) => {
let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
handleSubmitForm(record) handleSubmitForm(record)
closeModal() closeModal()
}; };
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<p>Regularize Attendance</p> <p>Regularize Attendance</p>
<label className="form-label" htmlFor="description"> <label className="form-label" htmlFor="description">
Description Description
</label> </label>
@ -176,7 +202,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"} {isLoading ? "Please Wait..." : "Submit"}
@ -186,7 +212,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={()=>closeModal()} onClick={() => closeModal()}
> >
Cancel Cancel
</button> </button>

249
src/components/Dashboard/Dashboard.jsx
View File

@ -1,271 +1,50 @@
import React, { useState } from "react"; import React from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import { import {
useDashboard_Data,
useDashboardProjectsCardData, useDashboardProjectsCardData,
useDashboardTeamsCardData, useDashboardTeamsCardData,
useDashboardTasksCardData, useDashboardTasksCardData,
} from "../../hooks/useDashboard_Data"; } from "../../hooks/useDashboard_Data";
import Projects from "./Projects";
import Teams from "./Teams";
import TasksCard from "./Tasks";
import ProjectCompletionChart from "./ProjectCompletionChart";
import ProjectProgressChart from "./ProjectProgressChart";
const Dashboard = () => { const Dashboard = () => {
const { projects, loading } = useProjects();
const [selectedProjectId, setSelectedProjectId] = useState("all");
const [range, setRange] = useState("1W");
const getDaysFromRange = (range) => {
switch (range) {
case "1D":
return 1;
case "1W":
return 7;
case "15D":
return 15;
case "1M":
return 30;
case "3M":
return 90;
case "1Y":
return 365;
case "5Y":
return 1825;
default:
return 7;
}
};
const days = getDaysFromRange(range);
const today = new Date();
// const FromDate = today.toISOString().split("T")[0];
const FromDate = today.toLocaleDateString('en-CA'); // Always today
const { projectsCardData } = useDashboardProjectsCardData(); const { projectsCardData } = useDashboardProjectsCardData();
const { teamsCardData } = useDashboardTeamsCardData(); const { teamsCardData } = useDashboardTeamsCardData();
const { tasksCardData } = useDashboardTasksCardData(); const { tasksCardData } = useDashboardTasksCardData();
const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
days,
FromDate,
projectId: selectedProjectId === "all" ? null : selectedProjectId,
});
// Sort dashboard_data by date ascending
const sortedDashboardData = [...dashboard_data].sort(
(a, b) => new Date(a.date) - new Date(b.date)
);
// Bar chart logic
const projectNames = projects?.map((p) => p.name) || [];
const projectProgress =
projects?.map((p) => {
const completed = p.completedWork || 0;
const planned = p.plannedWork || 1;
const percent = (completed / planned) * 100;
return Math.min(Math.round(percent), 100);
}) || [];
// Line chart data
const lineChartSeries = [
{
name: "Planned Work",
data: sortedDashboardData.map((d) => d.plannedTask || 0),
},
{
name: "Completed Work",
data: sortedDashboardData.map((d) => d.completedTask || 0),
},
];
const lineChartCategories = sortedDashboardData.map((d) =>
new Date(d.date).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})
);
const lineChartCategoriesDates = sortedDashboardData.map((d) =>
new Date(d.date).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})
);
return ( return (
<div className="container-xxl flex-grow-1 container-p-y"> <div className="container-xxl flex-grow-1 container-p-y">
<div className="row gy-4"> <div className="row gy-4">
{/* Projects Card */} {/* Projects Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-4">
<div className="card p-3 h-100 text-center d-flex justify-content-between"> <Projects projectsCardData={projectsCardData} />
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
Projects
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
</div>
</div> </div>
{/* Teams Card */} {/* Teams Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-4">
<div className="card p-3 h-100 text-center d-flex justify-content-between"> <Teams teamsCardData={teamsCardData} />
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-group text-warning"></i> Teams
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.totalEmployees?.toLocaleString()}
</h4>
<small className="text-muted">Total Employees</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.inToday?.toLocaleString()}
</h4>
<small className="text-muted">In Today</small>
</div>
</div>
</div>
</div> </div>
{/* Tasks Card */} {/* Tasks Card */}
<div className="col-sm-6 col-lg-4"> <div className="col-sm-6 col-lg-4">
<div className="card p-3 h-100 text-center d-flex justify-content-between"> <TasksCard tasksCardData={tasksCardData} />
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-task text-success"></i> Tasks
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{tasksCardData.totalTasks?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{tasksCardData.completedTasks?.toLocaleString()}
</h4>
<small className="text-muted">Completed</small>
</div>
</div>
</div>
</div> </div>
{/* Bar Chart */} {/* Bar Chart (Project Completion) */}
<div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<div className="card h-100"> <ProjectCompletionChart />
<div className="card-header d-flex align-items-start justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Projects</h5>
<p className="card-subtitle">Projects Completion Status</p>
</div>
</div>
<div className="card-body">
<HorizontalBarChart
categories={projectNames}
seriesData={projectProgress}
loading={loading}
/>
</div>
</div>
</div> </div>
{/* Line Chart */} {/* Line Chart (Project Progress) */}
<div className="col-xxl-6 col-lg-6"> <div className="col-xxl-6 col-lg-6">
<div className="card h-100"> <ProjectProgressChart />
<div className="card-header">
{/* Row 1: Title + Project Selector */}
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Project Progress</h5>
<p className="card-subtitle">Progress Overview by Project</p>
</div>
<div className="btn-group">
<button
className="btn btn-outline-primary btn-sm dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{selectedProjectId === "all"
? "All Projects"
: projects?.find((p) => p.id === selectedProjectId)
?.name || "Select Project"}
</button>
<ul className="dropdown-menu">
<li>
<button
className="dropdown-item"
onClick={() => setSelectedProjectId("all")}
>
All Projects
</button>
</li>
{projects?.map((project) => (
<li key={project.id}>
<button
className="dropdown-item"
onClick={() => setSelectedProjectId(project.id)}
>
{project.name}
</button>
</li>
))}
</ul>
</div>
</div>
{/* Row 2: Time Range Buttons */}
<div className="d-flex flex-wrap mt-2">
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
<button
key={key}
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
range === key
? " border-bottom border-primary text-primary"
: "text-muted"
}`}
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
onClick={() => setRange(key)}
>
{key}
</button>
))}
</div>
</div>
<div className="card-body ">
<LineChart
seriesData={lineChartSeries}
categories={lineChartCategories}
loading={isLineChartLoading}
lineChartCategoriesDates={lineChartCategoriesDates}
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default Dashboard; export default Dashboard;

37
src/components/Dashboard/ProjectCompletionChart.jsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import { useProjects } from "../../hooks/useProjects";
const ProjectCompletionChart = () => {
const { projects, loading } = useProjects();
// Bar chart logic
const projectNames = projects?.map((p) => p.name) || [];
const projectProgress =
projects?.map((p) => {
const completed = p.completedWork || 0;
const planned = p.plannedWork || 1;
const percent = (completed / planned) * 100;
return Math.min(Math.round(percent), 100);
}) || [];
return (
<div className="card h-100">
<div className="card-header d-flex align-items-start justify-content-between">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Projects</h5>
<p className="card-subtitle">Projects Completion Status</p>
</div>
</div>
<div className="card-body">
<HorizontalBarChart
categories={projectNames}
seriesData={projectProgress}
loading={loading}
/>
</div>
</div>
);
};
export default ProjectCompletionChart;

126
src/components/Dashboard/ProjectProgressChart.jsx Normal file
View File

@ -0,0 +1,126 @@
import React, { useState } from "react";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
const ProjectProgressChart = () => {
const { projects } = useProjects();
const [selectedProjectId, setSelectedProjectId] = useState("all");
const [range, setRange] = useState("1W");
const getDaysFromRange = (range) => {
switch (range) {
case "1D": return 1;
case "1W": return 7;
case "15D": return 15;
case "1M": return 30;
case "3M": return 90;
case "1Y": return 365;
case "5Y": return 1825;
default: return 7;
}
};
const days = getDaysFromRange(range);
const today = new Date();
const FromDate = today.toLocaleDateString('en-CA');
const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
days,
FromDate,
projectId: selectedProjectId === "all" ? null : selectedProjectId,
});
const sortedDashboardData = [...dashboard_data].sort(
(a, b) => new Date(a.date) - new Date(b.date)
);
const lineChartSeries = [
{
name: "Planned Work",
data: sortedDashboardData.map((d) => d.plannedTask || 0),
},
{
name: "Completed Work",
data: sortedDashboardData.map((d) => d.completedTask || 0),
},
];
const lineChartCategories = sortedDashboardData.map((d) =>
new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
);
const lineChartCategoriesDates = sortedDashboardData.map((d) =>
new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
);
return (
<div className="card h-100">
<div className="card-header">
{/* Row 1: Title + Project Selector */}
<div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
<div className="card-title mb-0 text-start">
<h5 className="mb-1">Project Progress</h5>
<p className="card-subtitle">Progress Overview by Project</p>
</div>
<div className="btn-group">
<button
className="btn btn-outline-primary btn-sm dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{selectedProjectId === "all"
? "All Projects"
: projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
</button>
<ul className="dropdown-menu">
<li>
<button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
All Projects
</button>
</li>
{projects?.map((project) => (
<li key={project.id}>
<button
className="dropdown-item"
onClick={() => setSelectedProjectId(project.id)}
>
{project.name}
</button>
</li>
))}
</ul>
</div>
</div>
{/* Row 2: Time Range Buttons */}
<div className="d-flex flex-wrap  mt-2">
{["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
<button
key={key}
className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
range === key ? " border-bottom border-primary text-primary" : "text-muted"
}`}
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
onClick={() => setRange(key)}
>
{key}
</button>
))}
</div>
</div>
<div className="card-body ">
<LineChart
seriesData={lineChartSeries}
categories={lineChartCategories}
loading={isLineChartLoading}
lineChartCategoriesDates={lineChartCategoriesDates}
/>
</div>
</div>
);
};
export default ProjectProgressChart;

33
src/components/Dashboard/Projects.jsx Normal file
View File

@ -0,0 +1,33 @@
import React from "react";
import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
const Projects = () => {
const { projectsCardData } = useDashboardProjectsCardData();
return (
<div className="card p-3 h-100 text-center d-flex justify-content-between">
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
Projects
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.totalProjects?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{projectsCardData.ongoingProjects?.toLocaleString()}
</h4>
<small className="text-muted">Ongoing</small>
</div>
</div>
</div>
);
};
export default Projects;

32
src/components/Dashboard/Tasks.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
const TasksCard = () => {
const { tasksCardData } = useDashboardTasksCardData();
return (
<div className="card p-3 h-100 text-center d-flex justify-content-between">
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-task text-success"></i> Tasks
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{tasksCardData.totalTasks?.toLocaleString()}
</h4>
<small className="text-muted">Total</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{tasksCardData.completedTasks?.toLocaleString()}
</h4>
<small className="text-muted">Completed</small>
</div>
</div>
</div>
);
};
export default TasksCard;

32
src/components/Dashboard/Teams.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
const Teams = () => {
const { teamsCardData } = useDashboardTeamsCardData();
return (
<div className="card p-3 h-100 text-center d-flex justify-content-between">
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-group text-warning"></i> Teams
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.totalEmployees?.toLocaleString()}
</h4>
<small className="text-muted">Total Employees</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{teamsCardData.inToday?.toLocaleString()}
</h4>
<small className="text-muted">In Today</small>
</div>
</div>
</div>
);
};
export default Teams;

34
src/components/Project/AboutProject.jsx
View File

@ -12,7 +12,7 @@ const AboutProject = ({ data }) => {
<small className="card-text text-uppercase text-muted small"> <small className="card-text text-uppercase text-muted small">
Profile Profile
</small> </small>
<ul className="list-unstyled my-3 py-1"> <ul className="list-unstyled my-3">
<li className="d-flex align-items-center mb-4"> <li className="d-flex align-items-center mb-4">
<i className="bx bx-check"></i> <i className="bx bx-check"></i>
<span className="fw-medium mx-2">Start Date:</span>{" "} <span className="fw-medium mx-2">Start Date:</span>{" "}
@ -41,27 +41,17 @@ const AboutProject = ({ data }) => {
<span className="fw-medium mx-2">Contact:</span>{" "} <span className="fw-medium mx-2">Contact:</span>{" "}
<span>{data.contactPerson}</span> <span>{data.contactPerson}</span>
</li> </li>
<li className="d-flex align-items-center mb-4"> <li className="d-flex flex-column align-items-start mb-4">
<i className="bx bx-flag"></i> <div className="d-flex align-items-center">
<span className="fw-medium mx-2">Address:</span>{" "} <i className="bx bx-flag"></i>
</li> <span className="fw-medium mx-2">Address:</span>
</ul> {data.projectAddress?.length <= 20 && (
{/* <small className="card-text text-uppercase text-muted small"> <span>{data.projectAddress}</span>
Contacts )}
</small> */} </div>
<ul className="list-unstyled my-3 py-1"> {data.projectAddress?.length > 20 && (
<div className="ms-4 text-start">{data.projectAddress}</div>
{/* <li className="d-flex align-items-center mb-4"> )}
<i className="bx bx-phone"></i>
<span className="fw-medium mx-2">Contact Number:</span>{" "}
<span>NA</span>
</li> */}
{/* <li className="d-flex align-items-center mb-4">
<i className="bx bx-envelope"></i>
<span className="fw-medium mx-2">Email:</span> <span>NA</span>
</li> */}
<li className="d-flex align-items-start test-start mb-4">
<span>{data.projectAddress}</span>
</li> </li>
</ul> </ul>
</div> </div>

705
src/components/Project/AssignRole.jsx
View File

@ -1,54 +1,95 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice"; import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"; import useMaster from "../../hooks/masterHook/useMaster";
import { employee } from "../../data/masters";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { getCachedData } from "../../slices/apiDataManager"; import { getCachedData } from "../../slices/apiDataManager";
import { useProjects } from "../../hooks/useProjects";
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees"; import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { TasksRepository } from "../../repositories/ProjectRepository"; import { TasksRepository } from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
const AssignRoleModel = ({ assignData, onClose }) => { const AssignRoleModel = ({ assignData, onClose }) => {
// Calculate maxPlanned based on assignData
const maxPlanned = const maxPlanned =
assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork; assignData?.workItem?.workItem?.completedWork;
// Zod schema for form validation
const schema = z.object({ const schema = z.object({
selectedEmployees: z selectedEmployees: z
.array(z.string()) .array(z.string())
.min(1, { message: "At least one employee must be selected" }), .min(1, { message: "At least one employee must be selected" }), // Added custom message here for consistency
description: z.string().min(1, { message: "Description is required" }), description: z.string().min(1, { message: "Description is required" }),
plannedTask: z.preprocess( plannedTask: z.preprocess(
(val) => parseInt(val, 10), (val) => parseInt(val, 10), // Preprocess value to integer
z z
.number({ .number({
required_error: "Planned task is required", required_error: "Planned task is required",
invalid_type_error: "Planned task must be a number", invalid_type_error: "Target for Today must be a number",
}) })
.int() .int() // Ensure it's an integer
.positive({ message: "Planned task must be a positive number" }) .positive({ message: "Planned task must be a positive number" }) // Must be positive
.max(maxPlanned, { .max(maxPlanned, {
// Max value validation
message: `Planned task cannot exceed ${maxPlanned}`, message: `Planned task cannot exceed ${maxPlanned}`,
}) })
), ),
}); });
const [plannedTask, setPlannedTask] = useState();
// State for help popovers (though not fully implemented in provided snippets)
const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
const helpPopupRefTarget = useRef(null);
const [isHelpVisible, setIsHelpVisible] = useState(false);
// Refs for Bootstrap Popovers
const infoRef = useRef(null);
const infoRef1 = useRef(null);
// Initialize Bootstrap Popovers on component mount
useEffect(() => {
// Check if Bootstrap is available globally
if (typeof bootstrap !== 'undefined') {
if (infoRef.current) {
new bootstrap.Popover(infoRef.current, {
trigger: 'focus',
placement: 'right',
html: true,
content: `<div>Total Pending tasks of the Activity</div>`,
});
}
if (infoRef1.current) {
new bootstrap.Popover(infoRef1.current, {
trigger: 'focus',
placement: 'right',
html: true,
content: `<div>Target task for today</div>`,
});
}
} else {
console.warn("Bootstrap is not available. Popovers might not function.");
}
}, []); // Empty dependency array ensures this runs once on mount
// Redux state and hooks
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const { employees,loading:employeeLoading } = useEmployeesAllOrByProjectId(selectedProject,false); const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
selectedProject,
false
);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data, loading } = useMaster(); const { loading } = useMaster(); // Assuming this is for jobRoleData loading
const jobRoleData = getCachedData("Job Role"); const jobRoleData = getCachedData("Job Role");
// Local component states
const [selectedRole, setSelectedRole] = useState("all"); const [selectedRole, setSelectedRole] = useState("all");
const [selectedEmployees, setSelectedEmployees] = useState([]); const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated
// React Hook Form setup
const { const {
handleSubmit, handleSubmit,
control, control,
@ -56,74 +97,95 @@ const AssignRoleModel = ({ assignData, onClose }) => {
watch, watch,
formState: { errors }, formState: { errors },
reset, reset,
trigger, // <--- IMPORTANT: Destructure 'trigger' here
} = useForm({ } = useForm({
defaultValues: { defaultValues: {
selectedEmployees: [], selectedEmployees: [],
description: "", description: "",
plannedTask: "", plannedTask: "",
}, },
resolver: zodResolver(schema), resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
}); });
const handleRoleChange = (event) => { // Handler for employee checkbox changes
reset(); const handleCheckboxChange = (event, user) => {
// setSelectedEmployees([]); const isChecked = event.target.checked;
setSelectedRole(event.target.value); let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
};
const filteredEmployees = if (isChecked) {
selectedRole === "all" // Add employee if checked and not already in the list
? employees if (!updatedSelectedEmployees.includes(user.id)) {
: employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole); updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
const handleEmployeeSelection = (employeeId, field) => {
setSelectedEmployees((prevSelected) => {
let updatedSelection;
if (!prevSelected.includes(employeeId)) {
updatedSelection = [...prevSelected, employeeId];
} else {
updatedSelection = prevSelected.filter((id) => id !== employeeId);
} }
field.onChange(updatedSelection); } else {
return updatedSelection; // Remove employee if unchecked
}); updatedSelectedEmployees = updatedSelectedEmployees.filter(
}; (id) => id !== user.id
);
const removeEmployee = (employeeId) => {
setSelectedEmployees((prevSelected) => {
const updatedSelection = prevSelected.filter((id) => id !== employeeId);
setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
return updatedSelection;
});
};
const onSubmit = async (data) => {
const formattedData = {
taskTeam: data.selectedEmployees,
plannedTask: data.plannedTask,
description: data.description,
assignmentDate: new Date().toISOString(),
workItemId: assignData?.workItem?.workItem.id,
};
try {
let response = await TasksRepository.assignTask(formattedData);
showToast("Task Successfully Assigend", "success");
setSelectedEmployees([]);
reset();
onClose();
} catch (error) {
showToast("something wrong", "error");
} }
// Update the form state with the new list of selected employees
setValue("selectedEmployees", updatedSelectedEmployees);
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
}; };
// Effect to dispatch action for Job Role master data
useEffect(() => { useEffect(() => {
dispatch(changeMaster("Job Role")); dispatch(changeMaster("Job Role"));
// Cleanup function to reset selected role when component unmounts or dispatch changes
return () => setSelectedRole("all"); return () => setSelectedRole("all");
}, [dispatch]); }, [dispatch]);
// Handler for role filter change
const handleRoleChange = (event) => {
setSelectedRole(event.target.value);
};
// Filter employees based on selected role
const filteredEmployees =
selectedRole === "all"
? employees
: employees?.filter(
(emp) => String(emp.jobRoleId || "") === selectedRole
);
// Form submission handler
const onSubmit = async (data) => {
const selectedEmployeeIds = data.selectedEmployees;
// Prepare taskTeam data (only IDs are needed for the backend based on previous context)
const taskTeamWithDetails = selectedEmployeeIds
.map((empId) => {
return empId; // Return just the ID as per previous discussions
})
.filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
// Format data for API call
const formattedData = {
taskTeam: taskTeamWithDetails,
plannedTask: data.plannedTask,
description: data.description,
assignmentDate: new Date().toISOString(), // Current date/time
workItemId: assignData?.workItem?.workItem.id,
};
try {
// Call API to assign task
await TasksRepository.assignTask(formattedData);
showToast("Task Successfully Assigned", "success"); // Show success toast
reset(); // Reset form fields
onClose(); // Close the modal
} catch (error) {
console.error("Error assigning task:", error); // Log the full error for debugging
showToast("Something went wrong. Please try again.", "error"); // Show generic error toast
}
};
// Handler to close the modal and reset form
const closedModel = () => { const closedModel = () => {
reset(); reset();
onClose(); onClose();
}; };
return ( return (
<div <div
className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal" className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
@ -137,260 +199,360 @@ const AssignRoleModel = ({ assignData, onClose }) => {
onClick={onClose} onClick={onClose}
aria-label="Close" aria-label="Close"
></button> ></button>
<div className="container my-1"> <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<div className="mb-"> <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap"> <div className="container my-3">
{[ <div className="mb-1">
assignData?.building?.name, <p className="mb-0">
assignData?.floor?.floorName, <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
assignData?.workArea?.areaName, <p className="me-2 m-0 font-bold">Work Location :</p>
assignData?.workItem?.workItem?.activityMaster?.activityName, {[
] assignData?.building?.name,
.filter(Boolean) assignData?.floor?.floorName,
.map((item, index, array) => ( assignData?.workArea?.areaName,
<span key={index} className="d-flex align-items-center"> assignData?.workItem?.workItem?.activityMaster
{item} ?.activityName,
{index < array.length - 1 && ( ]
<i className="bx bx-chevron-right mx-2"></i> .filter(Boolean) // Filter out any undefined/null values
)} .map((item, index, array) => (
</span> <span key={index} className="d-flex align-items-center">
))} {item}
</p> {index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</span>
</p>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="row mb-1"> <div className="form-label text-start">
<div className="col-sm-4"> <div className="row mb-1">
<div className="form-text text-start">Select Role</div> <div className="col-12">
<div className="input-group input-group-merge"> <div className="form-text text-start">
<select <div className="d-flex align-items-center form-text fs-7">
className="form-select form-select-sm" <span className="text-dark">Select Team</span>
id="Role" <div className="me-2">{displayedSelection}</div>
value={selectedRole} <a
onChange={handleRoleChange} className="dropdown-toggle hide-arrow cursor-pointer"
aria-label="" data-bs-toggle="dropdown"
> aria-expanded="false"
{loading && data ? ( >
"Loading..." <i className="bx bx-filter bx-lg text-primary"></i>
) : ( </a>
<>
<option value="all">All</option>
{jobRoleData?.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</>
)}
</select>
</div>
</div>
</div>
<div className="divider text-start">
<div className="divider-text">Employee</div>
</div>
{employeeLoading && <div>Loading...</div>}
{!employeeLoading && filteredEmployees?.length === 0 && employees && (
<div>No employees found</div>
)}
<div className="row"> <ul className="dropdown-menu p-2 text-capitalize">
<div className="col-12 col-md-8 h-sm-25 overflow-auto"> <li key="all">
{selectedRole !== "" && ( <button
<div className="row mb-2"> type="button"
<div className="col-sm-12"> className="dropdown-item py-1"
<div className="row"> onClick={() =>
{filteredEmployees?.map((emp) => { handleRoleChange({
const jobRole = jobRoleData?.find( target: { value: "all" },
(role) => role?.id === emp?.jobRoleId })
); }
return (
<div
key={emp.id}
className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
> >
<div className="form-check text-start p-0"> All Roles
<div className="li-wrapper d-flex justify-content-start align-items-start"> </button>
</li>
{jobRoleData?.map((user) => (
<li key={user.id}>
<button
type="button"
className="dropdown-item py-1"
value={user.id}
onClick={handleRoleChange}
>
{user.name}
</button>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
{employeeLoading && <div>Loading employees...</div>}
{!employeeLoading &&
filteredEmployees?.length === 0 &&
employees && (
<div>No employees found for the selected role.</div>
)}
<div className="row">
<div className="col-12 h-sm-25 overflow-auto mt-2">
{selectedRole !== "" && (
<div className="row">
{loading ? ( // Assuming 'loading' here refers to master data loading
<div className="col-12">
<p className="text-center">Loading roles...</p>
</div>
) : filteredEmployees?.length > 0 ? (
filteredEmployees?.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
return (
<div
key={emp.id}
className="col-6 col-md-4 col-lg-3 mb-3"
>
<div className="form-check d-flex align-items-start">
<Controller <Controller
name="selectedEmployees" name="selectedEmployees"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<input <input
{...field} {...field}
className="form-check-input mx-2" className="form-check-input me-1 mt-1"
type="checkbox" type="checkbox"
id={`employee-${emp?.id}`} id={`employee-${emp?.id}`}
value={emp.id} value={emp.id}
checked={field.value.includes( checked={field.value?.includes(emp.id)}
emp.id onChange={(e) => {
)} handleCheckboxChange(e, emp);
onChange={() => {
handleEmployeeSelection(
emp.id,
field
);
}} }}
/> />
)} )}
/> />
<div className="list-content"> <div className="flex-grow-1">
<p <p className="mb-0" style={{ fontSize: "13px" }}>
className=" mb-0"
style={{
fontSize: "12px",
fontWeight: "bolder",
}}
>
{emp.firstName} {emp.lastName} {emp.firstName} {emp.lastName}
</p> </p>
<small <small
className="lead" className="text-muted"
style={{ fontSize: "10px" }} style={{ fontSize: "11px" }}
> >
{loading && ( {loading ? (
<p <span className="placeholder-glow">
className="skeleton para" <span className="placeholder col-6"></span>
style={{ height: "7px" }} </span>
></p> ) : (
jobRole?.name || "Unknown Role"
)} )}
{data &&
!loading &&
(jobRole
? jobRole.name
: "Unknown Role")}
</small> </small>
</div> </div>
</div> </div>
</div> </div>
</div> );
})
) : (
<div className="col-12">
<p className="text-center">No employees found for the selected role.</p>
</div>
)}
</div>
)}
</div>
</div>
<div
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find(
(emp) => emp.id === empId
);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
)
); );
})} })}
</div> </div>
</div> </div>
</div> )}
)} </div>
</div>
<div
className="col-12 col-md-4 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{selectedEmployees.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{selectedEmployees.map((empId) => {
const emp = employees.find(
(emp) => emp.id === empId
);
return (
<span
key={empId}
className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
removeEmployee(empId);
setValue(
"selectedEmployees",
selectedEmployees.filter(
(id) => id !== empId
)
);
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
);
})}
</div>
</div>
)}
</div>
</div>
<div className="col-md text-start mx-0 px-0"> {!loading && errors.selectedEmployees && (
<div className="form-check form-check-inline mt-4 px-1"> <div className="danger-text mt-1">
<label className="form-text fs-6" for="inlineCheckbox1"> <p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
Pending Work </div>
</label> )}
{/* Pending Task of Activity section */}
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-3 px-1">
<label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
Pending Task of Activity :
<label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
<strong>
{assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
</strong>{" "}
<u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
</label>
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={infoRef}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center ms-2"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
style={{ cursor: "pointer" }}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</label>
</div>
</div>
{/* Target for Today input and validation */}
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
<label
className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="inlineCheckbox1"
>
<span>Target for Today</span>&nbsp;<span style={{ marginLeft: '46px' }}>:</span>
</label>
</div>
<div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
<Controller
name="plannedTask"
control={control}
render={({ field }) => (
<div className="d-flex align-items-center gap-1 ">
<input
type="text"
className="form-control form-control-sm"
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
/>
<span style={{ paddingLeft: '6px' }}>
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
</span>
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={infoRef1}
tabIndex="0"
className="d-flex align-items-center avatar-group justify-content-center ms-2"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
style={{ cursor: "pointer" }}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</div>
)}
/>
</div>
{errors.plannedTask && (
<div className="danger-text mt-1">{errors.plannedTask.message}</div>
)}
{isHelpVisible && (
<div
className="position-absolute bg-white border p-2 rounded shadow"
style={{ zIndex: 10, marginLeft: '10px' }}
>
{/* Add your help content here */}
<p className="mb-0">Enter the target value for today's task.</p>
</div>
)}
</div>
{/* Description field */}
<label <label
className="form-check-label ms-2" className="form-text fs-7 m-1 text-lg text-dark"
for="inlineCheckbox1" htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
> >
{assignData?.workItem?.workItem?.plannedWork - Description
assignData?.workItem?.workItem?.completedWork}
</label>
</div>
<div className="form-check form-check-inline col-sm-2 col">
<label for="defaultFormControlInput" className="form-label">
Target
</label> </label>
<Controller <Controller
name="plannedTask" name="description"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<input <textarea
type="text"
className="form-control form-control-xs"
{...field} {...field}
id="defaultFormControlInput" className="form-control"
aria-describedby="defaultFormControlHelp" id="descriptionTextarea" // Changed id for better accessibility
rows="2"
/> />
)} )}
/> />
{errors.description && (
<div className="danger-text">
{errors.description.message}
</div>
)}
</div> </div>
{errors.plannedTask && (
<div className="danger-text mt-1">
{errors.plannedTask.message}
</div>
)}
</div>
{errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees.message}</p>
</div>
)}
<label for="exampleFormControlTextarea1" className="form-label"> {/* Submit and Cancel buttons */}
Description <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
</label> <button type="submit" className="btn btn-sm btn-primary ">
<Controller Submit
name="description" </button>
control={control} <button
render={({ field }) => ( type="reset"
<textarea className="btn btn-sm btn-label-secondary"
{...field} data-bs-dismiss="modal"
className="form-control" aria-label="Close"
id="exampleFormControlTextarea1" onClick={closedModel}
rows="2" >
/> Cancel
)} </button>
/>
{errors.description && (
<div className="danger-text">
{errors.description.message}
</div> </div>
)} </form>
</div>
<div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
<button type="submit" className="btn btn-sm btn-primary ">
Submit
</button>
<button
type="reset"
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={closedModel}
>
Cancel
</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -398,4 +560,5 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div> </div>
); );
}; };
export default AssignRoleModel; export default AssignRoleModel;

14
src/components/Project/Infrastructure/BuildingModel.jsx
View File

@ -47,7 +47,7 @@ const BuildingModel = ({
} }
return () => { return () => {
setValue("name", null); setValue("name", "");
}; };
}, [clearTrigger, onClearComplete, editingBuilding, project?.id]); }, [clearTrigger, onClearComplete, editingBuilding, project?.id]);
@ -107,7 +107,10 @@ const BuildingModel = ({
className="btn-close" className="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={onClose} onClick={() => {
onClose();
reset(); // Call reset here
}}
></button> ></button>
<h5 className="text-center mb-2"> <h5 className="text-center mb-2">
Manage Buildings - {project?.name} Manage Buildings - {project?.name}
@ -186,7 +189,10 @@ const BuildingModel = ({
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
onClick={onClose} onClick={() => {
onClose();
reset(); // Call reset here
}}
> >
Cancel Cancel
</button> </button>
@ -199,3 +205,5 @@ const BuildingModel = ({
}; };
export default BuildingModel; export default BuildingModel;

147
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -2,17 +2,18 @@ import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { getCachedData } from "../../../slices/apiDataManager";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
// Zod validation schema
const floorSchema = z.object({ const floorSchema = z.object({
buildingId: z.string().min(1, "Building is required"), buildingId: z
id: z.string().min(1, "Floor is required").optional(), .string()
.refine((val) => val !== "0", {
message: "Building is required",
}),
id: z.string().optional(),
floorName: z.string().min(1, "Floor Name is required"), floorName: z.string().min(1, "Floor Name is required"),
}); });
// Default model
const defaultModel = { const defaultModel = {
id: "0", id: "0",
floorName: "", floorName: "",
@ -30,12 +31,10 @@ const FloorModel = ({
const [selectedBuilding, setSelectedBuilding] = useState({}); const [selectedBuilding, setSelectedBuilding] = useState({});
const [buildings, setBuildings] = useState(project?.buildings || []); const [buildings, setBuildings] = useState(project?.buildings || []);
// Initialize the form with React Hook Form
const { const {
register, register,
handleSubmit, handleSubmit,
setValue, setValue,
getValues,
reset, reset,
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
@ -50,10 +49,10 @@ const FloorModel = ({
} }
}, [clearTrigger, onClearComplete, reset]); }, [clearTrigger, onClearComplete, reset]);
// Handle building selection change
const handleBuildigChange = (e) => { const handleBuildigChange = (e) => {
const buildingId = e.target.value; const buildingId = e.target.value;
const building = buildings.find((b) => b.id === String(buildingId)); const building = buildings.find((b) => b.id === String(buildingId));
if (building) { if (building) {
setSelectedBuilding(building); setSelectedBuilding(building);
setFormData({ setFormData({
@ -61,8 +60,8 @@ const FloorModel = ({
floorName: "", floorName: "",
buildingId: building.id, buildingId: building.id,
}); });
setValue("buildingId", building.id); // Set value for validation setValue("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
setValue("id", "0"); // Reset floorId when changing building setValue("id", "0");
} else { } else {
setSelectedBuilding({}); setSelectedBuilding({});
setFormData({ setFormData({
@ -70,14 +69,14 @@ const FloorModel = ({
floorName: "", floorName: "",
buildingId: "0", buildingId: "0",
}); });
setValue("buildingId", "0"); setValue("buildingId", "0", { shouldValidate: true }); // ✅ trigger validation
} }
}; };
// Handle floor selection change
const handleFloorChange = (e) => { const handleFloorChange = (e) => {
const id = e.target.value; const id = e.target.value;
const floor = selectedBuilding.floors.find((b) => b.id === String(id)); const floor = selectedBuilding.floors?.find((b) => b.id === String(id));
if (floor) { if (floor) {
setFormData({ setFormData({
id: floor.id, id: floor.id,
@ -95,15 +94,14 @@ const FloorModel = ({
} }
}; };
// Handle form submission
const onFormSubmit = (data) => { const onFormSubmit = (data) => {
if(data.id == "0"){ if (data.id === "0") {
data.id = null; data.id = null;
} }
onSubmit(data); onSubmit(data);
reset({ reset({ floorName: "" });
floorName: "",
});
if (data.id !== null) { if (data.id !== null) {
showToast("Floor updated successfully.", "success"); showToast("Floor updated successfully.", "success");
} else { } else {
@ -141,17 +139,14 @@ const FloorModel = ({
{buildings?.length > 0 && {buildings?.length > 0 &&
buildings buildings
.filter((building) => building?.name) .filter((building) => building?.name)
.sort((a, b) => { .sort((a, b) =>
const nameA = a.name || ""; (a.name || "").localeCompare(b.name || "")
const nameB = b.name || ""; )
return nameA?.localeCompare(nameB);
})
.map((building) => ( .map((building) => (
<option key={building.id} value={building.id}> <option key={building.id} value={building.id}>
{building.name} {building.name}
</option> </option>
))} ))}
{buildings?.length === 0 && ( {buildings?.length === 0 && (
<option disabled>No buildings found</option> <option disabled>No buildings found</option>
)} )}
@ -162,63 +157,57 @@ const FloorModel = ({
</div> </div>
{formData.buildingId !== "0" && ( {formData.buildingId !== "0" && (
<div className="col-12 col-md-12"> <>
<label className="form-label">Select Floor</label> <div className="col-12 col-md-12">
<select <label className="form-label">Select Floor</label>
id="id" <select
className="select2 form-select form-select-sm" id="id"
aria-label="Select Floor" className="select2 form-select form-select-sm"
{...register("id")} aria-label="Select Floor"
onChange={handleFloorChange} {...register("id")}
> onChange={handleFloorChange}
<option value="0">Add New Floor</option> >
{/* {selectedBuilding?.floors?.map((floor) => ( <option value="0">Add New Floor</option>
<option key={floor.id} value={floor.id}> {selectedBuilding?.floors?.length > 0 &&
{floor.floorName} [...selectedBuilding.floors]
</option> .filter((floor) => floor?.floorName)
) )} */} .sort((a, b) =>
(a.floorName || "").localeCompare(
{selectedBuilding && b.floorName || ""
selectedBuilding.floors?.length > 0 && )
[...selectedBuilding.floors] )
.filter((floor) => floor?.floorName) .map((floor) => (
.sort((a, b) => { <option key={floor.id} value={floor.id}>
const nameA = a.floorName || ""; {floor.floorName}
const nameB = b.floorName || ""; </option>
return nameA?.localeCompare(nameB); ))}
}) {selectedBuilding?.floors?.length === 0 && (
.map((floor) => ( <option disabled>No floors found</option>
<option key={floor.id} value={floor.id}> )}
{floor.floorName} </select>
</option> {errors.id && (
))} <p className="text-danger">{errors.id.message}</p>
{selectedBuilding?.floors?.length === 0 && (
<option disabled>No floors found</option>
)} )}
</select> </div>
{errors.id && (
<p className="text-danger">{errors.id.message}</p>
)}
</div>
)}
{formData.buildingId !== "0" && ( <div className="col-12 col-md-12">
<div className="col-12 col-md-12"> <label className="form-label">
<label className="form-label" > {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
{formData.id !== "0" ? "Modify " : "Enter "} Floor Name </label>
</label> <input
<input type="text"
type="text" id="floorName"
id="floorName" className="form-control form-control-sm me-2"
className="form-control form-control-sm me-2" placeholder="Floor Name"
placeholder="Floor Name" {...register("floorName")}
{...register("floorName")} />
/> {errors.floorName && (
{errors.floorName && ( <p className="text-danger">
<p className="text-danger">{errors.floorName.message}</p> {errors.floorName.message}
)} </p>
</div> )}
</div>
</>
)} )}
<div className="col-12 text-center"> <div className="col-12 text-center">

2
src/components/Project/Infrastructure/InfraTable.jsx
View File

@ -31,7 +31,7 @@ const InfraTable = ({ buildings }) => {
{ {
building: null, building: null,
floor: { floor: {
id: data.id || "0", id: data.id || null,
floorName: data.floorName, floorName: data.floorName,
buildingId: data.buildingId, buildingId: data.buildingId,
}, },

5
src/components/Project/Infrastructure/WorkArea.jsx
View File

@ -184,10 +184,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
Category Category
</th> </th>
<th className="infra-activity-table-header d-none d-md-table-cell"> <th className="infra-activity-table-header d-none d-md-table-cell">
Planned Completed/Planned
</th>
<th className="infra-activity-table-header d-none d-md-table-cell">
Completed
</th> </th>
<th className="infra-activity-table-header"> <th className="infra-activity-table-header">
Progress Progress

38
src/components/Project/Infrastructure/WorkItem.jsx
View File

@ -148,7 +148,7 @@ const WorkItem = ({
<span className="fw-light"> <span className="fw-light">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.activityMaster?.activityName || ? NewWorkItem?.workItem?.activityMaster?.activityName ||
workItem.activityMaster?.activityName workItem.activityMaster?.activityName
: "NA"} : "NA"}
</span> </span>
</td> </td>
@ -157,8 +157,8 @@ const WorkItem = ({
<td className="text-center d-sm-table-cell d-md-none"> <td className="text-center d-sm-table-cell d-md-none">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.completedWork ?? ? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ?? workItem?.completedWork ??
"NA" "NA"
: "NA"} : "NA"}
/{" "} /{" "}
{hasWorkItem {hasWorkItem
@ -171,28 +171,22 @@ const WorkItem = ({
<span className="fw-light"> <span className="fw-light">
{hasWorkItem {hasWorkItem
? NewWorkItem?.workItem?.workCategoryMaster?.name || ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
workItem.workCategoryMaster?.name || workItem.workCategoryMaster?.name ||
"NA" "NA"
: "NA"} : "NA"}
</span> </span>
</td> </td>
{/* Planned - visible on medium and above */}
<td className="text-center d-none d-md-table-cell"> <td className="text-center d-none d-md-table-cell">
{hasWorkItem {hasWorkItem ? (
? NewWorkItem?.workItem?.plannedWork ?? `${NewWorkItem?.workItem?.completedWork ??
workItem?.plannedWork ?? workItem?.completedWork ??
"NA" "0"}/${NewWorkItem?.workItem?.plannedWork ??
: "NA"} workItem?.plannedWork ??
</td> "0"}`
) : (
{/* Completed - visible on medium and above */} "NA"
<td className="text-center d-none d-md-table-cell"> )}
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
: "NA"}
</td> </td>
{/* Progress Bar - always visible */} {/* Progress Bar - always visible */}
@ -205,7 +199,7 @@ const WorkItem = ({
width: getProgress( width: getProgress(
NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork, NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
NewWorkItem?.workItem?.completedWork || NewWorkItem?.workItem?.completedWork ||
workItem?.completedWork workItem?.completedWork
), ),
height: "5px", height: "5px",
}} }}
@ -266,7 +260,7 @@ const WorkItem = ({
></i> ></i>
<ul className="dropdown-menu dropdown-menu-start"> <ul className="dropdown-menu dropdown-menu-start">
{!projectId && ManageTasks && PlannedWork !== CompletedWork && ( {!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
<li> <li>
<a <a
className="dropdown-item d-flex align-items-center" className="dropdown-item d-flex align-items-center"

11
src/components/Project/MapUsers.jsx
View File

@ -114,8 +114,8 @@ const MapUsers = ({
<> <>
<div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user"> <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <div className="modal-header ">
<div className="md-2 mb-1"> <div className="md-2 mb-n5">
{(filteredData.length > 0 || {(filteredData.length > 0 ||
allocationEmployeesData.length > 0)&& ( allocationEmployeesData.length > 0)&& (
<div className="input-group"> <div className="input-group">
@ -129,6 +129,11 @@ const MapUsers = ({
)} )}
</div> </div>
</div> </div>
<div className="d-flex justify-content-start align-items-center px-4 mt-6">
<h5 className="mb-0 mt-1">
<i className=" text-warning me-3"></i> Select Employee
</h5>
</div>
<div className="modal-body p-sm-4 p-0"> <div className="modal-body p-sm-4 p-0">
<table <table
className="datatables-users table border-top dataTable no-footer dtr-column " className="datatables-users table border-top dataTable no-footer dtr-column "
@ -136,7 +141,7 @@ const MapUsers = ({
aria-describedby="DataTables_Table_0_info" aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
<thead></thead>
<tbody> <tbody>
{employeeLoading && allocationEmployeesData.length === 0 && ( {employeeLoading && allocationEmployeesData.length === 0 && (
<p>Loading...</p> <p>Loading...</p>

6
src/components/common/DateRangePicker.jsx
View File

@ -1,11 +1,13 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => { const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
const inputRef = useRef(null); const inputRef = useRef(null);
useEffect(() => { useEffect(() => {
const today = new Date(); const today = new Date();;
today.setDate(today.getDate() - 1);
const fifteenDaysAgo = new Date(); const fifteenDaysAgo = new Date();
fifteenDaysAgo.setDate(today.getDate() - DateDifference); fifteenDaysAgo.setDate(today.getDate() - DateDifference);
const fp = flatpickr(inputRef.current, { const fp = flatpickr(inputRef.current, {

4
src/components/master/CreateJobRole.jsx
View File

@ -70,7 +70,9 @@ const CreateJobRole = ({onClose}) => {
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"

3
src/components/master/CreateRole.jsx
View File

@ -96,7 +96,10 @@ const CreateRole = ({ modalType, onClose }) => {
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Application Role</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"

3
src/components/master/CreateWorkCategory.jsx
View File

@ -70,6 +70,9 @@ const CreateWorkCategory = ({onClose}) => {
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Category Name</label> <label className="form-label">Category Name</label>

3
src/components/master/EditJobRole.jsx
View File

@ -77,6 +77,9 @@ const EditJobRole = ({data,onClose}) => {
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"

4
src/components/master/EditRole.jsx
View File

@ -146,7 +146,9 @@ const EditMaster = ({ master, onClose }) => {
return ( return (
<form className="row g-2 " onSubmit={handleSubmit(onSubmit)}> <form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Application Role</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"

4
src/components/master/EditWorkCategory.jsx
View File

@ -77,6 +77,10 @@ const EditWorkCategory = ({data,onClose}) => {
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Work Category</label>
</div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Category Name</label> <label className="form-label">Category Name</label>
<input type="text" <input type="text"

2
src/data/menuData.json
View File

@ -48,7 +48,7 @@
"link": "/activities/task" "link": "/activities/task"
}, },
{ {
"text": "Daily Task", "text": "Daily Progress Report",
"available": true, "available": true,
"link": "/activities/records" "link": "/activities/records"
}, },

224
src/hooks/useAttendanceStatus.js
View File

@ -1,8 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { timeElapsed } from '../utils/dateUtils'; import { timeElapsed } from "../utils/dateUtils";
import { useSelector } from 'react-redux'; import { useSelector } from "react-redux";
import {THRESH_HOLD} from '../utils/constants'; import { THRESH_HOLD } from "../utils/constants";
export const ACTIONS = { export const ACTIONS = {
CHECK_IN: 0, CHECK_IN: 0,
@ -10,124 +9,143 @@ export const ACTIONS = {
REGULARIZATION: 2, REGULARIZATION: 2,
REQUESTED: 3, REQUESTED: 3,
APPROVED: 4, APPROVED: 4,
REJECTED: 5 REJECTED: 5,
}; };
const now = new Date();
const useAttendanceStatus = (attendanceData) => { const useAttendanceStatus = (attendanceData) => {
const [status, setStatus] = useState({ const [status, setStatus] = useState({
status: "Unknown", status: "Unknown",
action: null, action: null,
disabled: true, disabled: true,
text: "Unknown", text: "Unknown",
color: 'btn-secondary', color: "btn-secondary",
}); });
useEffect(() => { useEffect(() => {
const { checkInTime, checkOutTime, activity } = attendanceData; const { checkInTime, checkOutTime, activity } = attendanceData;
if (activity === 0 && checkInTime === null && checkOutTime === null) {
if(activity === 0 && checkInTime === null && checkOutTime === null){ setStatus({
setStatus({ status: "Check-In",
status: "Check-In", action: ACTIONS.CHECK_IN,
action: ACTIONS.CHECK_IN, disabled: false,
disabled: false, text: "Check In",
text: "Check In", color: "btn-primary",
color: 'btn-primary', });
}) } else if (activity === 4 && new Date(checkOutTime) < now) {
}else if(activity === 0&& checkInTime === null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){ setStatus({
setStatus({ status: "Approved",
status: "Check-In", action: ACTIONS.APPROVED,
action: ACTIONS.CHECK_IN, disabled: true,
disabled: false, text: "Approved",
text: "Check In", color: "btn-success",
color: 'btn-primary', });
}) } else if (
activity === 0 &&
} else if(activity === 0&& checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){ checkInTime === null &&
setStatus({ checkOutTime === null &&
status: "Request Regularize", !timeElapsed(checkInTime, THRESH_HOLD)
action: ACTIONS.REGULARIZATION, ) {
disabled: false, setStatus({
text: "Regularizes", status: "Check-In",
color: 'btn-warning', action: ACTIONS.CHECK_IN,
}); disabled: false,
text: "Check In",
} color: "btn-primary",
});
else if(activity === 1 && checkInTime !== null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){ } else if (
setStatus({ activity === 0 &&
status: "Check-Out", checkInTime !== null &&
action: ACTIONS.CHECK_OUT, checkOutTime === null &&
disabled: false, timeElapsed(checkInTime, THRESH_HOLD)
text: "Check Out", ) {
color: 'btn-primary', setStatus({
}); status: "Request Regularize",
}else if(activity === 1 && checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){ action: ACTIONS.REGULARIZATION,
setStatus({ disabled: false,
status: "Request Regularize", text: "Regularizes",
action: ACTIONS.REGULARIZATION, color: "btn-warning",
disabled: false, });
text: "Regularize", } else if (
color: 'btn-warning', activity === 1 &&
}); checkInTime !== null &&
} else if ( activity === 4 && checkInTime !== null && checkOutTime !== null && !timeElapsed( checkInTime, THRESH_HOLD ) ) checkOutTime === null &&
{ !timeElapsed(checkInTime, THRESH_HOLD)
) {
if ( activity === 4 && checkInTime !== null && checkOutTime !== null && new Date(checkOutTime).toDateString() !== new Date().toDateString()) setStatus({
{ status: "Check-Out",
setStatus( { action: ACTIONS.CHECK_OUT,
status: "Approved", disabled: false,
action: ACTIONS.APPROVED, text: "Check Out",
disabled: true, color: "btn-primary",
text: "Approved", });
color: 'btn-success', } else if (
} ); activity === 1 &&
} else checkInTime !== null &&
{ checkOutTime === null &&
setStatus( { timeElapsed(checkInTime, THRESH_HOLD)
status: "Check-In", ) {
action: ACTIONS.CHECK_IN, setStatus({
disabled: false, status: "Request Regularize",
text: "Check In", action: ACTIONS.REGULARIZATION,
color: 'btn-primary', disabled: false,
} ) text: "Regularize",
} color: "btn-warning",
} });
else if ( activity === 2 && checkInTime !== null ) } else if (
{ activity === 4 &&
setStatus({ checkInTime !== null &&
status: "Requested", checkOutTime !== null &&
action: ACTIONS.REQUESTED, !timeElapsed(checkInTime, THRESH_HOLD)
disabled: true, ) {
text: "Requested", if (
color: 'btn-info', activity === 4 &&
}); checkInTime !== null &&
}else if(activity === 5 && checkInTime !== null ){ checkOutTime !== null &&
new Date(checkOutTime).toDateString() !== new Date().toDateString()
) {
setStatus({
status: "Rejected",
action: ACTIONS.REJECTED,
disabled: true,
text: "Rejected",
color: 'btn-danger',
});
}else {
setStatus({ setStatus({
status: "Approved", status: "Approved",
action: ACTIONS.APPROVED, action: ACTIONS.APPROVED,
disabled: true, disabled: true,
text: "Approved", text: "Approved",
color: 'btn-success', color: "btn-success",
});
} else {
setStatus({
status: "Check-In",
action: ACTIONS.CHECK_IN,
disabled: false,
text: "Check In",
color: "btn-primary",
}); });
} }
} else if (activity === 2 && checkInTime !== null) {
setStatus({
status: "Requested",
action: ACTIONS.REQUESTED,
disabled: true,
text: "Requested",
color: "btn-info",
});
} else if (activity === 5 && checkInTime !== null) {
setStatus({
status: "Rejected",
action: ACTIONS.REJECTED,
disabled: true,
text: "Rejected",
color: "btn-danger",
});
} else {
setStatus({
status: "Approved",
action: ACTIONS.APPROVED,
disabled: true,
text: "Approved",
color: "btn-success",
});
}
}, [attendanceData]); }, [attendanceData]);
return status; return status;

45
src/pages/Activities/AttendancePage.jsx
View File

@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
const AttendancePage = () => { const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all"); const [activeTab, setActiveTab] = useState("all");
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
const loginUser = getCachedProfileData(); const loginUser = getCachedProfileData();
var selectedProject = useSelector((store) => store.localVariables.projectId); var selectedProject = useSelector((store) => store.localVariables.projectId);
const { projects, loading: projectLoading } = useProjects(); const { projects, loading: projectLoading } = useProjects();
@ -86,6 +86,10 @@ const AttendancePage = () => {
}); });
}; };
const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked);
};
useEffect(() => { useEffect(() => {
if (modelConfig !== null) { if (modelConfig !== null) {
openModel(); openModel();
@ -100,6 +104,17 @@ const AttendancePage = () => {
dispatch(setProjectId(loginUser?.projects[0])); dispatch(setProjectId(loginUser?.projects[0]));
} }
}, [selectedProject, loginUser?.projects]); }, [selectedProject, loginUser?.projects]);
// Filter attendance data based on the toggle
// const filteredAttendance = showOnlyCheckout
// ? attendances?.filter(
// (att) => att?.checkOutTime !== null && att?.checkInTime !== null
// )
// : attendances;
const filteredAttendance = showOnlyCheckout
? attendances?.filter((att) => att?.checkOutTime === null)
: attendances;
return ( return (
<> <>
{isCreateModalOpen && modelConfig && ( {isCreateModalOpen && modelConfig && (
@ -161,6 +176,7 @@ const AttendancePage = () => {
)} )}
</div> </div>
</ul> </ul>
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
<li className="nav-item"> <li className="nav-item">
<button <button
@ -170,7 +186,7 @@ const AttendancePage = () => {
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-home" data-bs-target="#navs-top-home"
> >
All Today's
</button> </button>
</li> </li>
<li className="nav-item"> <li className="nav-item">
@ -197,6 +213,26 @@ const AttendancePage = () => {
Regularization Regularization
</button> </button>
</li> </li>
<li
className={`nav-item ms-auto ${
activeTab === "regularization" ? "d-none" : ""
}`}
>
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
checked={showOnlyCheckout}
onChange={handleToggle}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label m-2">Pending Actions</span>
</label>
</li>
</ul> </ul>
<div className="tab-content attedanceTabs py-2"> <div className="tab-content attedanceTabs py-2">
{projectLoading && <span>Loading..</span>} {projectLoading && <span>Loading..</span>}
@ -204,12 +240,12 @@ const AttendancePage = () => {
{activeTab === "all" && ( {activeTab === "all" && (
<> <>
{!projectLoading && attendances.length === 0 && ( {!projectLoading && filteredAttendance?.length === 0 && (
<p>No Employee assigned yet.</p> <p>No Employee assigned yet.</p>
)} )}
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Attendance <Attendance
attendance={attendances} attendance={filteredAttendance}
handleModalData={handleModalData} handleModalData={handleModalData}
getRole={getRole} getRole={getRole}
/> />
@ -222,6 +258,7 @@ const AttendancePage = () => {
<AttendanceLog <AttendanceLog
handleModalData={handleModalData} handleModalData={handleModalData}
projectId={selectedProject} projectId={selectedProject}
showOnlyCheckout={showOnlyCheckout}
/> />
</div> </div>
)} )}

7
src/pages/Activities/DailyTask.jsx
View File

@ -187,6 +187,13 @@ const DailyTask = () => {
</td> </td>
</tr> </tr>
)} )}
{!task_loading && TaskList.length === 0 && (
<tr>
<td colSpan={7} className="text-center">
<p>No Reports Found</p>
</td>
</tr>
)}
{dates.map((date, i) => { {dates.map((date, i) => {
return ( return (
<React.Fragment key={i}> <React.Fragment key={i}>