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();
 
@@ -266,25 +274,29 @@ const Teams = () => {
               </div>
                {/* Services-Dropdown */}
 
-              <div
-                className="dataTables_length text-start py-2 px-2"
-                id="DataTables_Table_0_length"
-              >
-                <label>
-                  <select
-                    name="DataTables_Table_0_length"
-                    aria-controls="DataTables_Table_0"
-                    className="form-select form-select-sm"
-                    // onChange={handleFilterEmployee}
-                    // value={false}
-                    aria-label=""
-                    defaultValue="true"
-                  >
-                    <option value="true">Fire-Fitting</option>
-                    <option value="false">Weilding</option>
-                  </select>
-                </label>
-              </div>
+             <div
+                  className="dataTables_length text-start py-1 px-0 col-md-4 col-12"
+                  id="DataTables_Table_0_length"
+                >
+                  <label>
+                    <select
+                      name="DataTables_Table_0_length"
+                      aria-controls="DataTables_Table_0"
+                      className="form-select form-select-sm"
+                      aria-label="Select Service"
+                      value={selectedService}
+                      onChange={handleServiceChange}
+                      style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                    >
+                      {servicesLoading && <option>Loading...</option>}
+                      {assignedServices?.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
             </div>
             <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
               <div