diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index c4f04b7f..12edc8fc 100644 --- a/src/components/Activities/Attendance.jsx +++ b/src/components/Activities/Attendance.jsx @@ -12,7 +12,7 @@ import { useQueryClient } from "@tanstack/react-query"; import eventBus from "../../services/eventBus"; import { useSelectedProject } from "../../slices/apiDataManager"; -const Attendance = ({ getRole, handleModalData, searchTerm, filters }) => { +const Attendance = ({ getRole, handleModalData, searchTerm }) => { const queryClient = useQueryClient(); const [loading, setLoading] = useState(false); const navigate = useNavigate(); @@ -50,57 +50,57 @@ const Attendance = ({ getRole, handleModalData, searchTerm, filters }) => { .filter((d) => d.activity === 0) .sort(sortByName); - // const finalFilteredData = useMemo(() => { - // const combinedData = [...group1, ...group2]; - // if (!searchTerm) { - // return combinedData; - // } - // const lowercasedSearchTerm = searchTerm.toLowerCase(); - - // return combinedData.filter((item) => { - // const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - // const role = item.jobRoleName?.toLowerCase() || ""; - // return ( - // fullName.includes(lowercasedSearchTerm) || - // role.includes(lowercasedSearchTerm) // also search by role - // ); - // }); - // }, [group1, group2, searchTerm]); - const finalFilteredData = useMemo(() => { const combinedData = [...group1, ...group2]; - - let tempData = combinedData; - - // Search filter - if (searchTerm) { - const lowercasedSearchTerm = searchTerm.toLowerCase(); - tempData = tempData.filter((item) => { - const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - const role = item.jobRoleName?.toLowerCase() || ""; - return ( - fullName.includes(lowercasedSearchTerm) || - role.includes(lowercasedSearchTerm) // also search by role - ); - }); + if (!searchTerm) { + return combinedData; } + const lowercasedSearchTerm = searchTerm.toLowerCase(); - // Organization filter - if (filters?.selectedOrganization) { - tempData = tempData.filter( - (item) => item.organization?.name === filters.selectedOrganization + return combinedData.filter((item) => { + const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); + const role = item.jobRoleName?.toLowerCase() || ""; + return ( + fullName.includes(lowercasedSearchTerm) || + role.includes(lowercasedSearchTerm) // also search by role ); - } + }); + }, [group1, group2, searchTerm]); - // Services filter - if (filters?.selectedServices?.length > 0) { - tempData = tempData.filter((item) => - filters.selectedServices.includes(item.service?.name) - ); - } + // const finalFilteredData = useMemo(() => { + // const combinedData = [...group1, ...group2]; - return tempData; - }, [group1, group2, searchTerm, filters]); + // let tempData = combinedData; + + // // Search filter + // if (searchTerm) { + // const lowercasedSearchTerm = searchTerm.toLowerCase(); + // tempData = tempData.filter((item) => { + // const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); + // const role = item.jobRoleName?.toLowerCase() || ""; + // return ( + // fullName.includes(lowercasedSearchTerm) || + // role.includes(lowercasedSearchTerm) // also search by role + // ); + // }); + // } + + // // Organization filter + // if (filters?.selectedOrganization) { + // tempData = tempData.filter( + // (item) => item.organization?.name === filters.selectedOrganization + // ); + // } + + // // Services filter + // if (filters?.selectedServices?.length > 0) { + // tempData = tempData.filter((item) => + // filters.selectedServices.includes(item.service?.name) + // ); + // } + + // return tempData; + // }, [group1, group2, searchTerm, filters]); diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 65edb95e..c98eabde 100644 --- a/src/components/Activities/AttendcesLogs.jsx +++ b/src/components/Activities/AttendcesLogs.jsx @@ -33,7 +33,7 @@ const usePagination = (data, itemsPerPage) => { }; }; -const AttendanceLog = ({ handleModalData, searchTerm, filters }) => { +const AttendanceLog = ({ handleModalData, searchTerm }) => { // const selectedProject = useSelector( // (store) => store.localVariables.projectId // ); @@ -139,42 +139,42 @@ const AttendanceLog = ({ handleModalData, searchTerm, filters }) => { }, [data, showPending]); // New useEffect to handle search filtering - // const filteredSearchData = useMemo(() => { - // if (!searchTerm) { - // return processedData; - // } - // const lowercasedSearchTerm = searchTerm.toLowerCase(); - // return processedData.filter((item) => { - // const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - // return fullName.includes(lowercasedSearchTerm); - // }); - // }, [processedData, searchTerm]); - const filteredSearchData = useMemo(() => { - let tempData = processedData; - - if (searchTerm) { + if (!searchTerm) { + return processedData; + } const lowercasedSearchTerm = searchTerm.toLowerCase(); - tempData = tempData.filter((item) => { + return processedData.filter((item) => { const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); return fullName.includes(lowercasedSearchTerm); }); - } + }, [processedData, searchTerm]); - if (filters?.selectedOrganization) { - tempData = tempData.filter( - (item) => item.organization?.name === filters.selectedOrganization - ); - } +// const filteredSearchData = useMemo(() => { +// let tempData = processedData; - if (filters?.selectedServices?.length > 0) { - tempData = tempData.filter((item) => - filters.selectedServices.includes(item.service?.name) - ); - } +// if (searchTerm) { +// const lowercasedSearchTerm = searchTerm.toLowerCase(); +// tempData = tempData.filter((item) => { +// const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); +// return fullName.includes(lowercasedSearchTerm); +// }); +// } - return tempData; -}, [processedData, searchTerm, filters]); +// 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) +// ); +// } + +// return tempData; +// }, [processedData, searchTerm, filters]); const { @@ -269,14 +269,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, filters }) => { -
- refetch()} - /> -
+
{isLoading ? ( diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index 0a1788d8..5c3c1930 100644 --- a/src/components/Activities/Regularization.jsx +++ b/src/components/Activities/Regularization.jsx @@ -10,7 +10,7 @@ import eventBus from "../../services/eventBus"; import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager"; import { useQueryClient } from "@tanstack/react-query"; -const Regularization = ({ handleRequest, searchTerm,filters }) => { +const Regularization = ({ handleRequest, searchTerm }) => { const queryClient = useQueryClient(); // var selectedProject = useSelector((store) => store.localVariables.projectId); const selectedProject = useSelectedProject(); @@ -47,46 +47,46 @@ const Regularization = ({ handleRequest, searchTerm,filters }) => { ); // Filter the data based on the search term and sort it - // const filteredSearchData = useMemo(() => { - // const sortedList = [...regularizesList].sort(sortByName); - // if (!searchTerm) { - // return sortedList; - // } - // const lowercasedSearchTerm = searchTerm.toLowerCase(); - // return sortedList.filter((item) => { - // const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - // return fullName.includes(lowercasedSearchTerm); - // }); - // }, [regularizesList, searchTerm]); - const filteredSearchData = useMemo(() => { - let sortedList = [...regularizesList].sort(sortByName); - - // Search filter - if (searchTerm) { - const lowercasedSearchTerm = searchTerm.toLowerCase(); - sortedList = sortedList.filter((item) => { - const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); - return fullName.includes(lowercasedSearchTerm); - }); + const sortedList = [...regularizesList].sort(sortByName); + if (!searchTerm) { + return sortedList; } + const lowercasedSearchTerm = searchTerm.toLowerCase(); + return sortedList.filter((item) => { + const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); + return fullName.includes(lowercasedSearchTerm); + }); + }, [regularizesList, searchTerm]); - // Organization filter - if (filters?.selectedOrganization) { - sortedList = sortedList.filter( - (item) => item.organization?.name === filters.selectedOrganization - ); - } + // const filteredSearchData = useMemo(() => { + // let sortedList = [...regularizesList].sort(sortByName); - // Services filter - if (filters?.selectedServices?.length > 0) { - sortedList = sortedList.filter((item) => - filters.selectedServices.includes(item.service?.name) - ); - } + // // Search filter + // if (searchTerm) { + // const lowercasedSearchTerm = searchTerm.toLowerCase(); + // sortedList = sortedList.filter((item) => { + // const fullName = `${item.firstName} ${item.lastName}`.toLowerCase(); + // return fullName.includes(lowercasedSearchTerm); + // }); + // } - return sortedList; - }, [regularizesList, searchTerm, filters]); + // // Organization filter + // if (filters?.selectedOrganization) { + // sortedList = sortedList.filter( + // (item) => item.organization?.name === filters.selectedOrganization + // ); + // } + + // // Services filter + // if (filters?.selectedServices?.length > 0) { + // sortedList = sortedList.filter((item) => + // filters.selectedServices.includes(item.service?.name) + // ); + // } + + // return sortedList; + // }, [regularizesList, searchTerm, filters]); const { currentPage, totalPages, currentItems, paginate } = diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index 01c1b742..cef91843 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -22,7 +22,6 @@ import GlobalModel from "../../components/common/GlobalModel"; import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm"; import AttendLogs from "../../components/Activities/AttendLogs"; import { useQueryClient } from "@tanstack/react-query"; -import FilterIconOrgServices from "./FilterIconOrgServices"; const AttendancePage = () => { const [activeTab, setActiveTab] = useState("all"); @@ -171,10 +170,38 @@ const AttendancePage = () => {
{/* Single search input that moves */} -
- setAppliedFilters(filters)} + {/*
+ setSearchTerm(e.target.value)} + style={{ minWidth: "200px" }} /> +
*/} + + {/* Search + Organization filter */} +
+ {/* Organization Dropdown */} + + + {/* Search Input */} { handleModalData={handleModalData} getRole={getRole} searchTerm={searchTerm} - filters={appliedFilters} />
)} @@ -206,7 +232,6 @@ const AttendancePage = () => {
)} @@ -214,7 +239,7 @@ const AttendancePage = () => {
+ />
)} diff --git a/src/pages/Activities/FilterIconOrgServices.jsx b/src/pages/Activities/FilterIconOrgServices.jsx deleted file mode 100644 index 4f665af2..00000000 --- a/src/pages/Activities/FilterIconOrgServices.jsx +++ /dev/null @@ -1,189 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useSelectedProject } from "../../slices/apiDataManager"; -import { useProjectAssignedServices } from "../../hooks/useProjects"; - -const FilterIconOrgServices = ({ onApplyFilters }) => { - const selectedProject = useSelectedProject(); - - // Fetch services from API - const { data: servicesData = [], isLoading } = useProjectAssignedServices(selectedProject); - - // Hardcoded organization list - const organizations = ["Org A", "Org B", "Org C"]; - - const [selectedOrganization, setSelectedOrganization] = useState(""); - const [selectedServices, setSelectedServices] = useState([]); - - const [appliedOrganization, setAppliedOrganization] = useState(""); - const [appliedServices, setAppliedServices] = useState([]); - - useEffect(() => { - setSelectedOrganization(""); - setSelectedServices([]); - setAppliedOrganization(""); - setAppliedServices([]); - }, [selectedProject]); - - const handleFilterChange = (type, value) => { - if (type === "organization") { - setSelectedOrganization(value); - } else if (type === "service") { - setSelectedServices((prev) => - prev.includes(value) ? prev.filter((s) => s !== value) : [...prev, value] - ); - } - }; - - const applyFilters = () => { - setAppliedOrganization(selectedOrganization); - setAppliedServices(selectedServices); - - onApplyFilters({ - selectedOrganization, - selectedServices, - }); - - document.getElementById("filterDropdown").click(); - }; - - const clearAllFilters = () => { - setSelectedOrganization(""); - setSelectedServices([]); - - setAppliedOrganization(""); - setAppliedServices([]); - - onApplyFilters({ - selectedOrganization: "", - selectedServices: [], - }); - }; - - const appliedFilterCount = - (appliedOrganization ? 1 : 0) + appliedServices.length; - - return ( -
- - - -
- ); -}; - -export default FilterIconOrgServices;