src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -11,7 +11,7 @@ import { useSelector } from "react-redux";
 import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 
-const Attendance = ({ getRole, handleModalData }) => {
+const Attendance = ({ getRole, handleModalData, searchTerm }) => {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -28,8 +28,8 @@ const Attendance = ({ getRole, handleModalData }) => {
   } = useAttendance(selectedProject);
   const filteredAttendance = ShowPending
     ? attendance?.filter(
-        (att) => att?.checkInTime !== null && att?.checkOutTime === null
+      (att) => att?.checkInTime !== null && att?.checkOutTime === null
-      )
+    )
     : attendance;
 
   const attendanceList = Array.isArray(filteredAttendance)
@@ -48,18 +48,40 @@ const Attendance = ({ getRole, handleModalData }) => {
     .filter((d) => d.activity === 0)
     .sort(sortByName);
 
-  const filteredData = [...group1, ...group2];
+  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 { currentPage, totalPages, currentItems, paginate } = usePagination(
-    filteredData,
+    finalFilteredData,
     ITEMS_PER_PAGE
   );
 
+  // Reset pagination when the filter or search term changes
+  useEffect(() => {
+  }, [finalFilteredData]);
+
+
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
         queryClient.setQueryData(["attendance", selectedProject], (oldData) => {
           if (!oldData) {
-            queryClient.invalidateQueries({queryKey:["attendance"]})
+            queryClient.invalidateQueries({ queryKey: ["attendance"] })
           };
           return oldData.map((record) =>
             record.employeeId === msg.response.employeeId ? { ...record, ...msg.response } : record
@@ -72,7 +94,7 @@ const Attendance = ({ getRole, handleModalData }) => {
 
   const employeeHandler = useCallback(
     (msg) => {
-      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
+      if (attendance.some((item) => item.employeeId == msg.employeeId)) {
         attrecall();
       }
     },
@@ -106,7 +128,9 @@ const Attendance = ({ getRole, handleModalData }) => {
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        {Array.isArray(attendance) && attendance.length > 0 ? (
+        {attLoading ? (
+          <div>Loading...</div>
+        ) : currentItems?.length > 0 ? (
           <>
             <table className="table ">
               <thead>
@@ -188,13 +212,12 @@ const Attendance = ({ getRole, handleModalData }) => {
               </tbody>
             </table>
 
-            {!loading && filteredData.length > 20 && (
+            {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${
+                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
-                      currentPage === 1 ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link btn-xs"
@@ -206,9 +229,8 @@ const Attendance = ({ getRole, handleModalData }) => {
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${
+                      className={`page-item ${currentPage === index + 1 ? "active" : ""
-                        currentPage === index + 1 ? "active" : ""
+                        }`}
-                      }`}
                     >
                       <button
                         className="page-link "
@@ -219,9 +241,8 @@ const Attendance = ({ getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${
+                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                      currentPage === totalPages ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link "
@@ -234,19 +255,15 @@ const Attendance = ({ getRole, handleModalData }) => {
               </nav>
             )}
           </>
-        ) : attLoading ? (
-          <div>Loading...</div>
         ) : (
-          <div className="text-muted">
+          <div className="text-muted my-4">
-            {Array.isArray(attendance)
+            {searchTerm
-              ? "No employees assigned to the project"
+              ? "No results found for your search."
-              : "Attendance data unavailable"}
+              : attendanceList.length === 0
+                ? "No employees assigned to the project."
+                : "No pending records available."}
           </div>
         )}
-
-        {currentItems?.length == 0 && attendance.length > 0 && (
-          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
-        )}
       </div>
     </>
   );

src/components/Activities/AttendcesLogs.jsx

@@ -33,9 +33,7 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({
+const AttendanceLog = ({ handleModalData, searchTerm }) => {
-  handleModalData,
-}) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
@@ -139,17 +137,29 @@ const AttendanceLog = ({
     filtering(data);
   }, [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 {
     currentPage,
     totalPages,
     currentItems: paginatedAttendances,
     paginate,
     resetPage,
-  } = usePagination(processedData, 20);
+  } = usePagination(filteredSearchData, 20);
 
   useEffect(() => {
     resetPage();
-  }, [processedData, resetPage]);
+  }, [filteredSearchData, resetPage]);
 
   const handler = useCallback(
     (msg) => {
@@ -160,20 +170,23 @@ const AttendanceLog = ({
         startDate <= checkIn &&
         checkIn <= endDate
       ) {
-        queryClient.setQueriesData(["attendanceLogs"],(oldData)=>{
+        queryClient.setQueriesData(["attendanceLogs"], (oldData) => {
-          if(!oldData) {
+          if (!oldData) {
-            queryClient.invalidateQueries({queryKey:["attendanceLogs"]})
+            queryClient.invalidateQueries({ queryKey: ["attendanceLogs"] });
+            return;
           }
-          return oldData.map((record) =>
+          const updatedAttendance = oldData.map((record) =>
-          record.id === msg.response.id ? { ...record, ...msg.response } : record
+            record.id === msg.response.id
-        );
+              ? { ...record, ...msg.response }
-        })
+              : record
-
+          );
-        filtering(updatedAttendance);
+          filtering(updatedAttendance);
+          return updatedAttendance;
+        });
         resetPage();
       }
     },
-    [selectedProject, dateRange, data, filtering, resetPage]
+    [selectedProject, dateRange, filtering, resetPage]
   );
 
   useEffect(() => {
@@ -196,7 +209,7 @@ const AttendanceLog = ({
         refetch()
       }
     },
-    [selectedProject, dateRange, data]
+    [selectedProject, dateRange, data, refetch]
   );
 
   useEffect(() => {
@@ -240,8 +253,10 @@ const AttendanceLog = ({
       </div>
       <div className="table-responsive text-nowrap">
         {isLoading ? (
-          <div><p className="text-secondary">Loading...</p></div>
+          <div>
-        ) : data?.length > 0 ? (
+            <p className="text-secondary">Loading...</p>
+          </div>
+        ) : filteredSearchData?.length > 0 ? (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -332,10 +347,12 @@ const AttendanceLog = ({
            <div className="my-4"><span className="text-secondary">No Record Available !</span></div>
         )}
       </div>
-        {paginatedAttendances?.length == 0 && data?.length > 0 && (
+      {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
-          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
+        <div className="my-4">
-        )}
+          <span className="text-secondary">No Pending Record Available !</span>
-      {processedData.length > 10 && (
+        </div>
+      )}
+      {filteredSearchData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>

src/components/Activities/Regularization.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
 import RegularizationActions from "./RegularizationActions";
@@ -10,7 +10,7 @@ import eventBus from "../../services/eventBus";
 import { cacheData, clearCacheKey } from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
 
-const Regularization = ({ handleRequest }) => {
+const Regularization = ({ handleRequest, searchTerm }) => {
   const queryClient = useQueryClient();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const [regularizesList, setregularizedList] = useState([]);
@@ -30,8 +30,6 @@ const Regularization = ({ handleRequest }) => {
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
-    
-
         queryClient.setQueryData(
           ["regularizedList", selectedProject],
           (oldData) => {
@@ -47,12 +45,27 @@ const Regularization = ({ handleRequest }) => {
     [selectedProject, regularizes]
   );
 
-  const filteredData = [...regularizesList]?.sort(sortByName);
+  // 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 { currentPage, totalPages, currentItems, paginate } =
+    usePagination(filteredSearchData, 20);
+
+  // Reset pagination when the search term or data changes
+  useEffect(() => {
+
+  }, [filteredSearchData]);
 
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    filteredData,
-    20
-  );
   useEffect(() => {
     eventBus.on("regularization", handler);
     return () => eventBus.off("regularization", handler);
@@ -130,8 +143,9 @@ const Regularization = ({ handleRequest }) => {
         </table>
       ) : (
         <div className="my-4">
-          {" "}
+          <span className="text-secondary">
-          <span className="text-secondary">No Requests Found !</span>
+            {searchTerm ? "No results found for your search." : "No Requests Found !"}
+          </span>
         </div>
       )}
       {!loading && totalPages > 1 && (

src/pages/Activities/AttendancePage.jsx

@@ -25,6 +25,7 @@ import { useQueryClient } from "@tanstack/react-query";
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
   const [ShowPending, setShowPending] = useState(false);
+  const [searchTerm, setSearchTerm] = useState(""); // 🔹 New state for search
   const queryClient = useQueryClient();
   const loginUser = getCachedProfileData();
   const selectedProject = useSelector((store) => store.localVariables.projectId);
@@ -69,17 +70,18 @@ const AttendancePage = () => {
     setIsCreateModalOpen(false);
   };
 
-  const handleToggle = (event) => {
-    setShowOnlyCheckout(event.target.checked);
-  };
-
-
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
     }
   }, [modelConfig, isCreateModalOpen]);
 
+  // Handler to change tab and reset search term
+  const handleTabChange = (tabName) => {
+    setActiveTab(tabName);
+    setSearchTerm(""); // Reset search term when tab changes
+  };
+
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -91,11 +93,11 @@ const AttendancePage = () => {
           {(modelConfig?.action === 0 ||
             modelConfig?.action === 1 ||
             modelConfig?.action === 2) && (
-            <CheckCheckOutmodel
+              <CheckCheckOutmodel
-              modeldata={modelConfig}
+                modeldata={modelConfig}
-              closeModal={closeModal}
+                closeModal={closeModal}
-            />
+              />
-          )}
+            )}
           {/* For view logs */}
           {modelConfig?.action === 6 && (
             <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
@@ -120,8 +122,8 @@ const AttendancePage = () => {
                 type="button"
                 className={`nav-link ${
                   activeTab === "all" ? "active" : ""
-                } fs-6`}
+                  } fs-6`}
-                onClick={() => setActiveTab("all")}
+                onClick={() => handleTabChange("all")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
               >
@@ -133,8 +135,8 @@ const AttendancePage = () => {
                 type="button"
                 className={`nav-link ${
                   activeTab === "logs" ? "active" : ""
-                } fs-6`}
+                  } fs-6`}
-                onClick={() => setActiveTab("logs")}
+                onClick={() => handleTabChange("logs")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-profile"
               >
@@ -146,40 +148,60 @@ const AttendancePage = () => {
                 type="button"
                 className={`nav-link ${
                   activeTab === "regularization" ? "active" : ""
-                } fs-6`}
+                  } fs-6`}
-                onClick={() => setActiveTab("regularization")}
+                onClick={() => handleTabChange("regularization")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-messages"
               >
                 Regularization
               </button>
             </li>
+
+            {/* 🔹 Search box placed after Regularization tab */}
+            <li className="nav-item ms-auto me-3">
+              <input
+                type="text"
+                className="form-control form-control-sm mt-1"
+                placeholder="Search Employee..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                style={{ minWidth: "200px" }}
+              />
+            </li>
           </ul>
+
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
-  {selectedProject ? (
+            {selectedProject ? (
-    <>
+              <>
-      {activeTab === "all" && (
+                {activeTab === "all" && (
-        <div className="tab-pane fade show active py-0">
+                  <div className="tab-pane fade show active py-0">
-          <Attendance handleModalData={handleModalData} getRole={getRole} />
+                    <Attendance
-        </div>
+                      handleModalData={handleModalData}
-      )}
+                      getRole={getRole}
-      {activeTab === "logs" && (
+                      searchTerm={searchTerm}
-        <div className="tab-pane fade show active py-0">
+                    />
-          <AttendanceLog handleModalData={handleModalData} />
+                  </div>
-        </div>
+                )}
-      )}
+                {activeTab === "logs" && (
-      {activeTab === "regularization" && DoRegularized && (
+                  <div className="tab-pane fade show active py-0">
-        <div className="tab-pane fade show active py-0">
+                    <AttendanceLog
-          <Regularization />
+                      handleModalData={handleModalData}
-        </div>
+                      searchTerm={searchTerm}
-      )}
+                    />
-    </>
+                  </div>
-  ) : (
+                )}
-   <div className="py-2">
+                {activeTab === "regularization" && DoRegularized && (
-     <small className="py-2">Please Select Project!</small>
+                  <div className="tab-pane fade show active py-0">
-   </div>
+                    <Regularization searchTerm={searchTerm} />
-  )}
+                  </div>
-</div>
+                )}
+              </>
+            ) : (
+              <div className="py-2">
+                <small>Please Select Project!</small>
+              </div>
+            )}
+          </div>
 
         </div>
       </div>