From ae83d1d2f6e8a1036b30dbcea839faa283c9c575 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 4 Dec 2025 16:03:55 +0530
Subject: [PATCH] Adding Tabs in attendancepage just like View Jobs.

---
 src/pages/Activities/AttendancePage.jsx | 160 +++++++++++++-----------
 1 file changed, 84 insertions(+), 76 deletions(-)

diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 5b07002e..0c8791f5 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/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,6 +94,49 @@ 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 && (
@@ -114,9 +157,7 @@ const AttendancePage = () => {
           {modelConfig?.action === 6 && (
             <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
           )}
-          {modelConfig?.action === 7 && (
-            <Confirmation closeModal={closeModal} />
-          )}
+          {modelConfig?.action === 7 && <Confirmation closeModal={closeModal} />}
         </GlobalModel>
       )}
 
@@ -129,57 +170,39 @@ const AttendancePage = () => {
         ></Breadcrumb>
 
         <div className="nav-align-top nav-tabs-shadow ">
-          {/* Tabs */}
-          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
+          {/* Tabs header with search and filter */}
+          <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 */}
-              <div className="col-12 col-md">
+              {/* Tabs Buttons */}
+              <div className="col-12 col-md mt-1">
                 <ul className="nav nav-tabs" role="tablist">
-                  <li className="nav-item">
-                    <button
-                      type="button"
-                      className={`nav-link ${
-                        activeTab === "all" ? "active" : ""
-                      } fs-6`}
-                      onClick={() => handleTabChange("all")}
-                      data-bs-toggle="tab"
-                      data-bs-target="#navs-top-home"
+                  {tabsData.map((tab) => (
+                    <li
+                      className={`nav-item ${
+                        tab.id === "regularization" && !DoRegularized
+                          ? "d-none"
+                          : ""
+                      }`} // Keep the d-none logic for regularization, although it's filtered above
+                      key={tab.id}
                     >
-                      Today's
-                    </button>
-                  </li>
-                  <li className="nav-item">
-                    <button
-                      type="button"
-                      className={`nav-link ${
-                        activeTab === "logs" ? "active" : ""
-                      } fs-6`}
-                      onClick={() => handleTabChange("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={() => handleTabChange("regularization")}
-                      data-bs-toggle="tab"
-                      data-bs-target="#navs-top-messages"
-                    >
-                      Regularization
-                    </button>
-                  </li>
+                      <button
+                        type="button"
+                        className={`nav-link ${
+                          activeTab === tab.id ? "active" : ""
+                        } fs-6`}
+                        onClick={() => handleTabChange(tab.id)}
+                        data-bs-toggle="tab"
+                        data-bs-target={`#navs-top-${tab.id}`}
+                      >
+                        {tab.title}
+                      </button>
+                    </li>
+                  ))}
                 </ul>
               </div>
 
               {/* Search + Organization filter */}
-              <div className="col-12 col-md-auto pb-2 m-0 mt-md-0 ms-md-auto nav-tabs">
+              <div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
                 <div className="row g-2">
                   <div className="col-12 col-sm-6">
                     <select
@@ -212,40 +235,25 @@ const AttendancePage = () => {
                   </div>
                 </div>
               </div>
-
             </div>
           </div>
 
+          {/* Tab Content */}
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
             {selectedProject ? (
               <>
-                {activeTab === "all" && (
-                  <div className="tab-pane fade show active py-0 mx-2">
-                    <Attendance
-                      handleModalData={handleModalData}
-                      getRole={getRole}
-                      searchTerm={searchTerm}
-                      organizationId={appliedFilters.selectedOrganization}
-                    />
+                {tabsData.map((tab) => (
+                  <div
+                    key={tab.id}
+                    className={`tab-pane fade ${
+                      activeTab === tab.id ? "show active" : ""
+                    } py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
+                    id={`navs-top-${tab.id}`}
+                    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">
@@ -259,4 +267,4 @@ const AttendancePage = () => {
   );
 };
 
-export default AttendancePage;
+export default AttendancePage;
\ No newline at end of file