Calling API in Attendance Dropdown for showing Organization dropdown.

src/pages/Activities/AttendancePage.jsx

@@ -17,7 +17,7 @@ import { hasUserPermission } from "../../utils/authUtils";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
-import { useProjectName } from "../../hooks/useProjects";
+import { useProjectAssignedOrganizations, useProjectName } from "../../hooks/useProjects";
 import GlobalModel from "../../components/common/GlobalModel";
 import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
 import AttendLogs from "../../components/Activities/AttendLogs";
@@ -39,11 +39,15 @@ const AttendancePage = () => {
   const [modelConfig, setModelConfig] = useState();
   const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
+
+  const { data: organizations = [], isLoading: orgLoading } = useProjectAssignedOrganizations(selectedProject);
+
   const [appliedFilters, setAppliedFilters] = useState({
     selectedOrganization: "",
     selectedServices: [],
   });
 
+
   const [formData, setFormData] = useState({
     markTime: "",
     description: "",
@@ -85,7 +89,7 @@ const AttendancePage = () => {
   // Handler to change tab and reset search term
   const handleTabChange = (tabName) => {
     setActiveTab(tabName);
-    setSearchTerm(""); // Reset search term when tab changes
+    setSearchTerm(""); 
   };
 
   return (
@@ -169,18 +173,6 @@ const AttendancePage = () => {
                 </ul>
               </div>
 
-              {/* Single search input that moves */}
-              {/* <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
-                <input
-                  type="text"
-                  className="form-control form-control-sm"
-                  placeholder="Search Employee..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  style={{ minWidth: "200px" }}
-                />
-              </div> */}
-
               {/* Search + Organization filter */}
               <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
                 {/* Organization Dropdown */}
@@ -194,11 +186,14 @@ const AttendancePage = () => {
                       selectedOrganization: e.target.value,
                     }))
                   }
+                  disabled={orgLoading}
                 >
                   <option value="">All Organizations</option>
-                  <option value="Org A">Org A</option>
-                  <option value="Org B">Org B</option>
-                  <option value="Org C">Org C</option>
+                  {organizations?.map((org) => (
+                    <option key={org.id} value={org.id}>
+                      {org.name}
+                    </option>
+                  ))}
                 </select>
 
                 {/* Search Input */}