From 9bdcc74486eebdff0554c53f4514779ef4d7a1c5 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Sat, 20 Sep 2025 10:28:18 +0530 Subject: [PATCH 1/2] Adding Filter Icon in Attendance tab and add functionality in all Attendance component. --- src/components/Activities/Attendance.jsx | 64 ++++-- src/components/Activities/AttendcesLogs.jsx | 41 +++- src/components/Activities/Regularization.jsx | 50 ++++- src/pages/Activities/AttendancePage.jsx | 42 ++-- .../Activities/FilterIconOrgServices.jsx | 189 ++++++++++++++++++ 5 files changed, 339 insertions(+), 47 deletions(-) create mode 100644 src/pages/Activities/FilterIconOrgServices.jsx diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx index 6d751b12..c4f04b7f 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 }) => { +const Attendance = ({ getRole, handleModalData, searchTerm, filters }) => { const queryClient = useQueryClient(); const [loading, setLoading] = useState(false); const navigate = useNavigate(); @@ -50,22 +50,58 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { .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]; - 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 + 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 ); - }); - }, [group1, group2, searchTerm]); + } + + // Services filter + if (filters?.selectedServices?.length > 0) { + tempData = tempData.filter((item) => + filters.selectedServices.includes(item.service?.name) + ); + } + + return tempData; + }, [group1, group2, searchTerm, filters]); + const { currentPage, totalPages, currentItems, paginate } = usePagination( @@ -116,7 +152,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => { <>
Date : {formatUTCToLocalTime(todayDate)} diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx index 9aced215..65edb95e 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 }) => { +const AttendanceLog = ({ handleModalData, searchTerm, filters }) => { // const selectedProject = useSelector( // (store) => store.localVariables.projectId // ); @@ -139,16 +139,43 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { }, [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(() => { - if (!searchTerm) { - return processedData; - } + let tempData = processedData; + + if (searchTerm) { const lowercasedSearchTerm = searchTerm.toLowerCase(); - return processedData.filter((item) => { + tempData = tempData.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 + ); + } + + if (filters?.selectedServices?.length > 0) { + tempData = tempData.filter((item) => + filters.selectedServices.includes(item.service?.name) + ); + } + + return tempData; +}, [processedData, searchTerm, filters]); + const { currentPage, @@ -344,7 +371,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => { ) : ( -
No Record Available !
+
No data available for the selected date range. Please Select another date.
)}
{paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && ( diff --git a/src/components/Activities/Regularization.jsx b/src/components/Activities/Regularization.jsx index 82c906b5..0a1788d8 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 }) => { +const Regularization = ({ handleRequest, searchTerm,filters }) => { const queryClient = useQueryClient(); // var selectedProject = useSelector((store) => store.localVariables.projectId); const selectedProject = useSelectedProject(); @@ -47,17 +47,47 @@ const Regularization = ({ handleRequest, searchTerm }) => { ); // 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(() => { - const sortedList = [...regularizesList].sort(sortByName); - if (!searchTerm) { - return sortedList; + 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 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 + ); + } + + // 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 } = usePagination(filteredSearchData, 20); diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx index f0e00ad5..01c1b742 100644 --- a/src/pages/Activities/AttendancePage.jsx +++ b/src/pages/Activities/AttendancePage.jsx @@ -22,6 +22,7 @@ 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"); @@ -39,6 +40,10 @@ const AttendancePage = () => { const [modelConfig, setModelConfig] = useState(); const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE); const { projectNames, loading: projectLoading, fetchData } = useProjectName(); + const [appliedFilters, setAppliedFilters] = useState({ + selectedOrganization: "", + selectedServices: [], + }); const [formData, setFormData] = useState({ markTime: "", @@ -95,11 +100,11 @@ const AttendancePage = () => { {(modelConfig?.action === 0 || modelConfig?.action === 1 || modelConfig?.action === 2) && ( - - )} + + )} {/* For view logs */} {modelConfig?.action === 6 && ( @@ -128,9 +133,8 @@ const AttendancePage = () => {
    • {/* Single search input that moves */} -
    +
    + setAppliedFilters(filters)} + /> { style={{ minWidth: "200px" }} />
    +
    @@ -191,6 +197,7 @@ const AttendancePage = () => { handleModalData={handleModalData} getRole={getRole} searchTerm={searchTerm} + filters={appliedFilters} /> )} @@ -199,12 +206,15 @@ const AttendancePage = () => { )} {activeTab === "regularization" && DoRegularized && (
    - +
    )} diff --git a/src/pages/Activities/FilterIconOrgServices.jsx b/src/pages/Activities/FilterIconOrgServices.jsx new file mode 100644 index 00000000..4f665af2 --- /dev/null +++ b/src/pages/Activities/FilterIconOrgServices.jsx @@ -0,0 +1,189 @@ +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 ( +
    + + +
      e.stopPropagation()} + > + {/* Organization */} +
    • +
      Organization
      + +
      • + + {/* Services */} +
      • +
    • +
      Services
      +
      + {isLoading ? ( +
      Loading services...
      + ) : servicesData.length > 0 ? ( + servicesData.map((service, idx) => ( +
      +
      + handleFilterChange("service", service.name || service)} + /> + +
      +
      + )) + ) : ( +
      No services found.
      + )} +
      +
      • + + {/* Actions */} +
      • + {(appliedFilterCount > 0 || + selectedOrganization || + selectedServices.length > 0) && ( +
    • + + +
      • + )} +
    +
    + ); +}; + +export default FilterIconOrgServices; -- 2.43.0 From 90b96864be66313024943ad67d594771d27cf6b6 Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Sat, 20 Sep 2025 12:13:49 +0530 Subject: [PATCH 2/2] Changes in Attendance filter --- src/components/Activities/Attendance.jsx | 90 ++++----- src/components/Activities/AttendcesLogs.jsx | 67 +++---- src/components/Activities/Regularization.jsx | 72 +++---- src/pages/Activities/AttendancePage.jsx | 39 +++- .../Activities/FilterIconOrgServices.jsx | 189 ------------------ 5 files changed, 143 insertions(+), 314 deletions(-) delete mode 100644 src/pages/Activities/FilterIconOrgServices.jsx 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 ( -
    - - -
      e.stopPropagation()} - > - {/* Organization */} -
    • -
      Organization
      - -
      • - - {/* Services */} -
      • -
    • -
      Services
      -
      - {isLoading ? ( -
      Loading services...
      - ) : servicesData.length > 0 ? ( - servicesData.map((service, idx) => ( -
      -
      - handleFilterChange("service", service.name || service)} - /> - -
      -
      - )) - ) : ( -
      No services found.
      - )} -
      -
      • - - {/* Actions */} -
      • - {(appliedFilterCount > 0 || - selectedOrganization || - selectedServices.length > 0) && ( -
    • - - -
      • - )} -
    -
    - ); -}; - -export default FilterIconOrgServices; -- 2.43.0