src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback } 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, searchTerm }) => {
+const Attendance = ({ getRole, handleModalData }) => {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
@@ -48,40 +48,18 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
     .filter((d) => d.activity === 0)
     .sort(sortByName);
 
-  const finalFilteredData = useMemo(() => {
+  const filteredData = [...group1, ...group2];
-    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(
-    finalFilteredData,
+    filteredData,
     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
@@ -94,7 +72,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
 
   const employeeHandler = useCallback(
     (msg) => {
-      if (attendance.some((item) => item.employeeId == msg.employeeId)) {
+      if (attendances.some((item) => item.employeeId == msg.employeeId)) {
         attrecall();
       }
     },
@@ -128,9 +106,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
             <label className="form-check-label ms-0">Show Pending</label>
           </div>
         </div>
-        {attLoading ? (
+        {Array.isArray(attendance) && attendance.length > 0 ? (
-          <div>Loading...</div>
-        ) : currentItems?.length > 0 ? (
           <>
             <table className="table ">
               <thead>
@@ -212,11 +188,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
               </tbody>
             </table>
 
-            {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
+            {!loading && filteredData.length > 20 && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
+                    className={`page-item  ${
+                      currentPage === 1 ? "disabled" : ""
                     }`}
                   >
                     <button
@@ -229,7 +206,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${currentPage === index + 1 ? "active" : ""
+                      className={`page-item ${
+                        currentPage === index + 1 ? "active" : ""
                       }`}
                     >
                       <button
@@ -241,7 +219,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    className={`page-item ${
+                      currentPage === totalPages ? "disabled" : ""
                     }`}
                   >
                     <button
@@ -255,15 +234,19 @@ const Attendance = ({ getRole, handleModalData, searchTerm }) => {
               </nav>
             )}
           </>
+        ) : attLoading ? (
+          <div>Loading...</div>
         ) : (
-          <div className="text-muted my-4">
+          <div className="text-muted">
-            {searchTerm
+            {Array.isArray(attendance)
-              ? "No results found for your search."
+              ? "No employees assigned to the project"
-              : attendanceList.length === 0
+              : "Attendance data unavailable"}
-                ? "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,7 +33,9 @@ const usePagination = (data, itemsPerPage) => {
   };
 };
 
-const AttendanceLog = ({ handleModalData, searchTerm }) => {
+const AttendanceLog = ({
+  handleModalData,
+}) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
@@ -137,29 +139,17 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
     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(filteredSearchData, 20);
+  } = usePagination(processedData, 20);
 
   useEffect(() => {
     resetPage();
-  }, [filteredSearchData, resetPage]);
+  }, [processedData, resetPage]);
 
   const handler = useCallback(
     (msg) => {
@@ -170,23 +160,20 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
         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;
           }
-          const updatedAttendance = oldData.map((record) =>
+          return oldData.map((record) =>
-            record.id === msg.response.id
+          record.id === msg.response.id ? { ...record, ...msg.response } : record
-              ? { ...record, ...msg.response }
-              : record
         );
+        })
+
         filtering(updatedAttendance);
-          return updatedAttendance;
-        });
         resetPage();
       }
     },
-    [selectedProject, dateRange, filtering, resetPage]
+    [selectedProject, dateRange, data, filtering, resetPage]
   );
 
   useEffect(() => {
@@ -209,7 +196,7 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
         refetch()
       }
     },
-    [selectedProject, dateRange, data, refetch]
+    [selectedProject, dateRange, data]
   );
 
   useEffect(() => {
@@ -253,10 +240,8 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
       </div>
       <div className="table-responsive text-nowrap">
         {isLoading ? (
-          <div>
+          <div><p className="text-secondary">Loading...</p></div>
-            <p className="text-secondary">Loading...</p>
+        ) : data?.length > 0 ? (
-          </div>
-        ) : filteredSearchData?.length > 0 ? (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -347,12 +332,10 @@ const AttendanceLog = ({ handleModalData, searchTerm }) => {
            <div className="my-4"><span className="text-secondary">No Record Available !</span></div>
         )}
       </div>
-      {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
+        {paginatedAttendances?.length == 0 && data?.length > 0 && (
-        <div className="my-4">
+          <div className="my-4"><span className="text-secondary">No Pending Record Available !</span></div>
-          <span className="text-secondary">No Pending Record Available !</span>
-        </div>
         )}
-      {filteredSearchData.length > 10 && (
+      {processedData.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, useMemo } from "react";
+import React, { useCallback, useEffect, useState } 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, searchTerm }) => {
+const Regularization = ({ handleRequest }) => {
   const queryClient = useQueryClient();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const [regularizesList, setregularizedList] = useState([]);
@@ -30,6 +30,8 @@ const Regularization = ({ handleRequest, searchTerm }) => {
   const handler = useCallback(
     (msg) => {
       if (selectedProject == msg.projectId) {
+    
+
         queryClient.setQueryData(
           ["regularizedList", selectedProject],
           (oldData) => {
@@ -45,27 +47,12 @@ const Regularization = ({ handleRequest, searchTerm }) => {
     [selectedProject, regularizes]
   );
 
-  // Filter the data based on the search term and sort it
+  const filteredData = [...regularizesList]?.sort(sortByName);
-  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);
@@ -143,9 +130,8 @@ const Regularization = ({ handleRequest, searchTerm }) => {
         </table>
       ) : (
         <div className="my-4">
-          <span className="text-secondary">
+          {" "}
-            {searchTerm ? "No results found for your search." : "No Requests Found !"}
+          <span className="text-secondary">No Requests Found !</span>
-          </span>
         </div>
       )}
       {!loading && totalPages > 1 && (

src/pages/Activities/AttendancePage.jsx

@@ -25,7 +25,6 @@ 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);
@@ -70,18 +69,17 @@ 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 && (
@@ -123,7 +121,7 @@ const AttendancePage = () => {
                 className={`nav-link ${
                   activeTab === "all" ? "active" : ""
                 } fs-6`}
-                onClick={() => handleTabChange("all")}
+                onClick={() => setActiveTab("all")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
               >
@@ -136,7 +134,7 @@ const AttendancePage = () => {
                 className={`nav-link ${
                   activeTab === "logs" ? "active" : ""
                 } fs-6`}
-                onClick={() => handleTabChange("logs")}
+                onClick={() => setActiveTab("logs")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-profile"
               >
@@ -149,59 +147,39 @@ const AttendancePage = () => {
                 className={`nav-link ${
                   activeTab === "regularization" ? "active" : ""
                 } fs-6`}
-                onClick={() => handleTabChange("regularization")}
+                onClick={() => setActiveTab("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 ? (
     <>
       {activeTab === "all" && (
         <div className="tab-pane fade show active py-0">
-                    <Attendance
+          <Attendance handleModalData={handleModalData} getRole={getRole} />
-                      handleModalData={handleModalData}
-                      getRole={getRole}
-                      searchTerm={searchTerm}
-                    />
         </div>
       )}
       {activeTab === "logs" && (
         <div className="tab-pane fade show active py-0">
-                    <AttendanceLog
+          <AttendanceLog handleModalData={handleModalData} />
-                      handleModalData={handleModalData}
-                      searchTerm={searchTerm}
-                    />
         </div>
       )}
       {activeTab === "regularization" && DoRegularized && (
         <div className="tab-pane fade show active py-0">
-                    <Regularization searchTerm={searchTerm} />
+          <Regularization />
         </div>
       )}
     </>
   ) : (
    <div className="py-2">
-                <small>Please Select Project!</small>
+     <small className="py-2">Please Select Project!</small>
    </div>
   )}
-          </div>
+</div>
 
         </div>
       </div>