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

All the changes of Search functionality in Attendance page.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-28 11:21:37 +05:30
parent 254aaf1977
commit 8b2aef8a52
8 changed files with 298 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,34 +6,27 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ITEMS_PER_PAGE } from "../../utils/constants"; import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useAttendance } from "../../hooks/useAttendance"; import { useAttendance } from "../../hooks/useAttendance"; // This hook is already providing data
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
const Attendance = ({ getRole, handleModalData }) => { const Attendance = ({ getRole, handleModalData, attendance: filteredAndSearchedAttendanceFromParent, showOnlyCheckout, setshowOnlyCheckout }) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [loading, setLoading] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const [todayDate, setTodayDate] = useState(new Date()); const [todayDate, setTodayDate] = useState(new Date());
const [ShowPending, setShowPending] = useState(false);
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const { const {
attendance,
loading: attLoading, loading: attLoading,
recall: attrecall, recall: attrecall,
isFetching isFetching
} = useAttendance(selectedProject); } = useAttendance(selectedProject); // Keep this hook to manage recall and fetching status
const filteredAttendance = ShowPending
? attendance?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
)
: attendance;
const attendanceList = Array.isArray(filteredAttendance) const attendanceList = Array.isArray(filteredAndSearchedAttendanceFromParent)
? filteredAttendance ? filteredAndSearchedAttendanceFromParent
: []; : [];
const sortByName = (a, b) => { const sortByName = (a, b) => {
@ -41,6 +34,7 @@ const Attendance = ({ getRole, handleModalData }) => {
const nameB = (b.firstName + b.lastName).toLowerCase(); const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA?.localeCompare(nameB); return nameA?.localeCompare(nameB);
}; };
const group1 = attendanceList const group1 = attendanceList
.filter((d) => d.activity === 1 || d.activity === 4) .filter((d) => d.activity === 1 || d.activity === 4)
.sort(sortByName); .sort(sortByName);
@ -48,41 +42,39 @@ const Attendance = ({ getRole, handleModalData }) => {
.filter((d) => d.activity === 0) .filter((d) => d.activity === 0)
.sort(sortByName); .sort(sortByName);
const filteredData = [...group1, ...group2]; const finalFilteredDataForPagination = [...group1, ...group2];
const { currentPage, totalPages, currentItems, paginate } = usePagination( const { currentPage, totalPages, currentItems, paginate } = usePagination(
filteredData, finalFilteredDataForPagination, // Use the data that's already been searched and grouped
ITEMS_PER_PAGE ITEMS_PER_PAGE
); );
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
if (selectedProject == msg.projectId) { if (selectedProject === msg.projectId) {
// const updatedAttendance = attendances.map((item) =>
// item.employeeId === msg.response.employeeId
// ? { ...item, ...msg.response }
// : item
// );
queryClient.setQueryData(["attendance", selectedProject], (oldData) => { queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
if (!oldData) { if (!oldData) {
queryClient.invalidateQueries({queryKey:["attendance"]}) queryClient.invalidateQueries({ queryKey: ["attendance"] });
}; return; // Exit to avoid mapping on undefined oldData
}
return oldData.map((record) => return oldData.map((record) =>
record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
); );
}); });
} }
}, },
[selectedProject, attrecall] [selectedProject, queryClient] // Added queryClient to dependencies
); );
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
if (attendances.some((item) => item.employeeId == msg.employeeId)) { if (attrecall) { // Check if attrecall function exists
attrecall(); attrecall();
} }
}, },
[selectedProject, attendance] [attrecall] // Dependency should be attrecall, not `selectedProject` or `attendance` here
); );
useEffect(() => { useEffect(() => {
eventBus.on("attendance", handler); eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler); return () => eventBus.off("attendance", handler);
@ -105,13 +97,14 @@ const Attendance = ({ getRole, handleModalData }) => {
role="switch" role="switch"
id="inactiveEmployeesCheckbox" id="inactiveEmployeesCheckbox"
disabled={isFetching} disabled={isFetching}
checked={ShowPending} checked={showOnlyCheckout} // Use prop for checked state
onChange={(e) => setShowPending(e.target.checked)} onChange={(e) => setshowOnlyCheckout(e.target.checked)} // Use prop for onChange
/> />
<label className="form-check-label ms-0">Show Pending</label> <label className="form-check-label ms-0">Show Pending</label>
</div> </div>
</div> </div>
{Array.isArray(attendance) && attendance.length > 0 ? ( {/* Use `filteredAndSearchedAttendanceFromParent` for the initial check of data presence */}
{Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length > 0 ? (
<> <>
<table className="table "> <table className="table ">
<thead> <thead>
@ -129,7 +122,7 @@ const Attendance = ({ getRole, handleModalData }) => {
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0 "> <tbody className="table-border-bottom-0 ">
{currentItems && {currentItems && currentItems.length > 0 ? ( // Check currentItems length before mapping
currentItems currentItems
.sort((a, b) => { .sort((a, b) => {
const checkInA = a?.checkInTime const checkInA = a?.checkInTime
@ -186,18 +179,22 @@ const Attendance = ({ getRole, handleModalData }) => {
/> />
</td> </td>
</tr> </tr>
))} ))
{!attendance && ( ) : (
<span className="text-secondary m-4">No employees assigned to the project!</span> <tr>
<td colSpan="6" className="text-center text-muted py-4">
No matching records found.
</td>
</tr>
)} )}
</tbody> </tbody>
</table> </table>
{!loading && filteredData.length > 20 && ( {!attLoading && finalFilteredDataForPagination.length > ITEMS_PER_PAGE && ( // Use the data before pagination for total count check
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li <li
className={`page-item ${ className={`page-item ${
currentPage === 1 ? "disabled" : "" currentPage === 1 ? "disabled" : ""
}`} }`}
> >
@ -243,18 +240,20 @@ const Attendance = ({ getRole, handleModalData }) => {
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<div className="text-muted"> <div className="text-muted">
{Array.isArray(attendance) {/* Check the actual prop passed for initial data presence */}
? "No employees assigned to the project" {Array.isArray(filteredAndSearchedAttendanceFromParent) && filteredAndSearchedAttendanceFromParent.length === 0
: "Attendance data unavailable"} ? ""
: "Attendance data unavailable."}
</div> </div>
)} )}
{currentItems?.length == 0 && attendance.length > 0 && ( {/* This condition should check `currentItems` or `finalFilteredDataForPagination` */}
<div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div> {currentItems?.length === 0 && finalFilteredDataForPagination.length > 0 && showOnlyCheckout && (
<div className="my-4"><span className="text-secondary">No Pending Record Available for your search!</span></div>
)} )}
</div> </div>
</> </>
); );
}; };
export default Attendance; export default Attendance;

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

@ -4,22 +4,19 @@ import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils"; import { convertShortTime } from "../../utils/dateUtils";
import RenderAttendanceStatus from "./RenderAttendanceStatus"; import RenderAttendanceStatus from "./RenderAttendanceStatus";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice"; // Make sure setAttendanceData is correctly imported import { fetchAttendanceData, setAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
import DateRangePicker from "../common/DateRangePicker"; import DateRangePicker from "../common/DateRangePicker";
import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useAttendancesLogs } from "../../hooks/useAttendance";
import { queryClient } from "../../layouts/AuthLayout";
// Custom hook for pagination
const usePagination = (data, itemsPerPage) => { const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
// Ensure data is an array before accessing length
const totalItems = Array.isArray(data) ? data.length : 0; const totalItems = Array.isArray(data) ? data.length : 0;
const maxPage = Math.ceil(totalItems / itemsPerPage); const maxPage = Math.ceil(totalItems / itemsPerPage);
const currentItems = useMemo(() => { const currentItems = useMemo(() => {
if (!Array.isArray(data) || data.length === 0) {
return [];
}
const startIndex = (currentPage - 1) * itemsPerPage; const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage; const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex); return data.slice(startIndex, endIndex);
@ -31,6 +28,7 @@ const usePagination = (data, itemsPerPage) => {
} }
}, [maxPage]); }, [maxPage]);
// Ensure resetPage is returned by the hook
const resetPage = useCallback(() => setCurrentPage(1), []); const resetPage = useCallback(() => setCurrentPage(1), []);
return { return {
@ -47,28 +45,12 @@ const AttendanceLog = ({
projectId, projectId,
setshowOnlyCheckout, setshowOnlyCheckout,
showOnlyCheckout, showOnlyCheckout,
searchQuery, searchQuery, // Prop for search query
}) => { }) => {
const selectedProject = useSelector( const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
(store) => store.localVariables.projectId
);
// Initialize date range with sensible defaults, e.g., last 7 days or current day
const defaultEndDate = moment().format("YYYY-MM-DD");
const defaultStartDate = moment().subtract(6, 'days').format("YYYY-MM-DD"); // Last 7 days including today
const [dateRange, setDateRange] = useState({
startDate: defaultStartDate,
endDate: defaultEndDate
});
const dispatch = useDispatch(); const dispatch = useDispatch();
const [loading, setLoading] = useState(false); const { data, loading, error } = useSelector((store) => store.attendanceLogs);
const [showPending,setShowPending] = useState(false) const [isRefreshing, setIsRefreshing] = useState(false);
const { data: attendanceLogsData, loading: logsLoading, isFetching: logsFetching } = useSelector(
(state) => state.attendanceLogs
);
const [isRefreshing, setIsRefreshing] = useState(false); // Local state for refresh spinner
const today = useMemo(() => { const today = useMemo(() => {
const d = new Date(); const d = new Date();
@ -79,25 +61,22 @@ const AttendanceLog = ({
const yesterday = useMemo(() => { const yesterday = useMemo(() => {
const d = new Date(); const d = new Date();
d.setDate(d.getDate() - 1); d.setDate(d.getDate() - 1);
d.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison
return d; return d;
}, []); }, []);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const isSameDay = (dateStr) => { const isSameDay = useCallback((dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() === today.getTime(); return d.getTime() === today.getTime();
}; }, [today]);
const isBeforeToday = (dateStr) => { const isBeforeToday = useCallback((dateStr) => {
if (!dateStr) return false; if (!dateStr) return false;
const d = new Date(dateStr); const d = new Date(dateStr);
d.setHours(0, 0, 0, 0); d.setHours(0, 0, 0, 0);
return d.getTime() < today.getTime(); return d.getTime() < today.getTime();
}; }, [today]);
const sortByName = useCallback((a, b) => { const sortByName = useCallback((a, b) => {
const nameA = `${a.firstName || ""} ${a.lastName || ""}`.toLowerCase(); const nameA = `${a.firstName || ""} ${a.lastName || ""}`.toLowerCase();
@ -105,7 +84,6 @@ const AttendanceLog = ({
return nameA.localeCompare(nameB); return nameA.localeCompare(nameB);
}, []); }, []);
// Effect to fetch attendance data when dateRange or projectId changes
useEffect(() => { useEffect(() => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
dispatch( dispatch(
@ -115,33 +93,40 @@ const AttendanceLog = ({
toDate: endDate, toDate: endDate,
}) })
); );
setIsRefreshing(false); // Reset refreshing state after fetch attempt setIsRefreshing(false);
}, [dateRange, projectId, dispatch, isRefreshing]); // isRefreshing is a dependency because it triggers a re-fetch }, [dateRange, projectId, dispatch, isRefreshing]);
const processedData = useMemo(() => { const processedData = useMemo(() => {
let filteredData = showOnlyCheckout // Use the prop directly let filteredData = showOnlyCheckout
? attendanceLogsData.filter((item) => item.checkOutTime === null) // Use attendanceLogsData ? data.filter((item) => item.checkOutTime === null)
: attendanceLogsData; // Use attendanceLogsData : data;
// Apply search query filter // Apply search query filter
if (searchQuery) { if (searchQuery) {
const lowerCaseSearchQuery = searchQuery.toLowerCase(); const lowerCaseSearchQuery = searchQuery.toLowerCase().trim(); // Trim whitespace
filteredData = filteredData.filter((att) => { filteredData = filteredData.filter((att) => {
// Construct a full name from available parts, filtering out null/undefined // Option 1: Combine firstName, middleName, lastName
const fullName = [att.firstName, att.middleName, att.lastName] const fullName = [att.firstName, att.middleName, att.lastName]
.filter(Boolean) // This removes null, undefined, or empty string parts .filter(Boolean) // This removes null, undefined, or empty string parts
.join(" ") .join(" ")
.toLowerCase(); .toLowerCase();
// Option 2: Check `employeeName` if it exists and is reliable
const employeeName = att.employeeName?.toLowerCase() || "";
// Option 3: Check `employeeId`
const employeeId = att.employeeId?.toLowerCase() || "";
// Check if the search query is included in any of the relevant fields
return ( return (
att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) || fullName.includes(lowerCaseSearchQuery) ||
att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) || employeeName.includes(lowerCaseSearchQuery) ||
fullName.includes(lowerCaseSearchQuery) employeeId.includes(lowerCaseSearchQuery)
); );
}); });
} }
// Grouping and sorting logic remains mostly the same, ensuring 'filteredData' is used
const group1 = filteredData const group1 = filteredData
.filter((d) => d.activity === 1 && isSameDay(d.checkInTime)) .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
.sort(sortByName); .sort(sortByName);
@ -172,10 +157,7 @@ const AttendanceLog = ({
// Group by date // Group by date
const groupedByDate = sortedList.reduce((acc, item) => { const groupedByDate = sortedList.reduce((acc, item) => {
// Use checkInTime for activity 1, and checkOutTime for others or if checkInTime is null const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
const dateString = item.activity === 1 ? item.checkInTime : item.checkOutTime;
const date = dateString ? moment(dateString).format("YYYY-MM-DD") : null;
if (date) { if (date) {
acc[date] = acc[date] || []; acc[date] = acc[date] || [];
acc[date].push(item); acc[date].push(item);
@ -183,78 +165,65 @@ const AttendanceLog = ({
return acc; return acc;
}, {}); }, {});
// Sort dates in descending order
const sortedDates = Object.keys(groupedByDate).sort( const sortedDates = Object.keys(groupedByDate).sort(
(a, b) => new Date(b) - new Date(a) (a, b) => new Date(b) - new Date(a)
); );
// Create the final sorted array // Create the final sorted array
return sortedDates.flatMap((date) => groupedByDate[date]); return sortedDates.flatMap((date) => groupedByDate[date]);
}, [attendanceLogsData, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]); }, [data, showOnlyCheckout, searchQuery, isSameDay, isBeforeToday, sortByName]);
const { const {
currentPage, currentPage,
totalPages, totalPages,
currentItems: paginatedAttendances, currentItems: paginatedAttendances,
paginate, paginate,
resetPage, resetPage, // Destructure resetPage here
} = usePagination(processedData, 20); } = usePagination(processedData, 20);
// Effect to reset pagination when search query or showOnlyCheckout changes // Effect to reset pagination when search query changes
useEffect(() => { useEffect(() => {
resetPage(); resetPage();
}, [searchQuery, showOnlyCheckout, resetPage]); }, [searchQuery, resetPage]); // Add resetPage to dependencies
// Handler for 'attendance_log' event from eventBus
// This will now trigger a re-fetch of data
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
// Check if the event is relevant to the current project and date range
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
const eventDate = (msg.response.checkInTime || msg.response.checkOutTime)?.substring(0, 10); const checkIn = msg.response.checkInTime.substring(0, 10);
// Only refetch if the event relates to the currently viewed project and date range
if ( if (
projectId === msg.projectId && projectId === msg.projectId &&
eventDate && startDate <= checkIn &&
eventDate >= startDate && // Ensure eventDate is within the current range checkIn <= endDate
eventDate <= endDate
) { ) {
// Trigger a re-fetch of attendance data to get the latest state const updatedAttendance = data.map((item) =>
dispatch( item.id === msg.response.id
fetchAttendanceData({ ? { ...item, ...msg.response }
projectId, : item
fromDate: startDate,
toDate: endDate,
})
); );
dispatch(setAttendanceData(updatedAttendance)); // Update Redux store
} }
}, },
[projectId, dateRange, dispatch] [projectId, dateRange, data, dispatch]
); );
useEffect(() => { useEffect(() => {
eventBus.on("attendance_log", handler); eventBus.on("attendance_log", handler);
return () => eventBus.off("attendance_log", handler); return () => eventBus.off("attendance_log", handler);
}, [handler]); }, [handler]);
// Handler for 'employee' event from eventBus (already triggers a refetch)
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
const { startDate, endDate } = dateRange; const { startDate, endDate } = dateRange;
if (data.some((item) => item.employeeId == msg.employeeId)) { dispatch(
// dispatch( fetchAttendanceData({
// fetchAttendanceData({ projectId,
// , fromDate: startDate,
// fromDate: startDate, toDate: endDate,
// toDate: endDate, })
// }) );
// );
refetch()
}
}, },
[selectedProject, dateRange, data] [projectId, dateRange, dispatch]
); );
useEffect(() => { useEffect(() => {
@ -262,11 +231,6 @@ const AttendanceLog = ({
return () => eventBus.off("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]); }, [employeeHandler]);
const handleRefreshClick = () => {
setIsRefreshing(true); // Set refreshing state to true
// The useEffect for fetching data will automatically trigger due to isRefreshing dependency
};
return ( return (
<> <>
<div <div
@ -276,14 +240,13 @@ const AttendanceLog = ({
<div className="d-flex align-items-center my-0 "> <div className="d-flex align-items-center my-0 ">
<DateRangePicker <DateRangePicker
onRangeChange={setDateRange} onRangeChange={setDateRange}
defaultStartDate={yesterday.toLocaleDateString("en-CA")} // Pass default as string YYYY-MM-DD defaultStartDate={yesterday}
/> />
<div className="form-check form-switch text-start m-0 ms-5"> <div className="form-check form-switch text-start m-0 ms-5">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
role="switch" role="switch"
disabled={logsFetching}
id="inactiveEmployeesCheckbox" id="inactiveEmployeesCheckbox"
checked={showOnlyCheckout} checked={showOnlyCheckout}
onChange={(e) => setshowOnlyCheckout(e.target.checked)} onChange={(e) => setshowOnlyCheckout(e.target.checked)}
@ -293,10 +256,10 @@ const AttendanceLog = ({
</div> </div>
<div className="col-md-2 m-0 text-end"> <div className="col-md-2 m-0 text-end">
<i <i
className={`bx bx-refresh cursor-pointer fs-4 ${logsLoading || isRefreshing ? "spin" : "" className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
}`} }`}
title="Refresh" title="Refresh"
onClick={handleRefreshClick} onClick={() => setIsRefreshing(true)}
/> />
</div> </div>
</div> </div>
@ -304,12 +267,7 @@ const AttendanceLog = ({
className="table-responsive text-nowrap" className="table-responsive text-nowrap"
style={{ minHeight: "200px", display: 'flex' }} style={{ minHeight: "200px", display: 'flex' }}
> >
{/* Conditional rendering for loading state */} {processedData && processedData.length > 0 ? (
{(logsLoading || isRefreshing) ? (
<div className="d-flex justify-content-center align-items-center text-muted w-100">
Loading...
</div>
) : processedData && processedData.length > 0 ? (
<table className="table mb-0"> <table className="table mb-0">
<thead> <thead>
<tr> <tr>
@ -328,84 +286,96 @@ const AttendanceLog = ({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{paginatedAttendances.reduce((acc, attendance, index, arr) => { {(loading || isRefreshing) && (
const currentDate = moment( <tr>
attendance.checkInTime || attendance.checkOutTime <td colSpan={6}>Loading...</td>
).format("YYYY-MM-DD"); </tr>
const previousAttendance = arr[index - 1]; )}
const previousDate = previousAttendance {!loading &&
? moment( !isRefreshing &&
previousAttendance.checkInTime || paginatedAttendances.reduce((acc, attendance, index, arr) => {
previousAttendance.checkOutTime const currentDate = moment(
).format("YYYY-MM-DD") attendance.checkInTime || attendance.checkOutTime
: null; ).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) { if (!previousDate || currentDate !== previousDate) {
acc.push(
<tr
key={`header-${currentDate}`}
className="table-row-header"
>
<td colSpan={6} className="text-start">
<strong>
{moment(currentDate).format("DD-MM-YYYY")}
</strong>
</td>
</tr>
);
}
acc.push( acc.push(
<tr <tr key={attendance.id || index}>
key={`header-${currentDate}`} <td colSpan={2}>
className="table-row-header" <div className="d-flex justify-content-start align-items-center">
> <Avatar
<td colSpan={6} className="text-start"> firstName={attendance.firstName}
<strong> lastName={attendance.lastName}
{moment(currentDate).format("DD-MM-YYYY")} />
</strong> <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> </td>
</tr> </tr>
); );
} return acc;
acc.push( }, [])}
<tr key={attendance.id || 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> </tbody>
</table> </table>
) : ( ) : (
<div !loading &&
className="d-flex justify-content-center align-items-center text-muted w-100" !isRefreshing && (
style={{ height: "200px" }} // Added height for better visual during no data <div
> className="d-flex justify-content-center align-items-center text-muted"
No employee logs. style={{
</div> width: "100%",
}}
>
No employee logs.
</div>
)
)} )}
</div> </div>
{!logsLoading && !isRefreshing && processedData.length > 20 && ( {!loading && !isRefreshing && processedData.length > 20 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1"> <ul className="pagination pagination-sm justify-content-end py-1">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
@ -420,9 +390,8 @@ const AttendanceLog = ({
(pageNumber) => ( (pageNumber) => (
<li <li
key={pageNumber} key={pageNumber}
className={`page-item ${ className={`page-item ${currentPage === pageNumber ? "active" : ""
currentPage === pageNumber ? "active" : "" }`}
}`}
> >
<button <button
className="page-link" className="page-link"
@ -434,9 +403,8 @@ const AttendanceLog = ({
) )
)} )}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""
currentPage === totalPages ? "disabled" : "" }`}
}`}
> >
<button <button
className="page-link" className="page-link"
@ -452,4 +420,4 @@ const AttendanceLog = ({
); );
}; };
export default AttendanceLog; export default AttendanceLog;

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

@ -8,6 +8,7 @@ import { useDispatch, useSelector } from "react-redux";
import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice"; import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { checkIfCurrentDate } from "../../utils/dateUtils"; import { checkIfCurrentDate } from "../../utils/dateUtils";
import { useMarkAttendance } from "../../hooks/useAttendance";
// const schema = z.object({ // const schema = z.object({

129
src/components/Activities/Regularization.jsx
View File

@ -7,55 +7,47 @@ import { useRegularizationRequests } from "../../hooks/useAttendance";
import moment from "moment"; import moment from "moment";
import usePagination from "../../hooks/usePagination"; import usePagination from "../../hooks/usePagination";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import { cacheData, clearCacheKey } from "../../slices/apiDataManager"; import { cacheData } from "../../slices/apiDataManager";
import { useQueryClient } from "@tanstack/react-query";
const Regularization = ({ handleRequest }) => { const Regularization = ({ handleRequest, searchQuery }) => {
const queryClient = useQueryClient(); const selectedProject = useSelector((store) => store.localVariables.projectId);
var selectedProject = useSelector((store) => store.localVariables.projectId); const [regularizesList, setRegularizedList] = useState([]);
const [regularizesList, setregularizedList] = useState([]); const { regularizes, loading, refetch } = useRegularizationRequests(selectedProject);
const { regularizes, loading, error, refetch } =
useRegularizationRequests(selectedProject);
// Update regularizesList when regularizes data changes
useEffect(() => { useEffect(() => {
setregularizedList(regularizes); setRegularizedList(regularizes);
}, [regularizes]); }, [regularizes]);
const sortByName = useCallback((a, b) => { const sortByName = (a, b) => {
const nameA = (a.firstName + a.lastName).toLowerCase(); const nameA = (a.firstName + a.lastName).toLowerCase();
const nameB = (b.firstName + b.lastName).toLowerCase(); const nameB = (b.firstName + b.lastName).toLowerCase();
return nameA.localeCompare(nameB); return nameA.localeCompare(nameB);
}, []); };
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
if (selectedProject === msg.projectId) { // Use strict equality for comparison if (selectedProject == msg.projectId) {
// Filter out the updated item to effectively remove it from the list const updatedAttendance = regularizes?.filter(item => item.id !== msg.response.id);
// as it's likely been processed (approved/rejected)
const updatedAttendance = regularizesList?.filter(item => item.id !== msg.response.id);
cacheData("regularizedList", { cacheData("regularizedList", {
data: updatedAttendance, data: updatedAttendance,
projectId: selectedProject, projectId: selectedProject,
}); });
// Refetch to get the latest data from the source, ensuring consistency
refetch(); refetch();
} }
}, },
[selectedProject, regularizesList, refetch] // Added regularizesList and refetch to dependencies [selectedProject, regularizes]
); );
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
// If any regularization request belongs to the updated employee, refetch if (regularizes.some((item) => item.employeeId == msg.employeeId)) {
if (regularizes?.some((item) => item.employeeId === msg.employeeId)) { // Use strict equality
refetch(); refetch();
} }
}, },
[regularizes, refetch] // Added refetch to dependencies [regularizes]
); );
// Event bus listeners
useEffect(() => { useEffect(() => {
eventBus.on("regularization", handler); eventBus.on("regularization", handler);
return () => eventBus.off("regularization", handler); return () => eventBus.off("regularization", handler);
@ -66,7 +58,7 @@ const Regularization = ({ handleRequest }) => {
return () => eventBus.off("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler);
}, [employeeHandler]); }, [employeeHandler]);
// Search filter logic // ✅ Search filter logic added here
const filteredData = [...regularizesList] const filteredData = [...regularizesList]
?.filter((item) => { ?.filter((item) => {
if (!searchQuery) return true; if (!searchQuery) return true;
@ -86,34 +78,27 @@ const Regularization = ({ handleRequest }) => {
return ( return (
<div className="table-responsive text-nowrap pb-4"> <div className="table-responsive text-nowrap pb-4">
{loading ? ( <table className="table mb-0">
<div className="my-2"> <thead>
<p className="text-secondary">Loading...</p> <tr>
</div> <th colSpan={2}>Name</th>
) : currentItems?.length > 0 ? ( <th>Date</th>
<table className="table mb-0"> <th>
<thead> <i className="bx bxs-down-arrow-alt text-success"></i>Check-In
<tr> </th>
<th colSpan={2}>Name</th> <th>
<th>Date</th> <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
<th> </th>
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In <th>Action</th>
</th> </tr>
<th> </thead>
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out <tbody>
</th> {!loading && currentItems?.length > 0 ? (
<th>Action</th> currentItems.map((att, index) => (
</tr>
</thead>
<tbody>
{currentItems?.map((att, index) => (
<tr key={index}> <tr key={index}>
<td colSpan={2}> <td colSpan={2}>
<div className="d-flex justify-content-start align-items-center"> <div className="d-flex justify-content-start align-items-center">
<Avatar <Avatar firstName={att.firstName} lastName={att.lastName} />
firstName={att.firstName}
lastName={att.lastName}
></Avatar>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate"> <a href="#" className="text-heading text-truncate">
<span className="fw-normal"> <span className="fw-normal">
@ -128,28 +113,37 @@ const Regularization = ({ handleRequest }) => {
<td> <td>
{att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"} {att.checkOutTime ? convertShortTime(att.checkOutTime) : "--"}
</td> </td>
<td className="text-center "> <td className="text-center">
<RegularizationActions <RegularizationActions
attendanceData={att} attendanceData={att}
handleRequest={handleRequest} handleRequest={handleRequest}
refresh={refetch} refresh={refetch}
/> />
{/* </div> */}
</td> </td>
</tr> </tr>
))} ))
</tbody> ) : (
</table> <tr>
) : ( <td
<div className="my-4"> colSpan={6}
{" "} className="text-center"
<span className="text-secondary">No Requests Found !</span> style={{
</div> height: "200px",
)} verticalAlign: "middle",
borderBottom: "none",
}}
>
{loading ? "Loading..." : "No Record Found"}
</td>
</tr>
)}
</tbody>
</table>
{!loading && totalPages > 1 && ( {!loading && totalPages > 1 && (
<nav aria-label="Page "> <nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1 mt-3"> <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
<li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}> <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button <button
className="page-link btn-xs" className="page-link btn-xs"
onClick={() => paginate(currentPage - 1)} onClick={() => paginate(currentPage - 1)}
@ -160,25 +154,18 @@ const Regularization = ({ handleRequest }) => {
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${ className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
currentPage === index + 1 ? "active" : ""
}`}
> >
<button <button className="page-link" onClick={() => paginate(index + 1)}>
className="page-link "
onClick={() => paginate(index + 1)}
>
{index + 1} {index + 1}
</button> </button>
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
currentPage === totalPages ? "disabled" : ""
}`}
> >
<button <button
className="page-link " className="page-link"
onClick={() => paginate(currentPage + 1)} onClick={() => paginate(currentPage + 1)}
> >
&raquo; &raquo;

1
src/components/Dashboard/Tasks.jsx
View File

@ -5,7 +5,6 @@ import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
const TasksCard = () => { const TasksCard = () => {
const projectId = useSelector((store) => store.localVariables?.projectId); const projectId = useSelector((store) => store.localVariables?.projectId);
const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId); const { tasksCardData, loading, error } = useDashboardTasksCardData(projectId);
console.log(tasksCardData);
return ( return (
<div className="card p-3 h-100 text-center d-flex justify-content-between"> <div className="card p-3 h-100 text-center d-flex justify-content-between">

2
src/components/Layout/Header.jsx
View File

@ -37,7 +37,7 @@ const Header = () => {
const allowedProjectStatusIds = [ const allowedProjectStatusIds = [
"603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold "603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
"cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress "cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
"ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive - Removed as per requirement // "ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive - Removed as per requirement
"b74da4c2-d07e-46f2-9919-e75e49b12731", // Active "b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
]; ];

6
src/hooks/useDashboard_Data.jsx
View File

@ -104,17 +104,15 @@ export const useDashboardTeamsCardData = (projectId) => {
useEffect(() => { useEffect(() => {
const fetchTeamsData = async () => { const fetchTeamsData = async () => {
if (!projectId) return; // ✅ Skip if projectId is not provided
setLoading(true); setLoading(true);
setError(""); setError("");
try { try {
const response = await GlobalRepository.getDashboardTeamsCardData(projectId); const response = await GlobalRepository.getDashboardTeamsCardData(projectId);
setTeamsData(response.data); // ✅ Handle undefined/null setTeamsData(response.data || {});
} catch (err) { } catch (err) {
setError("Failed to fetch teams card data."); setError("Failed to fetch teams card data.");
console.error(err); console.error("Error fetching teams card data:", err);
setTeamsData({}); setTeamsData({});
} finally { } finally {
setLoading(false); setLoading(false);

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

@ -1,57 +1,50 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { import {
cacheData, cacheData,
clearCacheKey,
getCachedData,
getCachedProfileData, getCachedProfileData,
} from "../../slices/apiDataManager"; // clearCacheKey and getCachedData are not used } from "../../slices/apiDataManager";
import Breadcrumb from "../../components/common/Breadcrumb"; import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs"; import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance"; import Attendance from "../../components/Activities/Attendance";
// import AttendanceModel from "../../components/Activities/AttendanceModel"; import AttendanceModel from "../../components/Activities/AttendanceModel";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
// import { useProjects } from "../../hooks/useProjects";
import Regularization from "../../components/Activities/Regularization"; import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance"; import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice"; import { setProjectId } from "../../slices/localVariablesSlice";
// import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"; import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { hasUserPermission } from "../../utils/authUtils";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants"; import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
// import AttendanceRepository from "../../repositories/AttendanceRepository"; import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useProjectName } from "../../hooks/useProjects"; import { useProjectName } from "../../hooks/useProjects";
import GlobalModel from "../../components/common/GlobalModel";
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs";
// import Confirmation from "../../components/Activities/Confirmation";
import { useQueryClient } from "@tanstack/react-query";
const AttendancePage = () => { const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all"); const [activeTab, setActiveTab] = useState("all");
const [showPending, setShowPending] = useState(false); const [showPending, setShowPending] = useState(false);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
// const loginUser = getCachedProfileData(); // Declared but not used const loginUser = getCachedProfileData();
const selectedProject = useSelector((store) => store.localVariables.projectId); const selectedProject = useSelector((store) => store.localVariables.projectId);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { const {
attendance, attendance,
loading: attLoading, loading: attLoading,
// recall: attrecall, // Declared but not used in the current logic recall: attrecall,
} = useAttendance(selectedProject); } = useAttendance(selectedProject);
const [attendances, setAttendances] = useState(); const [attendances, setAttendances] = useState();
const [empRoles, setEmpRoles] = useState(null); // This state is declared but never populated or used const [empRoles, setEmpRoles] = useState(null);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [modelConfig, setModelConfig] = useState(null); // Initialize with null for clarity const [modelConfig, setModelConfig] = useState(null); // Initialize as null
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE); const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
// const { projectNames, loading: projectLoading, fetchData } = useProjectName(); // loading and fetchData are not used directly here const { projectNames, loading: projectLoading, fetchData } = useProjectName();
// FormData is declared but not used in the provided snippet's logic const [formData, setFormData] = useState({
// const [formData, setFormData] = useState({ markTime: "",
// markTime: "", description: "",
// description: "", date: new Date().toLocaleDateString(),
// date: new Date().toLocaleDateString(), });
// });
const handler = useCallback( const handler = useCallback(
(msg) => { (msg) => {
@ -66,7 +59,7 @@ const AttendancePage = () => {
cacheData("Attendance", { cacheData("Attendance", {
data: updatedAttendance, data: updatedAttendance,
projectId: selectedProject, // Corrected key from selectedProject to projectId for consistency projectId: selectedProject,
}); });
setAttendances(updatedAttendance); setAttendances(updatedAttendance);
} }
@ -76,13 +69,11 @@ const AttendancePage = () => {
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
// This logic fetches all attendance when an employee event occurs, // This logic seems fine for refetching if an employee ID exists in current attendances
// which might be inefficient if only a single employee's data needs updating.
// Consider a more granular update if performance is an issue.
if (attendances?.some((item) => item.employeeId === msg.employeeId)) { if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
AttendanceRepository.getAttendance(selectedProject) AttendanceRepository.getAttendance(selectedProject)
.then((response) => { .then((response) => {
cacheData("Attendance", { data: response.data, projectId: selectedProject }); // Corrected key cacheData("Attendance", { data: response.data, selectedProject });
setAttendances(response.data); setAttendances(response.data);
}) })
.catch((error) => { .catch((error) => {
@ -93,29 +84,27 @@ const AttendancePage = () => {
[selectedProject, attendances] [selectedProject, attendances]
); );
// The `getRole` function has a duplicate line: `const role = empRoles.find((b) => b.id === roleId);` const getRole = (roleId) => {
// Also, `empRoles` is declared but never set. If this function is meant to be used, if (!empRoles) return "Unassigned";
// `empRoles` needs to be fetched and set in the state.
const getRole = useCallback((roleId) => {
if (!empRoles) return "Unassigned"; // empRoles is always null with current code
if (!roleId) return "Unassigned"; if (!roleId) return "Unassigned";
const role = empRoles.find((b) => b.id === roleId); const role = empRoles.find((b) => b.id === roleId);
return role ? role.role : "Unassigned"; return role ? role.role : "Unassigned";
}, [empRoles]); };
const openModel = useCallback(() => {
setIsCreateModalOpen(true);
}, []);
// Simplified and moved modal opening logic
const handleModalData = useCallback((employee) => { const handleModalData = useCallback((employee) => {
setModelConfig(employee); setModelConfig(employee);
setIsCreateModalOpen(true); // Open the modal directly when data is set
}, []); }, []);
const closeModal = useCallback(() => { const closeModal = useCallback(() => {
setModelConfig(null); setModelConfig(null);
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
// Directly manipulating DOM is generally discouraged in React. // Directly manipulating the DOM is generally not recommended in React.
// Consider using React state to control modal visibility. // React handles modal visibility via state. If you must, ensure it's
// for external libraries or for very specific, controlled reasons.
// For a typical Bootstrap modal, just setting `isCreateModalOpen` to false
// should be enough if the modal component itself handles the Bootstrap classes.
const modalElement = document.getElementById("check-Out-modal"); const modalElement = document.getElementById("check-Out-modal");
if (modalElement) { if (modalElement) {
modalElement.classList.remove("show"); modalElement.classList.remove("show");
@ -155,24 +144,17 @@ const AttendancePage = () => {
}); });
}, [dispatch, attendances, selectedProject]); }, [dispatch, attendances, selectedProject]);
const handleToggle = useCallback((event) => {
setShowPending(event.target.checked);
}, []);
// Use useProjectName hook to get projectNames and set selected project const handleToggle = (event) => {
const { projectNames } = useProjectName(); setShowPending(event.target.checked);
};
useEffect(() => { useEffect(() => {
if (selectedProject === null && projectNames.length > 0) { if (selectedProject === null && projectNames.length > 0) {
dispatch(setProjectId(projectNames[0]?.id)); dispatch(setProjectId(projectNames[0]?.id));
} }
}, [selectedProject, projectNames, dispatch]); }, [selectedProject, projectNames, dispatch]);
useEffect(() => {
if (modelConfig !== null) {
openModel();
}
}, [modelConfig, openModel]); // Added openModel to dependency array
useEffect(() => { useEffect(() => {
setAttendances(attendance); setAttendances(attendance);
}, [attendance]); }, [attendance]);
@ -204,8 +186,6 @@ const AttendancePage = () => {
return currentData; return currentData;
}, [attendances, showPending, searchQuery]); }, [attendances, showPending, searchQuery]);
// Event bus listeners
useEffect(() => { useEffect(() => {
eventBus.on("attendance", handler); eventBus.on("attendance", handler);
return () => eventBus.off("attendance", handler); return () => eventBus.off("attendance", handler);
@ -218,11 +198,11 @@ const AttendancePage = () => {
return ( return (
<> <>
{/* {isCreateModalOpen && modelConfig && ( {isCreateModalOpen && modelConfig && (
<div <div
className="modal fade show" className="modal fade show"
style={{ display: "block" }} style={{ display: "block" }}
id="check-Out-modalg" id="check-Out-modal"
tabIndex="-1" tabIndex="-1"
aria-hidden="true" aria-hidden="true"
> >
@ -232,29 +212,6 @@ const AttendancePage = () => {
handleSubmitForm={handleSubmit} handleSubmitForm={handleSubmit}
/> />
</div> </div>
)} */}
{isCreateModalOpen && modelConfig && (
<GlobalModel
isOpen={isCreateModalOpen}
size={modelConfig?.action === 6 && "lg"}
closeModal={closeModal}
>
{(modelConfig?.action === 0 ||
modelConfig?.action === 1 ||
modelConfig?.action === 2) && (
<CheckCheckOutmodel
modeldata={modelConfig}
closeModal={closeModal}
/>
)}
{/* For view logs */}
{modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
)}
{modelConfig?.action === 7 && (
<Confirmation closeModal={closeModal} />
)}
</GlobalModel>
)} )}
<div className="container-fluid"> <div className="container-fluid">
@ -265,7 +222,10 @@ const AttendancePage = () => {
]} ]}
></Breadcrumb> ></Breadcrumb>
<div className="nav-align-top nav-tabs-shadow"> <div className="nav-align-top nav-tabs-shadow">
<ul className="nav nav-tabs d-flex justify-content-between align-items-center" role="tablist"> <ul
className="nav nav-tabs d-flex justify-content-between align-items-center"
role="tablist"
>
<div className="d-flex"> <div className="d-flex">
<li className="nav-item"> <li className="nav-item">
<button <button
@ -292,8 +252,9 @@ const AttendancePage = () => {
<li className={`nav-item ${!DoRegularized && "d-none"}`}> <li className={`nav-item ${!DoRegularized && "d-none"}`}>
<button <button
type="button" type="button"
className={`nav-link ${activeTab === "regularization" ? "active" : "" className={`nav-link ${
} fs-6`} activeTab === "regularization" ? "active" : ""
} fs-6`}
onClick={() => setActiveTab("regularization")} onClick={() => setActiveTab("regularization")}
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target="#navs-top-messages" data-bs-target="#navs-top-messages"
@ -302,7 +263,6 @@ const AttendancePage = () => {
</button> </button>
</li> </li>
</div> </div>
{/* Search Box remains here */}
<div className="p-2"> <div className="p-2">
<input <input
type="text" type="text"
@ -312,30 +272,33 @@ const AttendancePage = () => {
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
</div> </div>
</ul> </ul>
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3" > <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
{activeTab === "all" && ( {activeTab === "all" && (
<>
{!attLoading && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Attendance <Attendance
attendance={filteredAndSearchedTodayAttendance()}
handleModalData={handleModalData} handleModalData={handleModalData}
getRole={getRole} getRole={getRole}
setshowOnlyCheckout={setShowPending} setshowOnlyCheckout={setShowPending}
showOnlyCheckout={showPending} showOnlyCheckout={showPending}
searchQuery={searchQuery}
/> />
</div> </div>
)} )}
{!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && ( {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
<p> <p>
{" "} {" "}
{showPending
{showPending {showPending
? "No Pending Available" ? "No Pending Available"
: "No Employee assigned yet."}{" "} : "No Employee assigned yet."}{" "}
</p> </p>
)} )}
</div> </>
)} )}
{activeTab === "logs" && ( {activeTab === "logs" && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<AttendanceLog <AttendanceLog
@ -347,6 +310,7 @@ const AttendancePage = () => {
/> />
</div> </div>
)} )}
{activeTab === "regularization" && DoRegularized && ( {activeTab === "regularization" && DoRegularized && (
<div className="tab-pane fade show active py-0"> <div className="tab-pane fade show active py-0">
<Regularization <Regularization
@ -355,6 +319,8 @@ const AttendancePage = () => {
/> />
</div> </div>
)} )}
{!attLoading && !attendances && <span>Not Found</span>}
</div> </div>
</div> </div>
</div> </div>
@ -362,4 +328,4 @@ const AttendancePage = () => {
); );
}; };
export default AttendancePage; export default AttendancePage;