src/pages/Activities/AttendancePage.jsx

@@ -59,7 +59,7 @@ const AttendancePage = () => {
     if (selectedProject == null) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
-    dispatch(setOrganization(appliedFilters?.selectedOrganization));
+    dispatch(setOrganization(appliedFilters?.selectedOrganization))
   }, [appliedFilters?.selectedOrganization]);
 
   const getRole = (roleId) => {
@@ -94,49 +94,6 @@ const AttendancePage = () => {
     setSearchTerm(""); // Reset search term when tab changes
   };
 
-  // --- START: Tab Configuration Array
-  const tabsData = [
-    {
-      id: "all",
-      title: "Today's",
-      content: (
-        <Attendance
-          handleModalData={handleModalData}
-          getRole={getRole}
-          searchTerm={searchTerm}
-          organizationId={appliedFilters.selectedOrganization}
-        />
-      ),
-    },
-    {
-      id: "logs",
-      title: "Logs",
-      content: (
-        <AttendanceLog
-          handleModalData={handleModalData}
-          searchTerm={searchTerm}
-          organizationId={appliedFilters.selectedOrganization}
-        />
-      ),
-    },
-    // Conditionally include Regularization tab based on permission
-    ...(DoRegularized
-      ? [
-          {
-            id: "regularization",
-            title: "Regularization",
-            content: (
-              <Regularization
-                searchTerm={searchTerm}
-                organizationId={appliedFilters.selectedOrganization}
-              />
-            ),
-          },
-        ]
-      : []),
-  ];
-  // --- END: Tab Configuration Array
-
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -157,7 +114,9 @@ const AttendancePage = () => {
           {modelConfig?.action === 6 && (
             <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
           )}
-          {modelConfig?.action === 7 && <Confirmation closeModal={closeModal} />}
+          {modelConfig?.action === 7 && (
+            <Confirmation closeModal={closeModal} />
+          )}
         </GlobalModel>
       )}
 
@@ -170,39 +129,57 @@ const AttendancePage = () => {
         ></Breadcrumb>
 
         <div className="nav-align-top nav-tabs-shadow ">
-          {/* Tabs header with search and filter */}
+          {/* Tabs */}
-          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
+          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
             <div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
-              {/* Tabs Buttons */}
+              {/* Tabs */}
-              <div className="col-12 col-md mt-1">
+              <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">
-                  {tabsData.map((tab) => (
+                  <li className="nav-item">
-                    <li
+                    <button
-                      className={`nav-item ${
+                      type="button"
-                        tab.id === "regularization" && !DoRegularized
+                      className={`nav-link ${
-                          ? "d-none"
+                        activeTab === "all" ? "active" : ""
-                          : ""
+                      } fs-6`}
-                      }`} // Keep the d-none logic for regularization, although it's filtered above
+                      onClick={() => handleTabChange("all")}
-                      key={tab.id}
+                      data-bs-toggle="tab"
+                      data-bs-target="#navs-top-home"
                     >
-                      <button
+                      Today's
-                        type="button"
+                    </button>
-                        className={`nav-link ${
+                  </li>
-                          activeTab === tab.id ? "active" : ""
+                  <li className="nav-item">
-                        } fs-6`}
+                    <button
-                        onClick={() => handleTabChange(tab.id)}
+                      type="button"
-                        data-bs-toggle="tab"
+                      className={`nav-link ${
-                        data-bs-target={`#navs-top-${tab.id}`}
+                        activeTab === "logs" ? "active" : ""
-                      >
+                      } fs-6`}
-                        {tab.title}
+                      onClick={() => handleTabChange("logs")}
-                      </button>
+                      data-bs-toggle="tab"
-                    </li>
+                      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={() => handleTabChange("regularization")}
+                      data-bs-toggle="tab"
+                      data-bs-target="#navs-top-messages"
+                    >
+                      Regularization
+                    </button>
+                  </li>
                 </ul>
               </div>
 
               {/* Search + Organization filter */}
-              <div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
+              <div className="col-12 col-md-auto pb-2 m-0 mt-md-0 ms-md-auto nav-tabs">
                 <div className="row g-2">
                   <div className="col-12 col-sm-6">
                     <select
@@ -235,25 +212,40 @@ const AttendancePage = () => {
                   </div>
                 </div>
               </div>
+
             </div>
           </div>
 
-          {/* Tab Content */}
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
             {selectedProject ? (
               <>
-                {tabsData.map((tab) => (
+                {activeTab === "all" && (
-                  <div
+                  <div className="tab-pane fade show active py-0 mx-2">
-                    key={tab.id}
+                    <Attendance
-                    className={`tab-pane fade ${
+                      handleModalData={handleModalData}
-                      activeTab === tab.id ? "show active" : ""
+                      getRole={getRole}
-                    } py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
+                      searchTerm={searchTerm}
-                    id={`navs-top-${tab.id}`}
+                      organizationId={appliedFilters.selectedOrganization}
-                    role="tabpanel"
+                    />
-                  >
-                    {activeTab === tab.id && tab.content}
                   </div>
-                ))}
+                )}
+                {activeTab === "logs" && (
+                  <div className="tab-pane fade p-3 show active py-0">
+                    <AttendanceLog
+                      handleModalData={handleModalData}
+                      searchTerm={searchTerm}
+                      organizationId={appliedFilters.selectedOrganization}
+                    />
+                  </div>
+                )}
+                {activeTab === "regularization" && DoRegularized && (
+                  <div className="tab-pane fade p-3 show active py-0">
+                    <Regularization
+                      searchTerm={searchTerm}
+                      organizationId={appliedFilters.selectedOrganization}
+                    />
+                  </div>
+                )}
               </>
             ) : (
               <div className="py-2">
@@ -267,4 +259,4 @@ const AttendancePage = () => {
   );
 };
 
-export default AttendancePage;
+export default AttendancePage;