Employee Click Should Navigate to Profile Page from Attendance Page
This commit is contained in:
parent
9df813698d
commit
db2730c02b
@ -12,6 +12,7 @@ import { useAttendancesLogs } from "../../hooks/useAttendance";
|
|||||||
import { queryClient } from "../../layouts/AuthLayout";
|
import { queryClient } from "../../layouts/AuthLayout";
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import Pagination from "../common/Pagination";
|
import Pagination from "../common/Pagination";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
const usePagination = (data, itemsPerPage) => {
|
const usePagination = (data, itemsPerPage) => {
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
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(
|
// const selectedProject = useSelector(
|
||||||
// (store) => store.localVariables.projectId
|
// (store) => store.localVariables.projectId
|
||||||
// );
|
// );
|
||||||
@ -46,6 +47,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
|
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
const [processedData, setProcessedData] = useState([]);
|
const [processedData, setProcessedData] = useState([]);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
today.setHours(0, 0, 0, 0);
|
today.setHours(0, 0, 0, 0);
|
||||||
@ -86,48 +88,48 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
organizationId
|
organizationId
|
||||||
);
|
);
|
||||||
const filtering = useCallback((dataToFilter) => {
|
const filtering = useCallback((dataToFilter) => {
|
||||||
const filteredData = showPending
|
const filteredData = showPending
|
||||||
? dataToFilter.filter((item) => item.checkOutTime === null)
|
? dataToFilter.filter((item) => item.checkOutTime === null)
|
||||||
: dataToFilter;
|
: dataToFilter;
|
||||||
|
|
||||||
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);
|
||||||
const group2 = filteredData
|
const group2 = filteredData
|
||||||
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
.filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
|
||||||
.sort(sortByName);
|
.sort(sortByName);
|
||||||
const group3 = filteredData
|
const group3 = filteredData
|
||||||
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
.filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
|
||||||
.sort(sortByName);
|
.sort(sortByName);
|
||||||
const group4 = filteredData.filter(
|
const group4 = filteredData.filter(
|
||||||
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
(d) => d.activity === 4 && isBeforeToday(d.checkOutTime)
|
||||||
);
|
);
|
||||||
const group5 = filteredData
|
const group5 = filteredData
|
||||||
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
.filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
|
||||||
.sort(sortByName);
|
.sort(sortByName);
|
||||||
const group6 = filteredData
|
const group6 = filteredData
|
||||||
.filter((d) => d.activity === 5)
|
.filter((d) => d.activity === 5)
|
||||||
.sort(sortByName);
|
.sort(sortByName);
|
||||||
|
|
||||||
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
|
||||||
|
|
||||||
// Group by date
|
// Group by date
|
||||||
const groupedByDate = sortedList.reduce((acc, item) => {
|
const groupedByDate = sortedList.reduce((acc, item) => {
|
||||||
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
|
||||||
if (date) {
|
if (date) {
|
||||||
acc[date] = acc[date] || [];
|
acc[date] = acc[date] || [];
|
||||||
acc[date].push(item);
|
acc[date].push(item);
|
||||||
}
|
}
|
||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
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)
|
||||||
);
|
);
|
||||||
|
|
||||||
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
|
||||||
setProcessedData(finalData);
|
setProcessedData(finalData);
|
||||||
}, [showPending]);
|
}, [showPending]);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -146,31 +148,31 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
});
|
});
|
||||||
}, [processedData, searchTerm]);
|
}, [processedData, searchTerm]);
|
||||||
|
|
||||||
// const filteredSearchData = useMemo(() => {
|
// const filteredSearchData = useMemo(() => {
|
||||||
// let tempData = processedData;
|
// let tempData = processedData;
|
||||||
|
|
||||||
// if (searchTerm) {
|
// if (searchTerm) {
|
||||||
// const lowercasedSearchTerm = searchTerm.toLowerCase();
|
// const lowercasedSearchTerm = searchTerm.toLowerCase();
|
||||||
// tempData = tempData.filter((item) => {
|
// tempData = tempData.filter((item) => {
|
||||||
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
|
||||||
// return fullName.includes(lowercasedSearchTerm);
|
// return fullName.includes(lowercasedSearchTerm);
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// if (filters?.selectedOrganization) {
|
// if (filters?.selectedOrganization) {
|
||||||
// tempData = tempData.filter(
|
// tempData = tempData.filter(
|
||||||
// (item) => item.organization?.name === filters.selectedOrganization
|
// (item) => item.organization?.name === filters.selectedOrganization
|
||||||
// );
|
// );
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// if (filters?.selectedServices?.length > 0) {
|
// if (filters?.selectedServices?.length > 0) {
|
||||||
// tempData = tempData.filter((item) =>
|
// tempData = tempData.filter((item) =>
|
||||||
// filters.selectedServices.includes(item.service?.name)
|
// filters.selectedServices.includes(item.service?.name)
|
||||||
// );
|
// );
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// return tempData;
|
// return tempData;
|
||||||
// }, [processedData, searchTerm, filters]);
|
// }, [processedData, searchTerm, filters]);
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -265,7 +267,7 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
<label className="form-check-label ms-0">Show Pending</label>
|
<label className="form-check-label ms-0">Show Pending</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
|
<div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
@ -326,7 +328,12 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
lastName={attendance.lastName}
|
lastName={attendance.lastName}
|
||||||
/>
|
/>
|
||||||
<div className="d-flex flex-column">
|
<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">
|
<span className="fw-normal">
|
||||||
{attendance.firstName} {attendance.lastName}
|
{attendance.firstName} {attendance.lastName}
|
||||||
</span>
|
</span>
|
||||||
@ -373,11 +380,11 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{filteredSearchData.length > ITEMS_PER_PAGE && (
|
{filteredSearchData.length > ITEMS_PER_PAGE && (
|
||||||
<Pagination
|
<Pagination
|
||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
totalPages={totalPages}
|
totalPages={totalPages}
|
||||||
onPageChange={paginate}
|
onPageChange={paginate}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -10,12 +10,14 @@ import eventBus from "../../services/eventBus";
|
|||||||
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import Pagination from "../common/Pagination";
|
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();
|
const queryClient = useQueryClient();
|
||||||
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
// var selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const [regularizesList, setregularizedList] = useState([]);
|
const [regularizesList, setregularizedList] = useState([]);
|
||||||
|
const navigate = useNavigate();
|
||||||
const { regularizes, loading, error, refetch } =
|
const { regularizes, loading, error, refetch } =
|
||||||
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
|
useRegularizationRequests(selectedProject, organizationId, IncludeInActive);
|
||||||
|
|
||||||
@ -149,7 +151,17 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
|
|||||||
lastName={att.lastName}
|
lastName={att.lastName}
|
||||||
/>
|
/>
|
||||||
<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">
|
||||||
|
{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">
|
<span className="fw-normal">
|
||||||
{att.firstName} {att.lastName}
|
{att.firstName} {att.lastName}
|
||||||
</span>
|
</span>
|
||||||
@ -191,10 +203,10 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
|
|||||||
)}
|
)}
|
||||||
{!loading && totalPages > 1 && (
|
{!loading && totalPages > 1 && (
|
||||||
<Pagination
|
<Pagination
|
||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
totalPages={totalPages}
|
totalPages={totalPages}
|
||||||
onPageChange={paginate}
|
onPageChange={paginate}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user