Compare commits
No commits in common. "7c9607cb780a196f19573d55d13c4c95f547fc37" and "41f3628d45fccb001c8dbfd0978b895002b466c3" have entirely different histories.
7c9607cb78
...
41f3628d45
@ -5,15 +5,9 @@ import { convertShortTime } from "../../utils/dateUtils";
|
||||
import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import {ITEMS_PER_PAGE} from "../../utils/constants";
|
||||
|
||||
const Attendance = ({
|
||||
attendance,
|
||||
getRole,
|
||||
handleModalData,
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [todayDate, setTodayDate] = useState(new Date());
|
||||
@ -25,7 +19,7 @@ const Attendance = ({
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = (a.firstName + a.lastName).toLowerCase();
|
||||
const nameB = (b.firstName + b.lastName).toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
// Filter employees based on activity
|
||||
@ -45,47 +39,41 @@ const Attendance = ({
|
||||
return (
|
||||
<>
|
||||
<div className="table-responsive text-nowrap">
|
||||
<div className="d-flex text-start align-items-center py-2">
|
||||
<strong>Date : {todayDate.toLocaleDateString("en-GB")}</strong>
|
||||
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
||||
/>
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
{attendance && attendance.length > 0 && (
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr className="border-top-1">
|
||||
<th colSpan={2}>Name</th>
|
||||
<th>Role</th>
|
||||
<th>
|
||||
<tr className="border-none" style={{ textAlign: 'left' }}>
|
||||
<td style={{ borderBottom: 'none' }}>
|
||||
<strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
|
||||
</td>
|
||||
<td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-0">Role</th>
|
||||
<th className="border-top-0">
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>
|
||||
Check-In
|
||||
</th>
|
||||
<th>
|
||||
<th className="border-top-0">
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||
</th>
|
||||
<th>Actions</th>
|
||||
<th className="border-top-0">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 ">
|
||||
<tbody className="table-border-bottom-0">
|
||||
{currentItems &&
|
||||
currentItems
|
||||
.sort((a, b) => {
|
||||
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
|
||||
const checkInA = a?.checkInTime
|
||||
const checkInA = a.checkInTime
|
||||
? new Date(a.checkInTime)
|
||||
: new Date(0);
|
||||
const checkInB = b?.checkInTime
|
||||
const checkInB = b.checkInTime
|
||||
? new Date(b.checkInTime)
|
||||
: new Date(0);
|
||||
return checkInB - checkInA; // Sort in descending order of checkInTime
|
||||
@ -143,13 +131,12 @@ const Attendance = ({
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{!loading > 20 && (
|
||||
{!loading>20 && (
|
||||
<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"
|
||||
@ -161,9 +148,8 @@ const Attendance = ({
|
||||
{[...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 "
|
||||
@ -174,9 +160,8 @@ const Attendance = ({
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
|
||||
@ -11,6 +11,7 @@ import { getCachedData } from "../../slices/apiDataManager";
|
||||
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;
|
||||
@ -20,21 +21,10 @@ const usePagination = (data, itemsPerPage) => {
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return {
|
||||
currentPage,
|
||||
totalPages: maxPage,
|
||||
currentItems,
|
||||
paginate,
|
||||
resetPage,
|
||||
};
|
||||
return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
|
||||
};
|
||||
|
||||
const AttendanceLog = ({
|
||||
handleModalData,
|
||||
projectId,
|
||||
setshowOnlyCheckout,
|
||||
showOnlyCheckout,
|
||||
}) => {
|
||||
const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading, error } = useSelector((store) => store.attendanceLogs);
|
||||
@ -64,7 +54,7 @@ const AttendanceLog = ({
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -93,24 +83,14 @@ const AttendanceLog = ({
|
||||
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 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 group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
|
||||
|
||||
const sortedList = [
|
||||
...group1,
|
||||
...group2,
|
||||
...group3,
|
||||
...group4,
|
||||
...group5,
|
||||
...group6,
|
||||
];
|
||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||
|
||||
// Group by date
|
||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||
@ -123,22 +103,17 @@ const AttendanceLog = ({
|
||||
}, {});
|
||||
|
||||
// Sort dates in descending order
|
||||
const sortedDates = Object.keys(groupedByDate).sort(
|
||||
(a, b) => new Date(b) - new Date(a)
|
||||
);
|
||||
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, 20);
|
||||
const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
|
||||
processedData,
|
||||
20
|
||||
);
|
||||
|
||||
// Reset to the first page whenever processedData changes (due to switch on/off)
|
||||
useEffect(() => {
|
||||
@ -147,89 +122,57 @@ const AttendanceLog = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="d-flex align-items-center my-0 ">
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
defaultStartDate={yesterday}
|
||||
/>
|
||||
<div className="form-check form-switch text-start m-0 ms-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showOnlyCheckout}
|
||||
onChange={(e) => setshowOnlyCheckout(e.target.checked)}
|
||||
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<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 || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
<label className="form-check-label ms-0">Show Pending</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-2 m-0 text-end">
|
||||
<i
|
||||
className={`bx bx-refresh cursor-pointer fs-4 ${
|
||||
loading || isRefreshing ? "spin" : ""
|
||||
}`}
|
||||
title="Refresh"
|
||||
onClick={() => setIsRefreshing(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="table-responsive text-nowrap"
|
||||
style={{ minHeight: "250px" }}
|
||||
>
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<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
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(loading || isRefreshing) && (
|
||||
<div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
|
||||
{data && data.length > 0 && (
|
||||
<table className="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={6}>Loading...</td>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<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
|
||||
</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
)}
|
||||
{!loading &&
|
||||
!isRefreshing &&
|
||||
paginatedAttendances.reduce((acc, attendance, index, arr) => {
|
||||
const currentDate = moment(
|
||||
attendance.checkInTime || attendance.checkOutTime
|
||||
).format("YYYY-MM-DD");
|
||||
</thead>
|
||||
<tbody>
|
||||
{(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;
|
||||
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"
|
||||
>
|
||||
<tr key={`header-${currentDate}`} className="table-row-header">
|
||||
<td colSpan={6} className="text-start">
|
||||
<strong>
|
||||
{moment(currentDate).format("DD-MM-YYYY")}
|
||||
</strong>
|
||||
<strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@ -243,7 +186,10 @@ const AttendanceLog = ({
|
||||
lastName={attendance.lastName}
|
||||
/>
|
||||
<div className="d-flex flex-column">
|
||||
<a href="#" className="text-heading text-truncate">
|
||||
<a
|
||||
href="#"
|
||||
className="text-heading text-truncate"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{attendance.firstName} {attendance.lastName}
|
||||
</span>
|
||||
@ -252,15 +198,11 @@ const AttendanceLog = ({
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{moment(
|
||||
attendance.checkInTime || attendance.checkOutTime
|
||||
).format("DD-MMM-YYYY")}
|
||||
{moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>{convertShortTime(attendance.checkInTime)}</td>
|
||||
<td>
|
||||
{attendance.checkOutTime
|
||||
? convertShortTime(attendance.checkOutTime)
|
||||
: "--"}
|
||||
{attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
@ -274,55 +216,40 @@ const AttendanceLog = ({
|
||||
);
|
||||
return acc;
|
||||
}, [])}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && (
|
||||
<span>No employee logs</span>
|
||||
)}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
)}
|
||||
{!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
|
||||
{error && !loading && !isRefreshing && (
|
||||
<tr>
|
||||
<td colSpan={6}>{error}</td>
|
||||
</tr>
|
||||
)}
|
||||
</div>
|
||||
{!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)}
|
||||
>
|
||||
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map(
|
||||
(pageNumber) => (
|
||||
<li
|
||||
key={pageNumber}
|
||||
className={`page-item ${
|
||||
currentPage === pageNumber ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(pageNumber)}
|
||||
>
|
||||
{pageNumber}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
|
||||
<li
|
||||
key={pageNumber}
|
||||
className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
|
||||
>
|
||||
<button className="page-link" onClick={() => paginate(pageNumber)}>
|
||||
{pageNumber}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
|
||||
>
|
||||
<button className="page-link" onClick={() => paginate(currentPage + 1)}>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
@ -333,4 +260,4 @@ const AttendanceLog = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default AttendanceLog;
|
||||
export default AttendanceLog;
|
||||
@ -20,7 +20,7 @@ const Regularization = ({ handleRequest }) => {
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
const filteredData = [...regularizesList]?.sort(sortByName);
|
||||
|
||||
|
||||
@ -510,7 +510,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
Select Role
|
||||
</option>
|
||||
{[...job_role]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item.id}>
|
||||
{item?.name}{" "}
|
||||
|
||||
@ -273,7 +273,7 @@ const EditActivityModal = ({
|
||||
activities
|
||||
.slice()
|
||||
.sort((a, b) =>
|
||||
(a.activityName || "")?.localeCompare(
|
||||
(a.activityName || "").localeCompare(
|
||||
b.activityName || ""
|
||||
)
|
||||
)
|
||||
@ -312,7 +312,7 @@ const EditActivityModal = ({
|
||||
categories
|
||||
.slice()
|
||||
.sort((a, b) =>
|
||||
(a.name || "")?.localeCompare(
|
||||
(a.name || "").localeCompare(
|
||||
b.name || ""
|
||||
)
|
||||
)
|
||||
|
||||
@ -140,7 +140,7 @@ const FloorModel = ({
|
||||
buildings
|
||||
.filter((building) => building?.name)
|
||||
.sort((a, b) =>
|
||||
(a.name || "")?.localeCompare(b.name || "")
|
||||
(a.name || "").localeCompare(b.name || "")
|
||||
)
|
||||
.map((building) => (
|
||||
<option key={building.id} value={building.id}>
|
||||
@ -172,7 +172,7 @@ const FloorModel = ({
|
||||
[...selectedBuilding.floors]
|
||||
.filter((floor) => floor?.floorName)
|
||||
.sort((a, b) =>
|
||||
(a.floorName || "")?.localeCompare(
|
||||
(a.floorName || "").localeCompare(
|
||||
b.floorName || ""
|
||||
)
|
||||
)
|
||||
|
||||
@ -159,7 +159,7 @@ const TaskModel = ({
|
||||
const newCategories = categories?.slice()?.sort((a, b) => {
|
||||
const nameA = a?.name || "";
|
||||
const nameB = b?.name || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
setCategoryData(newCategories);
|
||||
setSelectedCategory(newCategories[0])
|
||||
@ -230,7 +230,7 @@ const TaskModel = ({
|
||||
(floor) =>
|
||||
floor?.floorName && Array.isArray(floor.workAreas)
|
||||
)
|
||||
?.sort((a, b) => a.floorName?.localeCompare(b.floorName))
|
||||
?.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
?.map((floor) => (
|
||||
<option key={floor.id} value={floor.id}>
|
||||
{floor.floorName} - ({floor.workAreas.length} Work
|
||||
@ -263,7 +263,7 @@ const TaskModel = ({
|
||||
<option value="0">Select Work Area</option>
|
||||
{selectedFloor.workAreas
|
||||
?.filter((workArea) => workArea?.areaName)
|
||||
?.sort((a, b) => a.areaName?.localeCompare(b.areaName))
|
||||
?.sort((a, b) => a.areaName.localeCompare(b.areaName))
|
||||
?.map((workArea) => (
|
||||
<option key={workArea.id} value={workArea.id}>
|
||||
{workArea.areaName}
|
||||
@ -299,7 +299,7 @@ const TaskModel = ({
|
||||
?.sort((a, b) => {
|
||||
const nameA = a?.activityName || "";
|
||||
const nameB = b?.activityName || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
})
|
||||
?.map((activity) => (
|
||||
<option key={activity.id} value={activity.id}>
|
||||
|
||||
@ -197,7 +197,7 @@ const WorkAreaModel = ({
|
||||
?.sort((a, b) => {
|
||||
const nameA = a.floorName || "";
|
||||
const nameB = b.floorName || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
})
|
||||
?.map((floor) => (
|
||||
<option key={floor.id} value={floor.id}>
|
||||
@ -231,7 +231,7 @@ const WorkAreaModel = ({
|
||||
?.sort((a, b) => {
|
||||
const nameA = a.areaName || "";
|
||||
const nameB = b.areaName || "";
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
})
|
||||
?.map((workArea) => (
|
||||
<option key={workArea.id} value={workArea.id}>
|
||||
|
||||
@ -43,12 +43,8 @@
|
||||
}
|
||||
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
.img-preview img{
|
||||
width: 100%;
|
||||
height: 100%
|
||||
height: 500px;
|
||||
background-color: #E9E9E9;
|
||||
text-align: center;
|
||||
}
|
||||
@ -143,8 +143,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const fetchData = async (showInactive) => {
|
||||
if ( projectId )
|
||||
{
|
||||
if (projectId) {
|
||||
const Employees_cache = getCachedData("employeeListByProject");
|
||||
if (!Employees_cache || Employees_cache.projectId !== projectId) {
|
||||
setLoading(true);
|
||||
@ -167,11 +166,18 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
|
||||
setEmployees(Employees_cache.data);
|
||||
setLoading(false);
|
||||
}
|
||||
} else
|
||||
{
|
||||
} else {
|
||||
const cacheKey = showInactive
|
||||
? "allInactiveEmployeeList"
|
||||
: "allEmployeeList";
|
||||
const employeesCache = getCachedData(cacheKey);
|
||||
|
||||
if (employeesCache) {
|
||||
setEmployees(employeesCache.data);
|
||||
setLoading(false);
|
||||
} else {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await EmployeeRepository.getAllEmployeeList(
|
||||
@ -184,7 +190,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
|
||||
setError("Failed to fetch data.");
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ export const useProjects = () => {
|
||||
const filterProjects = (projectsList) => {
|
||||
return projectsList
|
||||
.filter((proj) => projectIds.includes(String(proj.id)))
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name));
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
|
||||
const projects_cache = getCachedData("projectslist");
|
||||
|
||||
@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const AttendancePage = () => {
|
||||
const [activeTab, setActiveTab] = useState("all");
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState();
|
||||
const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
|
||||
const loginUser = getCachedProfileData();
|
||||
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
@ -112,7 +112,7 @@ const AttendancePage = () => {
|
||||
// )
|
||||
// : attendances;
|
||||
const filteredAttendance = showOnlyCheckout
|
||||
? attendances?.filter((att) => att?.checkInTime !== null && att?.checkOutTime === null)
|
||||
? attendances?.filter((att) => att?.checkOutTime === null)
|
||||
: attendances;
|
||||
|
||||
return (
|
||||
@ -230,8 +230,6 @@ const AttendancePage = () => {
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
getRole={getRole}
|
||||
setshowOnlyCheckout={setShowOnlyCheckout}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
@ -242,7 +240,6 @@ const AttendancePage = () => {
|
||||
<AttendanceLog
|
||||
handleModalData={handleModalData}
|
||||
projectId={selectedProject}
|
||||
setshowOnlyCheckout={setShowOnlyCheckout}
|
||||
showOnlyCheckout={showOnlyCheckout}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -181,7 +181,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
(c.bucketIds || []).some((id) => selectedBucketIds.includes(id));
|
||||
|
||||
return matchesSearch && matchesCategory && matchesBucket;
|
||||
}).sort((a, b) => a?.name?.localeCompare(b.name));
|
||||
}).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [
|
||||
ContactList,
|
||||
searchText,
|
||||
|
||||
@ -42,7 +42,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
const sortByName = (a, b) => {
|
||||
const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
|
||||
const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const group1 = data
|
||||
|
||||
@ -9,7 +9,7 @@ import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { hasUserPermission } from "../../utils/authUtils";
|
||||
import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
|
||||
import { MANAGE_EMPLOYEES } from "../../utils/constants";
|
||||
import { clearCacheKey } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import SuspendEmp from "../../components/Employee/SuspendEmp";
|
||||
@ -29,9 +29,10 @@ const EmployeeList = () => {
|
||||
const [selectedProject, setSelectedProject] = useState(() => selectedProjectId || "");
|
||||
const { projects, loading: projectLoading } = useProjects();
|
||||
const [showInactive, setShowInactive] = useState(false);
|
||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||
const [showAllEmployees, setShowAllEmployees] = useState(false); // New state for "All Employee"
|
||||
const Manage_Employee = useHasUserPermission(MANAGE_EMPLOYEES);
|
||||
|
||||
// Modify the hook to conditionally pass selectedProject or null based on showAllEmployees
|
||||
const { employees, loading, setLoading, error, recallEmployeeData } =
|
||||
useEmployeesAllOrByProjectId(showAllEmployees ? null : selectedProject, showInactive);
|
||||
const [projectsList, setProjectsList] = useState(projects || []);
|
||||
@ -39,7 +40,7 @@ const EmployeeList = () => {
|
||||
const [employeeList, setEmployeeList] = useState([]);
|
||||
const [modelConfig, setModelConfig] = useState();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage] = useState(ITEMS_PER_PAGE);
|
||||
const [itemsPerPage] = useState(20);
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
@ -85,7 +86,7 @@ const EmployeeList = () => {
|
||||
}`.toLowerCase();
|
||||
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
|
||||
}`.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
|
||||
setEmployeeList(sorted);
|
||||
@ -188,11 +189,10 @@ const EmployeeList = () => {
|
||||
recallEmployeeData(e.target.checked);
|
||||
};
|
||||
|
||||
// New handler for "All Employee" toggle
|
||||
const handleAllEmployeesToggle = (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
setShowInactive(false)
|
||||
setShowAllEmployees( isChecked );
|
||||
|
||||
setShowAllEmployees(isChecked);
|
||||
recallEmployeeData(showInactive, isChecked ? null : selectedProject);
|
||||
};
|
||||
|
||||
@ -304,7 +304,7 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
|
||||
{/* Show Inactive Employees Switch */}
|
||||
{showAllEmployees && (
|
||||
{!showAllEmployees && (
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -559,7 +559,7 @@ const EmployeeList = () => {
|
||||
</td>
|
||||
|
||||
<td className=" d-none d-md-table-cell">
|
||||
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
|
||||
{moment(item.joiningDate).format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? (
|
||||
|
||||
@ -34,7 +34,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
|
||||
if (!sortKey) return 0;
|
||||
const aValue = a[sortKey] || "";
|
||||
const bValue = b[sortKey] || "";
|
||||
return aValue?.localeCompare(bValue);
|
||||
return aValue.localeCompare(bValue);
|
||||
});
|
||||
|
||||
// Pagination logic
|
||||
|
||||
@ -50,7 +50,7 @@ const ProjectList = () => {
|
||||
.filter((statusId) => grouped[statusId])
|
||||
.flatMap((statusId) =>
|
||||
grouped[statusId].sort((a, b) =>
|
||||
a.name.toLowerCase()?.localeCompare(b.name.toLowerCase())
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user