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 [loading, setLoading] = useState(false);
const navigate = useNavigate();
const [todayDate, setTodayDate] = useState(new Date());
// Ensure attendance is an array
const attendanceList = Array.isArray(attendance) ? attendance : [];
@ -42,6 +43,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
<>
<table className="table ">
<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>
<th className="border-top-0" colSpan={2}>
Name
@ -127,9 +135,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${
currentPage === 1 ? "disabled" : ""
}`}
className={`page-item ${currentPage === 1 ? "disabled" : ""
}`}
>
<button
className="page-link btn-xs"
@ -141,9 +148,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
className="page-link "
@ -154,9 +160,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
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 Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
@ -7,20 +7,35 @@ import { useSelector, useDispatch } from "react-redux";
import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
import DateRangePicker from "../common/DateRangePicker";
import { getCachedData } from "../../slices/apiDataManager";
import usePagination from "../../hooks/usePagination";
import {ITEMS_PER_PAGE} from "../../utils/constants";
const AttendanceLog = ({ handleModalData, projectId }) => {
const [attendances, setAttendnaces] = useState([]);
const [selectedDate, setSelectedDate] = useState("");
const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1);
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 dispatch = useDispatch();
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [isRefreshing, setIsRefreshing] = useState(true);
const [dates, setDates] = useState([]);
const [isRefreshing, setIsRefreshing] = useState(false);
const [processedData, setProcessedData] = useState([]);
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) => {
if (!dateStr) return false;
@ -42,59 +57,68 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
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(() => {
const { startDate, endDate } = dateRange;
if (startDate && endDate) {
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
}
}, [dateRange, projectId, isRefreshing]);
dispatch(
fetchAttendanceData({
projectId,
fromDate: startDate,
toDate: endDate,
})
);
setIsRefreshing(false);
}, [dateRange, projectId, dispatch, isRefreshing]);
useEffect(() => {
const attendanceDate = [
...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
].sort((a, b) => new Date(b) - new Date(a));
if (attendanceDate != dates) {
setDates(attendanceDate);
}
}, [data]);
const filteredData = showOnlyCheckout
? data.filter((item) => item.checkOutTime === null)
: data;
const group1 = filteredData
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
.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 (
<>
@ -103,15 +127,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
id="DataTables_Table_0_length"
>
<div className="col-md-3 my-0 ">
<DateRangePicker onRangeChange={setDateRange} />
<DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
</div>
<div className="col-md-2 m-0 text-end">
<i
className={`bx bx-refresh cursor-pointer fs-4 ${
loading ? "spin" : ""
}`}
className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
}`}
title="Refresh"
onClick={() => setIsRefreshing(!isRefreshing)}
onClick={() => setIsRefreshing(true)}
/>
</div>
</div>
@ -125,8 +148,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</th>
<th className="border-top-1">Date</th>
<th>
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
Check-In
<i className="bx bxs-down-arrow-alt text-success"></i> Check-In
</th>
<th>
<i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@ -135,107 +157,96 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
</tr>
</thead>
<tbody>
{loading && <td colSpan={5}>Loading...</td>}
{dates.map((date, i) => {
return (
<React.Fragment key={i}>
{currentItems.some(
(item) => item.checkInTime.split("T")[0] === date
) && (
<tr className="table-row-header">
<td colSpan={7} className="text-start">
<strong>{date}</strong>
</td>
</tr>
)}
{currentItems
?.filter((item) => item.checkInTime.includes(date))
.map((attendance, index) => (
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a
href="#"
className="text-heading text-truncate"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{" "}
{moment(attendance.checkInTime).format(
"DD-MMM-YYYY"
)}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime
? convertShortTime(attendance.checkOutTime)
: "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={currentDate}
/>
</td>
</tr>
))}
</React.Fragment>
{(loading || isRefreshing) && (
<tr>
<td colSpan={6}>Loading...</td>
</tr>
)}
{!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
const previousAttendance = arr[index - 1];
const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
if (!previousDate || currentDate !== previousDate) {
acc.push(
<tr key={`header-${currentDate}`} className="table-row-header">
<td colSpan={6} className="text-start">
<strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
</td>
</tr>
);
}
acc.push(
<tr key={index}>
<td colSpan={2}>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={attendance.firstName}
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a
href="#"
className="text-heading text-truncate"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
</a>
</div>
</div>
</td>
<td>
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
</td>
<td>{convertShortTime(attendance.checkInTime)}</td>
<td>
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
</td>
<td className="text-center">
<RenderAttendanceStatus
attendanceData={attendance}
handleModalData={handleModalData}
Tab={2}
currentDate={today.toLocaleDateString("en-CA")}
/>
</td>
</tr>
);
})}
return acc;
}, [])}
</tbody>
</table>
)}
{!loading && data.length === 0 && <span>No employee logs</span>}
{error && <td colSpan={5}>{error}</td>}
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
{error && !loading && !isRefreshing && (
<tr>
<td colSpan={6}>{error}</td>
</tr>
)}
</div>
{!loading && (
{!loading && !isRefreshing && processedData.length > 10 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button
className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)}
>
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
&laquo;
</button>
</li>
{[...Array(totalPages)].map((_, index) => (
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
key={pageNumber}
className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
>
<button
className="page-link "
onClick={() => paginate(index + 1)}
>
{index + 1}
<button className="page-link" onClick={() => paginate(pageNumber)}>
{pageNumber}
</button>
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
>
<button
className="page-link "
onClick={() => paginate(currentPage + 1)}
>
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
&raquo;
</button>
</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 { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
import showToast from "../../services/toastService";
import {checkIfCurrentDate} from "../../utils/dateUtils";
import { checkIfCurrentDate } from "../../utils/dateUtils";
const schema = z.object({
markTime: z.string().nonempty({message:"Time is required"}),
description:z.string().max(200,"description should less than 200 chracters").optional()
markTime: z.string().nonempty({ message: "Time is required" }),
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 coords = usePositionTracker();
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 {
register,
@ -29,60 +38,78 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
reset,
setValue,
} = useForm({
resolver: zodResolver( schema ),
mode:"onChange"
resolver: zodResolver(schema),
mode: "onChange"
});
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}
if(modeldata.forWhichTab === 1){
handleSubmitForm(record)
} else
{
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 }
if (modeldata.forWhichTab === 1) {
handleSubmitForm(record)
} else {
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
// {
dispatch(markAttendance(record))
.unwrap()
.then( ( data ) =>
{
showToast("Attendance Marked Successfully", "success");
})
.catch( ( error ) =>
{
// if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
// {
dispatch(markAttendance(record))
.unwrap()
.then((data) => {
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()
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<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>}
<label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
{modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
</label>
</div>
<div className="col-6 col-md-6 ">
<label className="form-label" htmlFor="checkInDate">
{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 className="col-12 col-md-12">
<label className="form-label" htmlFor="description">
Description
@ -91,7 +118,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
rows="3"
name="description"
className="form-control"
{...register( "description" )}
{...register("description")}
maxLength={200}
/>
{errors.description && (
@ -99,7 +126,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
@ -109,7 +136,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={()=>closeModal()}
onClick={() => closeModal()}
>
Cancel
</button>
@ -124,15 +151,15 @@ export default CheckCheckOutmodel;
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 coords = usePositionTracker();
const {
register,
handleSubmit,
@ -146,22 +173,21 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
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)
closeModal()
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12">
<p>Regularize Attendance</p>
<p>Regularize Attendance</p>
<label className="form-label" htmlFor="description">
Description
</label>
@ -176,7 +202,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
)}
</div>
<div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading ? "Please Wait..." : "Submit"}
@ -186,7 +212,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close"
onClick={()=>closeModal()}
onClick={() => closeModal()}
>
Cancel
</button>

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

@ -1,271 +1,50 @@
import React, { useState } from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import React from "react";
import {
useDashboard_Data,
useDashboardProjectsCardData,
useDashboardTeamsCardData,
useDashboardTasksCardData,
} 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 { 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 { teamsCardData } = useDashboardTeamsCardData();
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 (
<div className="container-xxl flex-grow-1 container-p-y">
<div className="row gy-4">
{/* Projects Card */}
<div className="col-sm-6 col-lg-4">
<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>
<Projects projectsCardData={projectsCardData} />
</div>
{/* Teams Card */}
<div className="col-sm-6 col-lg-4">
<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>
<Teams teamsCardData={teamsCardData} />
</div>
{/* Tasks Card */}
<div className="col-sm-6 col-lg-4">
<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>
<TasksCard tasksCardData={tasksCardData} />
</div>
{/* Bar Chart */}
{/* Bar Chart (Project Completion) */}
<div className="col-xxl-6 col-lg-6">
<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>
<ProjectCompletionChart />
</div>
{/* Line Chart */}
{/* Line Chart (Project Progress) */}
<div className="col-xxl-6 col-lg-6">
<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>
<ProjectProgressChart />
</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">
Profile
</small>
<ul className="list-unstyled my-3 py-1">
<ul className="list-unstyled my-3">
<li className="d-flex align-items-center mb-4">
<i className="bx bx-check"></i>
<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>{data.contactPerson}</span>
</li>
<li className="d-flex align-items-center mb-4">
<i className="bx bx-flag"></i>
<span className="fw-medium mx-2">Address:</span>{" "}
</li>
</ul>
{/* <small className="card-text text-uppercase text-muted small">
Contacts
</small> */}
<ul className="list-unstyled my-3 py-1">
{/* <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 className="d-flex flex-column align-items-start mb-4">
<div className="d-flex align-items-center">
<i className="bx bx-flag"></i>
<span className="fw-medium mx-2">Address:</span>
{data.projectAddress?.length <= 20 && (
<span>{data.projectAddress}</span>
)}
</div>
{data.projectAddress?.length > 20 && (
<div className="ms-4 text-start">{data.projectAddress}</div>
)}
</li>
</ul>
</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 { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
import { employee } from "../../data/masters";
import { useForm, Controller } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { getCachedData } from "../../slices/apiDataManager";
import { useProjects } from "../../hooks/useProjects";
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { TasksRepository } from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService";
const AssignRoleModel = ({ assignData, onClose }) => {
// Calculate maxPlanned based on assignData
const maxPlanned =
assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork;
// Zod schema for form validation
const schema = z.object({
selectedEmployees: z
.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" }),
plannedTask: z.preprocess(
(val) => parseInt(val, 10),
(val) => parseInt(val, 10), // Preprocess value to integer
z
.number({
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()
.positive({ message: "Planned task must be a positive number" })
.int() // Ensure it's an integer
.positive({ message: "Planned task must be a positive number" }) // Must be positive
.max(maxPlanned, {
// Max value validation
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(
(store) => store.localVariables.projectId
);
const { employees,loading:employeeLoading } = useEmployeesAllOrByProjectId(selectedProject,false);
const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
selectedProject,
false
);
const dispatch = useDispatch();
const { data, loading } = useMaster();
const { loading } = useMaster(); // Assuming this is for jobRoleData loading
const jobRoleData = getCachedData("Job Role");
// Local component states
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 {
handleSubmit,
control,
@ -56,74 +97,95 @@ const AssignRoleModel = ({ assignData, onClose }) => {
watch,
formState: { errors },
reset,
trigger, // <--- IMPORTANT: Destructure 'trigger' here
} = useForm({
defaultValues: {
selectedEmployees: [],
description: "",
plannedTask: "",
},
resolver: zodResolver(schema),
resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
});
const handleRoleChange = (event) => {
reset();
// setSelectedEmployees([]);
setSelectedRole(event.target.value);
};
// Handler for employee checkbox changes
const handleCheckboxChange = (event, user) => {
const isChecked = event.target.checked;
let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
const filteredEmployees =
selectedRole === "all"
? employees
: employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
const handleEmployeeSelection = (employeeId, field) => {
setSelectedEmployees((prevSelected) => {
let updatedSelection;
if (!prevSelected.includes(employeeId)) {
updatedSelection = [...prevSelected, employeeId];
} else {
updatedSelection = prevSelected.filter((id) => id !== employeeId);
if (isChecked) {
// Add employee if checked and not already in the list
if (!updatedSelectedEmployees.includes(user.id)) {
updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
}
field.onChange(updatedSelection);
return updatedSelection;
});
};
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");
} else {
// Remove employee if unchecked
updatedSelectedEmployees = updatedSelectedEmployees.filter(
(id) => id !== user.id
);
}
// 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(() => {
dispatch(changeMaster("Job Role"));
// Cleanup function to reset selected role when component unmounts or dispatch changes
return () => setSelectedRole("all");
}, [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 = () => {
reset();
onClose();
};
return (
<div
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}
aria-label="Close"
></button>
<div className="container my-1">
<div className="mb-">
<p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
{[
assignData?.building?.name,
assignData?.floor?.floorName,
assignData?.workArea?.areaName,
assignData?.workItem?.workItem?.activityMaster?.activityName,
]
.filter(Boolean)
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</p>
<div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
<p className="align-items-center flex-wrap m-0 ">Assign Task</p>
<div className="container my-3">
<div className="mb-1">
<p className="mb-0">
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
<p className="me-2 m-0 font-bold">Work Location :</p>
{[
assignData?.building?.name,
assignData?.floor?.floorName,
assignData?.workArea?.areaName,
assignData?.workItem?.workItem?.activityMaster
?.activityName,
]
.filter(Boolean) // Filter out any undefined/null values
.map((item, index, array) => (
<span key={index} className="d-flex align-items-center">
{item}
{index < array.length - 1 && (
<i className="bx bx-chevron-right mx-2"></i>
)}
</span>
))}
</span>
</p>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="row mb-1">
<div className="col-sm-4">
<div className="form-text text-start">Select Role</div>
<div className="input-group input-group-merge">
<select
className="form-select form-select-sm"
id="Role"
value={selectedRole}
onChange={handleRoleChange}
aria-label=""
>
{loading && data ? (
"Loading..."
) : (
<>
<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>
)}
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<div className="col-12">
<div className="form-text text-start">
<div className="d-flex align-items-center form-text fs-7">
<span className="text-dark">Select Team</span>
<div className="me-2">{displayedSelection}</div>
<a
className="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-filter bx-lg text-primary"></i>
</a>
<div className="row">
<div className="col-12 col-md-8 h-sm-25 overflow-auto">
{selectedRole !== "" && (
<div className="row mb-2">
<div className="col-sm-12">
<div className="row">
{filteredEmployees?.map((emp) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
return (
<div
key={emp.id}
className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
<ul className="dropdown-menu p-2 text-capitalize">
<li key="all">
<button
type="button"
className="dropdown-item py-1"
onClick={() =>
handleRoleChange({
target: { value: "all" },
})
}
>
<div className="form-check text-start p-0">
<div className="li-wrapper d-flex justify-content-start align-items-start">
All Roles
</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
name="selectedEmployees"
control={control}
render={({ field }) => (
<input
{...field}
className="form-check-input mx-2"
className="form-check-input me-1 mt-1"
type="checkbox"
id={`employee-${emp?.id}`}
value={emp.id}
checked={field.value.includes(
emp.id
)}
onChange={() => {
handleEmployeeSelection(
emp.id,
field
);
checked={field.value?.includes(emp.id)}
onChange={(e) => {
handleCheckboxChange(e, emp);
}}
/>
)}
/>
<div className="list-content">
<p
className=" mb-0"
style={{
fontSize: "12px",
fontWeight: "bolder",
}}
>
<div className="flex-grow-1">
<p className="mb-0" style={{ fontSize: "13px" }}>
{emp.firstName} {emp.lastName}
</p>
<small
className="lead"
style={{ fontSize: "10px" }}
className="text-muted"
style={{ fontSize: "11px" }}
>
{loading && (
<p
className="skeleton para"
style={{ height: "7px" }}
></p>
{loading ? (
<span className="placeholder-glow">
<span className="placeholder col-6"></span>
</span>
) : (
jobRole?.name || "Unknown Role"
)}
{data &&
!loading &&
(jobRole
? jobRole.name
: "Unknown Role")}
</small>
</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
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>
<div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-4 px-1">
<label className="form-text fs-6" for="inlineCheckbox1">
Pending Work
</label>
{!loading && errors.selectedEmployees && (
<div className="danger-text mt-1">
<p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
</div>
)}
{/* 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
className="form-check-label ms-2"
for="inlineCheckbox1"
className="form-text fs-7 m-1 text-lg text-dark"
htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
>
{assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</label>
</div>
<div className="form-check form-check-inline col-sm-2 col">
<label for="defaultFormControlInput" className="form-label">
Target
Description
</label>
<Controller
name="plannedTask"
name="description"
control={control}
render={({ field }) => (
<input
type="text"
className="form-control form-control-xs"
<textarea
{...field}
id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp"
className="form-control"
id="descriptionTextarea" // Changed id for better accessibility
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">
{errors.description.message}
</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">
Description
</label>
<Controller
name="description"
control={control}
render={({ field }) => (
<textarea
{...field}
className="form-control"
id="exampleFormControlTextarea1"
rows="2"
/>
)}
/>
{errors.description && (
<div className="danger-text">
{errors.description.message}
{/* Submit and Cancel buttons */}
<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>
)}
<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>
</form>
</div>
</div>
</div>
</div>
@ -398,4 +560,5 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div>
);
};
export default AssignRoleModel;

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

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

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

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

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

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

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

@ -148,7 +148,7 @@ const WorkItem = ({
<span className="fw-light">
{hasWorkItem
? NewWorkItem?.workItem?.activityMaster?.activityName ||
workItem.activityMaster?.activityName
workItem.activityMaster?.activityName
: "NA"}
</span>
</td>
@ -157,8 +157,8 @@ const WorkItem = ({
<td className="text-center d-sm-table-cell d-md-none">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
workItem?.completedWork ??
"NA"
: "NA"}
/{" "}
{hasWorkItem
@ -171,28 +171,22 @@ const WorkItem = ({
<span className="fw-light">
{hasWorkItem
? NewWorkItem?.workItem?.workCategoryMaster?.name ||
workItem.workCategoryMaster?.name ||
"NA"
workItem.workCategoryMaster?.name ||
"NA"
: "NA"}
</span>
</td>
{/* Planned - visible on medium and above */}
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.plannedWork ??
workItem?.plannedWork ??
"NA"
: "NA"}
</td>
{/* Completed - visible on medium and above */}
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"NA"
: "NA"}
{hasWorkItem ? (
`${NewWorkItem?.workItem?.completedWork ??
workItem?.completedWork ??
"0"}/${NewWorkItem?.workItem?.plannedWork ??
workItem?.plannedWork ??
"0"}`
) : (
"NA"
)}
</td>
{/* Progress Bar - always visible */}
@ -205,7 +199,7 @@ const WorkItem = ({
width: getProgress(
NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
NewWorkItem?.workItem?.completedWork ||
workItem?.completedWork
workItem?.completedWork
),
height: "5px",
}}
@ -266,7 +260,7 @@ const WorkItem = ({
></i>
<ul className="dropdown-menu dropdown-menu-start">
{!projectId && ManageTasks && PlannedWork !== CompletedWork && (
{!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
<li>
<a
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-content">
<div className="modal-header">
<div className="md-2 mb-1">
<div className="modal-header ">
<div className="md-2 mb-n5">
{(filteredData.length > 0 ||
allocationEmployeesData.length > 0)&& (
<div className="input-group">
@ -129,6 +129,11 @@ const MapUsers = ({
)}
</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">
<table
className="datatables-users table border-top dataTable no-footer dtr-column "
@ -136,7 +141,7 @@ const MapUsers = ({
aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
>
<thead></thead>
<tbody>
{employeeLoading && allocationEmployeesData.length === 0 && (
<p>Loading...</p>

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

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

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

@ -70,7 +70,9 @@ const CreateJobRole = ({onClose}) => {
const maxDescriptionLength = 255;
return (<>
<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">
<label className="form-label">Role</label>
<input type="text"

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

@ -96,7 +96,10 @@ const CreateRole = ({ modalType, onClose }) => {
return (
<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">
<label className="form-label">Role</label>
<input type="text"

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

@ -70,6 +70,9 @@ const CreateWorkCategory = ({onClose}) => {
const maxDescriptionLength = 255;
return (<>
<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">
<label className="form-label">Category Name</label>

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

@ -77,6 +77,9 @@ const EditJobRole = ({data,onClose}) => {
return (<>
<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">
<label className="form-label">Role</label>
<input type="text"

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

@ -146,7 +146,9 @@ const EditMaster = ({ master, onClose }) => {
return (
<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">
<label className="form-label">Role</label>
<input type="text"

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

@ -77,6 +77,10 @@ const EditWorkCategory = ({data,onClose}) => {
return (<>
<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">
<label className="form-label">Category Name</label>
<input type="text"

2
src/data/menuData.json
View File

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

224
src/hooks/useAttendanceStatus.js
View File

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

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

@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all");
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
const loginUser = getCachedProfileData();
var selectedProject = useSelector((store) => store.localVariables.projectId);
const { projects, loading: projectLoading } = useProjects();
@ -86,6 +86,10 @@ const AttendancePage = () => {
});
};
const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked);
};
useEffect(() => {
if (modelConfig !== null) {
openModel();
@ -100,6 +104,17 @@ const AttendancePage = () => {
dispatch(setProjectId(loginUser?.projects[0]));
}
}, [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 (
<>
{isCreateModalOpen && modelConfig && (
@ -161,6 +176,7 @@ const AttendancePage = () => {
)}
</div>
</ul>
<ul className="nav nav-tabs" role="tablist">
<li className="nav-item">
<button
@ -170,7 +186,7 @@ const AttendancePage = () => {
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
>
All
Today's
</button>
</li>
<li className="nav-item">
@ -197,6 +213,26 @@ const AttendancePage = () => {
Regularization
</button>
</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>
<div className="tab-content attedanceTabs py-2">
{projectLoading && <span>Loading..</span>}
@ -204,12 +240,12 @@ const AttendancePage = () => {
{activeTab === "all" && (
<>
{!projectLoading && attendances.length === 0 && (
{!projectLoading && filteredAttendance?.length === 0 && (
<p>No Employee assigned yet.</p>
)}
<div className="tab-pane fade show active py-0">
<Attendance
attendance={attendances}
attendance={filteredAttendance}
handleModalData={handleModalData}
getRole={getRole}
/>
@ -222,6 +258,7 @@ const AttendancePage = () => {
<AttendanceLog
handleModalData={handleModalData}
projectId={selectedProject}
showOnlyCheckout={showOnlyCheckout}
/>
</div>
)}

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

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