src/components/Activities/AttendcesLogs.jsx

@@ -36,7 +36,7 @@ const usePagination = (data, itemsPerPage) => {
     totalPages: maxPage,
     currentItems,
     paginate,
-    resetPage,
+    resetPage, // Ensure resetPage is returned here
   };
 };
 

src/components/Activities/Regularization.jsx

@@ -49,6 +49,7 @@ const Regularization = ({ handleRequest, searchQuery }) => {
     [regularizes]
   );
 
+  useEffect(() => {
   useEffect(() => {
     eventBus.on("regularization", handler);
     return () => eventBus.off("regularization", handler);
@@ -182,3 +183,4 @@ const Regularization = ({ handleRequest, searchQuery }) => {
 
 export default Regularization;
 
+

src/pages/Activities/AttendancePage.jsx

@@ -8,7 +8,7 @@ import {
 import Breadcrumb from "../../components/common/Breadcrumb";
 import AttendanceLog from "../../components/Activities/AttendcesLogs";
 import Attendance from "../../components/Activities/Attendance";
-// import AttendanceModel from "../../components/Activities/AttendanceModel";
+import AttendanceModel from "../../components/Activities/AttendanceModel";
 import showToast from "../../services/toastService";
 import Regularization from "../../components/Activities/Regularization";
 import { useAttendance } from "../../hooks/useAttendance";
@@ -18,26 +18,25 @@ import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice"
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
-// import AttendanceRepository from "../../repositories/AttendanceRepository";
+import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useProjectName } from "../../hooks/useProjects";
-import GlobalModel from "../../components/common/GlobalModel";
-import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
-import AttendLogs from "../../components/Activities/AttendLogs";
-// import Confirmation from "../../components/Activities/Confirmation";
-import { useQueryClient } from "@tanstack/react-query";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
   const [showPending, setShowPending] = useState(false); // Renamed for consistency
   const [searchQuery, setSearchQuery] = useState("");
+  const [showPending, setShowPending] = useState(false); // Renamed for consistency
+  const [searchQuery, setSearchQuery] = useState("");
   const loginUser = getCachedProfileData();
   const selectedProject = useSelector((store) => store.localVariables.projectId);
   const dispatch = useDispatch();
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const dispatch = useDispatch();
   const {
     attendance,
     loading: attLoading,
     recall: attrecall,
-  } = useAttendace(selectedProject);
+  } = useAttendance(selectedProject); // Corrected typo: useAttendace to useAttendance
   const [attendances, setAttendances] = useState();
   const [empRoles, setEmpRoles] = useState(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -46,6 +45,7 @@ const AttendancePage = () => {
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
 
+
   const [formData, setFormData] = useState({
     markTime: "",
     description: "",
@@ -94,6 +94,7 @@ const AttendancePage = () => {
     if (!empRoles) return "Unassigned";
     if (!roleId) return "Unassigned";
     const role = empRoles.find((b) => b.id === roleId);
+    const role = empRoles.find((b) => b.id === roleId);
     return role ? role.role : "Unassigned";
   };
 
@@ -117,6 +118,10 @@ const AttendancePage = () => {
       if (modalBackdrop) {
         modalBackdrop.remove();
       }
+      const modalBackdrop = document.querySelector(".modal-backdrop");
+      if (modalBackdrop) {
+        modalBackdrop.remove();
+      }
     }
   };
 
@@ -150,13 +155,21 @@ const AttendancePage = () => {
 
   const handleToggle = (event) => {
     setShowPending(event.target.checked);
+    setShowPending(event.target.checked);
   };
+
   useEffect(() => {
     if (selectedProject === null && projectNames.length > 0) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
   }, [selectedProject, projectNames, dispatch]);
 
+  // Open modal when modelConfig is set
+    if (selectedProject === null && projectNames.length > 0) {
+      dispatch(setProjectId(projectNames[0]?.id));
+    }
+  }, [selectedProject, projectNames, dispatch]);
+
   // Open modal when modelConfig is set
   useEffect(() => {
     if (modelConfig !== null) {
@@ -168,10 +181,15 @@ const AttendancePage = () => {
     setAttendances(attendance);
   }, [attendance]);
 
+  // Filter and search logic for the 'Today's' tab (Attendance component)
+  const filteredAndSearchedTodayAttendance = useCallback(() => {
+    let currentData = attendances;
   // Filter and search logic for the 'Today's' tab (Attendance component)
   const filteredAndSearchedTodayAttendance = useCallback(() => {
     let currentData = attendances;
 
+    if (showPending) {
+      currentData = currentData?.filter(
     if (showPending) {
       currentData = currentData?.filter(
         (att) => att?.checkInTime !== null && att?.checkOutTime === null
@@ -198,23 +216,47 @@ const AttendancePage = () => {
   }, [attendances, showPending, searchQuery]);
 
 
+  // Event bus listeners
+      );
+    }
+
+    if (searchQuery) {
+      const lowerCaseSearchQuery = searchQuery.toLowerCase();
+      currentData = currentData?.filter((att) => {
+        // Combine first, middle, and last names for a comprehensive search
+        const fullName = [att.firstName, att.middleName, att.lastName]
+          .filter(Boolean) // Remove null or undefined parts
+          .join(" ")
+          .toLowerCase();
+
+        return (
+          att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
+          att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
+          fullName.includes(lowerCaseSearchQuery)
+        );
+      });
+    }
+    return currentData;
+  }, [attendances, showPending, searchQuery]);
+
+
   // Event bus listeners
   useEffect(() => {
     eventBus.on("attendance", handler);
     return () => eventBus.off("attendance", handler);
   }, [handler]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   eventBus.on("employee", employeeHandler);
+    eventBus.on("employee", employeeHandler);
-  //   return () => eventBus.off("employee", employeeHandler);
+    return () => eventBus.off("employee", employeeHandler);
-  // }, [employeeHandler]);
+  }, [employeeHandler]);
   return (
     <>
-      {/* {isCreateModalOpen && modelConfig && (
+      {isCreateModalOpen && modelConfig && (
         <div
           className="modal fade show"
           style={{ display: "block" }}
-          id="check-Out-modalg"
+          id="check-Out-modal"
           tabIndex="-1"
           aria-hidden="true"
         >
@@ -224,29 +266,6 @@ const AttendancePage = () => {
             handleSubmitForm={handleSubmit}
           />
         </div>
-      )} */}
-      {isCreateModalOpen && modelConfig && (
-        <GlobalModel
-          isOpen={isCreateModalOpen}
-          size={modelConfig?.action === 6 && "lg"}
-          closeModal={closeModal}
-        >
-          {(modelConfig?.action === 0 ||
-            modelConfig?.action === 1 ||
-            modelConfig?.action === 2) && (
-            <CheckCheckOutmodel
-              modeldata={modelConfig}
-              closeModal={closeModal}
-            />
-          )}
-          {/* For view logs */}
-          {modelConfig?.action === 6 && (
-            <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
-          )}
-          {modelConfig?.action === 7 && (
-            <Confirmation closeModal={closeModal} />
-          )}
-        </GlobalModel>
       )}
 
       <div className="container-fluid">
@@ -306,9 +325,60 @@ const AttendancePage = () => {
               />
             </div>
 
+          <ul className="nav nav-tabs d-flex justify-content-between align-items-center" role="tablist">
+            <div className="d-flex">
+              <li className="nav-item">
+                <button
+                  type="button"
+                  className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
+                  onClick={() => setActiveTab("all")}
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-top-home"
+                >
+                  Today's
+                </button>
+              </li>
+              <li className="nav-item">
+                <button
+                  type="button"
+                  className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
+                  onClick={() => setActiveTab("logs")}
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-top-profile"
+                >
+                  Logs
+                </button>
+              </li>
+              <li className={`nav-item ${!DoRegularized && "d-none"}`}>
+                <button
+                  type="button"
+                  className={`nav-link ${activeTab === "regularization" ? "active" : ""
+                    } fs-6`}
+                  onClick={() => setActiveTab("regularization")}
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-top-messages"
+                >
+                  Regularization
+                </button>
+              </li>
+            </div>
+            {/* Search Box remains here */}
+            <div className="p-2">
+              <input
+                type="text"
+                className="form-control form-control-sm" // Bootstrap small size input
+                placeholder="Search employee..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              // style={{ width: "200px", height: "30px" }} // Optional: further reduce width/height
+              />
+            </div>
+
           </ul>
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
             {activeTab === "all" && (
+              <>
+                {!attLoading && (
                   <div className="tab-pane fade show active py-0">
                     <Attendance
                       attendance={filteredAndSearchedTodayAttendance()}
@@ -322,12 +392,13 @@ const AttendancePage = () => {
                 {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
                   <p>
                     {" "}
+                    {showPending
                     {showPending
                       ? "No Pending Available"
                       : "No Employee assigned yet."}{" "}
                   </p>
                 )}
-              </>
+              </div>
             )}
             {activeTab === "logs" && (
               <div className="tab-pane fade show active py-0">
@@ -337,6 +408,8 @@ const AttendancePage = () => {
                   setshowOnlyCheckout={setShowPending}
                   showOnlyCheckout={showPending}
                   searchQuery={searchQuery} // Pass search query to AttendanceLog
+                  showOnlyCheckout={showPending}
+                  searchQuery={searchQuery} // Pass search query to AttendanceLog
                 />
               </div>
             )}
@@ -346,6 +419,10 @@ const AttendancePage = () => {
                   handleRequest={handleSubmit}
                   searchQuery={searchQuery} // ✅ Pass it here
                 />
+                <Regularization
+                  handleRequest={handleSubmit}
+                  searchQuery={searchQuery} // ✅ Pass it here
+                />
               </div>
             )}