Calling Api for Services dropdown.

src/components/Project/Teams.jsx

@@ -17,6 +17,7 @@ import eventBus from "../../services/eventBus";
 import {
   useEmployeesByProjectAllocated,
   useManageProjectAllocation,
+  useProjectAssignedServices,
 } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 
@@ -35,6 +36,13 @@ const Teams = () => {
   const [activeEmployee, setActiveEmployee] = useState(true);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+
+  const [selectedService, setSelectedService] = useState("");
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   const navigate = useNavigate();
 
@@ -267,7 +275,7 @@ const Teams = () => {
                {/* Services-Dropdown */}
 
              <div
-                className="dataTables_length text-start py-2 px-2"
+                  className="dataTables_length text-start py-1 px-0 col-md-4 col-12"
                   id="DataTables_Table_0_length"
                 >
                   <label>
@@ -275,13 +283,17 @@ const Teams = () => {
                       name="DataTables_Table_0_length"
                       aria-controls="DataTables_Table_0"
                       className="form-select form-select-sm"
-                    // onChange={handleFilterEmployee}
+                      aria-label="Select Service"
-                    // value={false}
+                      value={selectedService}
-                    aria-label=""
+                      onChange={handleServiceChange}
-                    defaultValue="true"
+                      style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
                     >
-                    <option value="true">Fire-Fitting</option>
+                      {servicesLoading && <option>Loading...</option>}
-                    <option value="false">Weilding</option>
+                      {assignedServices?.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
                     </select>
                   </label>
                 </div>