From fa694d83614cdd6dd6b17f3eabc859f1d77ff020 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Sat, 13 Dec 2025 11:37:53 +0530
Subject: [PATCH] Correction in Attendance page.

---
 src/pages/Activities/AttendancePage.jsx | 90 +++++++++++--------------
 1 file changed, 38 insertions(+), 52 deletions(-)

diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 23e8b75a..0e3af802 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -136,6 +136,15 @@ const AttendancePage = () => {
       : []),
   ];
   // --- END: Tab Configuration Array
+  useEffect(() => {
+    if (!orgLoading && organizations?.length === 1) {
+      setAppliedFilters((prev) => ({
+        ...prev,
+        selectedOrganization: organizations[0].id,
+      }));
+    }
+  }, [orgLoading, organizations]);
+
 
   return (
     <>
@@ -173,19 +182,21 @@ const AttendancePage = () => {
           {/* 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 Buttons - Now col-12 col-md-6 */}
-              <div className="col-12 col-md-6 mt-1">
+              {/* Tabs Buttons */}
+              <div className="col-12 col-md mt-1">
                 <ul className="nav nav-tabs" role="tablist">
                   {tabsData.map((tab) => (
                     <li
-                      className={`nav-item ${tab.id === "regularization" && !DoRegularized ? "d-none" : ""
-                        }`}
+                      className={`nav-item ${tab.id === "regularization" && !DoRegularized
+                        ? "d-none"
+                        : ""
+                        }`} // Keep the d-none logic for regularization, although it's filtered above
                       key={tab.id}
                     >
                       <button
                         type="button"
-                        className={`nav-link ${activeTab === tab.id ? "active" : ""} fs-6`}
+                        className={`nav-link ${activeTab === tab.id ? "active" : ""
+                          } fs-6`}
                         onClick={() => handleTabChange(tab.id)}
                         data-bs-toggle="tab"
                         data-bs-target={`#navs-top-${tab.id}`}
@@ -197,51 +208,29 @@ const AttendancePage = () => {
                 </ul>
               </div>
 
-              {/* Search + Organization Filter - Now col-12 col-md-6 */}
-              <div className="col-12 col-md-6 mb-2 mt-md-0">
-                <div className="row g-0">
-
-                  {/* Organization */}
+              {/* Search + Organization filter */}
+              <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">
-
-                    {/* If only 1 organization → show name only */}
-                    {!orgLoading && organizations?.length === 1 && (
-                      <h5 className="m-0 ">{organizations[0].name}</h5>
-                    )}
-
-                    {/* If multiple organizations → show dropdown */}
-                    {!orgLoading && organizations?.length > 1 && (
-                      <select
-                        className="form-select form-select-sm"
-                        value={appliedFilters.selectedOrganization}
-                        onChange={(e) =>
-                          setAppliedFilters((prev) => ({
-                            ...prev,
-                            selectedOrganization: e.target.value,
-                          }))
-                        }
-                        disabled={orgLoading}
-                      >
-                        <option value="">All Organizations</option>
-                        {organizations?.map((org, ind) => (
-                          <option key={`${org.id}-${ind}`} value={org.id}>
-                            {org.name}
-                          </option>
-                        ))}
-                      </select>
-                    )}
-
-                    {/* Loading case (optional) */}
-                    {orgLoading && (
-                      <div className="form-control form-control-sm disabled">
-                        Loading...
-                      </div>
-                    )}
-
+                    <select
+                      className="form-select form-select-sm"
+                      value={appliedFilters.selectedOrganization}
+                      onChange={(e) =>
+                        setAppliedFilters((prev) => ({
+                          ...prev,
+                          selectedOrganization: e.target.value,
+                        }))
+                      }
+                      disabled={orgLoading}
+                    >
+                      <option value="">All Organizations</option>
+                      {organizations?.map((org, ind) => (
+                        <option key={`${org.id}-${ind}`} value={org.id}>
+                          {org.name}
+                        </option>
+                      ))}
+                    </select>
                   </div>
-
-
-                  {/* Search */}
                   <div className="col-12 col-sm-6">
                     <input
                       type="text"
@@ -251,14 +240,11 @@ const AttendancePage = () => {
                       onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
-
                 </div>
               </div>
-
             </div>
           </div>
 
-
           {/* Tab Content */}
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
             {selectedProject ? (