Employee Click Should Navigate to Profile Page from Attendance Page

This commit is contained in:
Kartik Sharma 2025-10-06 17:20:20 +05:30
parent 1e49cf17a2
commit cf7c7e83a9
2 changed files with 91 additions and 72 deletions

View File

@ -12,6 +12,7 @@ import { useAttendancesLogs } from "../../hooks/useAttendance";
import { queryClient } from "../../layouts/AuthLayout";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import Pagination from "../common/Pagination";
import { useNavigate } from "react-router-dom";
const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1);
@ -34,7 +35,7 @@ const usePagination = (data, itemsPerPage) => {
};
};
const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
// const selectedProject = useSelector(
// (store) => store.localVariables.projectId
// );
@ -46,6 +47,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
const [isRefreshing, setIsRefreshing] = useState(false);
const [processedData, setProcessedData] = useState([]);
const navigate = useNavigate();
const today = new Date();
today.setHours(0, 0, 0, 0);
@ -86,48 +88,48 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
organizationId
);
const filtering = useCallback((dataToFilter) => {
const filteredData = showPending
? dataToFilter.filter((item) => item.checkOutTime === null)
: dataToFilter;
const filteredData = showPending
? dataToFilter.filter((item) => item.checkOutTime === null)
: dataToFilter;
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 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];
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;
}, {});
// 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;
}, {});
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)
);
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
setProcessedData(finalData);
}, [showPending]);
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
setProcessedData(finalData);
}, [showPending]);
useEffect(() => {
@ -146,31 +148,31 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
});
}, [processedData, searchTerm]);
// const filteredSearchData = useMemo(() => {
// let tempData = processedData;
// const filteredSearchData = useMemo(() => {
// let tempData = processedData;
// if (searchTerm) {
// const lowercasedSearchTerm = searchTerm.toLowerCase();
// tempData = tempData.filter((item) => {
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
// return fullName.includes(lowercasedSearchTerm);
// });
// }
// if (searchTerm) {
// const lowercasedSearchTerm = searchTerm.toLowerCase();
// tempData = tempData.filter((item) => {
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
// return fullName.includes(lowercasedSearchTerm);
// });
// }
// if (filters?.selectedOrganization) {
// tempData = tempData.filter(
// (item) => item.organization?.name === filters.selectedOrganization
// );
// }
// if (filters?.selectedOrganization) {
// tempData = tempData.filter(
// (item) => item.organization?.name === filters.selectedOrganization
// );
// }
// if (filters?.selectedServices?.length > 0) {
// tempData = tempData.filter((item) =>
// filters.selectedServices.includes(item.service?.name)
// );
// }
// if (filters?.selectedServices?.length > 0) {
// tempData = tempData.filter((item) =>
// filters.selectedServices.includes(item.service?.name)
// );
// }
// return tempData;
// }, [processedData, searchTerm, filters]);
// return tempData;
// }, [processedData, searchTerm, filters]);
const {
@ -265,7 +267,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
<label className="form-check-label ms-0">Show Pending</label>
</div>
</div>
</div>
<div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
{isLoading ? (
@ -326,7 +328,12 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
lastName={attendance.lastName}
/>
<div className="d-flex flex-column">
<a href="#" className="text-heading text-truncate">
<a
onClick={() =>
navigate(`/employee/${attendance.employeeId}?for=attendance`)
}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{attendance.firstName} {attendance.lastName}
</span>
@ -373,11 +380,11 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
</div>
)}
{filteredSearchData.length > ITEMS_PER_PAGE && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
)}
</>
);

View File

@ -10,12 +10,14 @@ import eventBus from "../../services/eventBus";
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
import { useQueryClient } from "@tanstack/react-query";
import Pagination from "../common/Pagination";
import { useNavigate } from "react-router-dom";
const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive }) => {
const Regularization = ({ handleRequest, searchTerm, projectId, organizationId, IncludeInActive }) => {
const queryClient = useQueryClient();
// var selectedProject = useSelector((store) => store.localVariables.projectId);
const selectedProject = useSelectedProject();
const [regularizesList, setregularizedList] = useState([]);
const navigate = useNavigate();
const { regularizes, loading, error, refetch } =
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
@ -149,7 +151,17 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
lastName={att.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">
{att.firstName} {att.lastName}
</span>
</a> */}
<a
onClick={() =>
navigate(`/employee/${att.employeeId}?for=attendance`)
}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{att.firstName} {att.lastName}
</span>
@ -191,10 +203,10 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
)}
{!loading && totalPages > 1 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
)}
</div>
);