Calling api for services dropdwon.

src/components/Project/ProjectInfra.jsx

@@ -17,7 +17,7 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import { useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
+import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../slices/localVariablesSlice";
 import eventBus from "../../services/eventBus";
@@ -39,18 +39,17 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const [showModalTask, setshowModalTask] = useState(false);
   const [showModalBuilding, setshowModalBuilding] = useState(false);
   const dispatch = useDispatch();
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+
+  const [selectedService, setSelectedService] = useState("");
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   useEffect(() => {
     setProject(projectInfra);
   }, [data, projects_Details]);
 
-  // useEffect(() => {
-  //   if (reloadedData) {
-  //     refetch();
-  //     dispatch(refreshData(false));
-  //   }
-  // }, [reloadedData]);
-
   const signalRHandler = (response) => {
     setProject(response);
   }
@@ -96,17 +95,19 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       aria-controls="DataTables_Table_0"
                       className="form-select form-select-sm"
                       aria-label="Select Service"
-                      defaultValue="Fire-Fitting"
-                    // onChange={handleServiceChange}
+                      value={selectedService}
+                      onChange={handleServiceChange}
                     >
-                      <option value="Fire-Fitting">Fire-Fitting</option>
-                      <option value="Welding">Welding</option>
-                      <option value="Plumbing">Plumbing</option>
-                      <option value="Electrical">Electrical</option>
+                   
+                      {servicesLoading && <option>Loading...</option>}
+                      {assignedServices?.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
                     </select>
                   </label>
                 </div>
-
                 {/* Buttons Section (aligned to right) */}
                 <div className="col-md-8 col-12 text-end mb-1">
                   {ManageInfra && (