fixed searching for employee

src/hooks/useEmployees.js

@@ -190,8 +190,9 @@ export const useUpdateEmployee = () =>
     onSuccess: (_, variables) => {
       const id = variables.id || variables.employeeId;
       const isAllEmployee = variables.IsAllEmployee;
+    
       // Cache invalidation
-        queryClient.invalidateQueries( {queryKey:[ 'allEmployee', isAllEmployee ] }); 
+        queryClient.invalidateQueries( {queryKey:[ 'allEmployees'] }); 
       // queryClient.invalidateQueries(['employeeProfile', id]);
       queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
       queryClient.removeQueries( {queryKey: [ "empListByProjectAllocated" ]} );

src/pages/employee/EmployeeList.jsx

@@ -73,6 +73,7 @@ const EmployeeList = () => {
   if (!text) {
     return data;
   }
+
   const lowercasedText = text.toLowerCase().trim();
 
   return data.filter((item) => {
@@ -80,27 +81,34 @@ const EmployeeList = () => {
     const middleName = item.middleName || "";
     const lastName = item.lastName || "";
 
-      const fullName = `${firstName} ${middleName} ${lastName}`.toLowerCase().trim().replace(/\s+/g, ' ');
+    const fullName = `${firstName} ${middleName} ${lastName}`
+      .toLowerCase()
+      .trim()
+      .replace(/\s+/g, " ");
 
-      const email = item.email ? item.email.toLowerCase() : "";
-      const phoneNumber = item.phoneNumber ? item.phoneNumber.toLowerCase() : "";
-      const jobRole = item.jobRole ? item.jobRole.toLowerCase() : ""; 
+    const email = item.email?.toLowerCase() || "";
+    const phoneNumber = item.phoneNumber?.toLowerCase() || "";
+    const jobRole = item.jobRole?.toLowerCase() || "";
 
     return (
-        fullName.includes(value) ||
-        email.includes(value) ||
-        phoneNumber.includes(value) ||
-        jobRole.includes(value) 
+      fullName.includes(lowercasedText) ||
+      email.includes(lowercasedText) ||
+      phoneNumber.includes(lowercasedText) ||
+      jobRole.includes(lowercasedText)
     );
   });
 };
 
+
   const handleSearch = (e) => {
     const value = e.target.value;
     setSearchText(value);
     setCurrentPage(1);
   };
-
+useEffect(() => {
+  const filtered = applySearchFilter(employeeList, searchText);
+  setFilteredData(filtered);
+}, [searchText, employeeList]);
 
 
    const displayData = searchText ? filteredData : employeeList;
@@ -112,52 +120,66 @@ const EmployeeList = () => {
     setIsCreateModalOpen(true);
    };
 
-  const closeModal = () => {
-    setIsCreateModalOpen(false);
+  // const closeModal = () => {
+  //   setIsCreateModalOpen(false);
 
-    const modalElement = document.getElementById("managerole-modal");
-    if (modalElement && !showModal) {
-      modalElement.classList.remove("show");
-      modalElement.style.display = "none";
-      document.body.classList.remove("modal-open");
-      document.querySelector(".modal-backdrop")?.remove();
-    }
-    setShowModal(false);
-    clearCacheKey("employeeProfile");
-    recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
-  };
-  const handleShow = () => setShowModal(true);
-  const handleClose = () => setShowModal( false );
+  //   const modalElement = document.getElementById("managerole-modal");
+  //   if (modalElement && !showModal) {
+  //     modalElement.classList.remove("show");
+  //     modalElement.style.display = "none";
+  //     document.body.classList.remove("modal-open");
+  //     document.querySelector(".modal-backdrop")?.remove();
+  //   }
+  //   setShowModal(false);
+  //   clearCacheKey("employeeProfile");
+  //   recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+  // };
+  // const handleShow = () => setShowModal(true);
+  // const handleClose = () => setShowModal( false );
   
 useEffect(() => {
-  setCurrentPage(1)
-
   if (!loading && Array.isArray(employees)) {
-      // Sort by full name (firstName + lastName)
     const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${b.lastName || ""
-          }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
-          }`.toLowerCase();
+      const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase();
+      const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase();
       return nameA?.localeCompare(nameB);
     });
 
-      setEmployeeList(sorted);
-      setFilteredData(sorted);
+    setEmployeeList((prevList) => {
+      const prevJSON = JSON.stringify(prevList);
+      const nextJSON = JSON.stringify(sorted);
+      if (prevJSON !== nextJSON) {
+        return sorted;
+      }
+      return prevList;
+    });
+
+    setFilteredData((prev) => {
+      const prevJSON = JSON.stringify(prev);
+      const nextJSON = JSON.stringify(sorted);
+      if (prevJSON !== nextJSON) {
+        return sorted;
+      }
+      return prev;
+    });
+
+    // set currentPage to 1 only if needed
+    setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
   }
 }, [loading, employees, selectedProjectId, showAllEmployees]);
 
 
 
+
   const handleConfigData = (config) => {
     setModelConfig(config);
   };
 
-  useEffect(() => {
-    if (modelConfig !== null) {
-      openModal();
-    }
-  }, [modelConfig, isCreateModalOpen]);
+  // useEffect(() => {
+  //   if (modelConfig !== null) {
+  //     openModal();
+  //   }
+  // }, [modelConfig, isCreateModalOpen]);
 
   const tableRef = useRef(null);
   const handleExport = (type) => {