src/components/Project/Teams.jsx

@@ -36,10 +36,11 @@ const Teams = () => {
   const [activeEmployee, setActiveEmployee] = useState(true);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const [selectedService, setSelectedService] = useState(null);
+
   const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
   const handleToggleActive = e => setActiveEmployee(e.target.checked);
 
-  const [selectedService, setSelectedService] = useState("");
 
   const handleServiceChange = (e) => {
     setSelectedService(e.target.value);
@@ -53,7 +54,7 @@ const Teams = () => {
     projectEmployees,
     loading: employeeLodaing,
     refetch,
-  } = useEmployeesByProjectAllocated(projectId);
+  } = useEmployeesByProjectAllocated(projectId,selectedService);
   const {
     mutate: submitAllocations,
     isPending,
@@ -264,50 +265,38 @@ const Teams = () => {
           <div className="row d-flex justify-content-between mb-4">
             <div className="col-md-6 col-12 d-flex align-items-center">
               <div className="dataTables_length text-start py-1 px-0 col-md-4 col-12">
-                {servicesLoading ? (
-                  <span></span>
-                ) : assignedServices?.length > 1 ? (
-                  <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" }}
-                    >
-                      {assignedServices.map((service) => (
-                        <option key={service.id} value={service.id}>
-                          {service.name}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                {servicesLoading ? null : assignedServices && assignedServices.length > 0 ? (
+                  assignedServices.length > 1 ? (
+                    <label>
+                      <select
+                        name="serviceFilter"
+                        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" }}
+                      >
+                        <option value="">All Services</option>
+                        {assignedServices.map((service) => (
+                          <option key={service.id} value={service.id}>
+                            {service.name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : (
+                    <div>
+                      <h5>{assignedServices[0].name}</h5>
+                    </div>
+                  )
                 ) : (
-                  <div
-                    style={{
-                          
-                    }}
-                  >
-                    {/* fier fitting */}
-                    {assignedServices?.length === 1
-                      ?<h5>{ assignedServices[0].name}</h5>
-                      : "No service available"}
+                  <div>
+                    <h5>No Services Assigned</h5>
                   </div>
                 )}
               </div>
 
-              {/* <div className="dataTables_filter d-inline-flex align-items-center ms-2">
-                <input
-                  type="search"
-                  className="form-control form-control-sm me-4"
-                  placeholder="Search by Name or Role"
-                  aria-controls="DataTables_Table_0"
-                  value={searchTerm}
-                  onChange={handleSearch}
-                />
-              </div> */}
 
             </div>
             <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
@@ -393,7 +382,7 @@ const Teams = () => {
                             </div>
                           </td>
 
-                          <td>{item.services || "N/A"}</td>
+                          <td>{item.serviceName || "N/A"}</td>
                           <td>{item.organizationName || "N/A"}</td>
 
                           <td>

src/hooks/useProjects.js

@@ -41,22 +41,30 @@ export const useProjects = () => {
   };
 };
 
-export const useEmployeesByProjectAllocated = (selectedProject) => {
+export const useEmployeesByProjectAllocated = (
+  projectId,
+  serviceId,
+    organizationId,
+) => {
   const {
     data = [],
     isLoading,
     refetch,
     error,
   } = useQuery({
-    queryKey: ["empListByProjectAllocated", selectedProject],
+    queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId],
     queryFn: async () => {
-      const res = await ProjectRepository.getProjectAllocation(selectedProject);
-      return res.data || res;
+      const res = await ProjectRepository.getProjectAllocation(
+        projectId,
+        organizationId,
+        serviceId
+      );
+      return res?.data || res;
     },
-    enabled: !!selectedProject,
+    enabled: !!projectId, 
     onError: (error) => {
       showToast(
-        error.message || "Error while Fetching project Allocated Employees",
+        error.message || "Error while fetching project allocated employees",
         "error"
       );
     },
@@ -270,7 +278,7 @@ export const useProjectLevelEmployeePermission = (employeeId, projectId) => {
 
 export const useProjectAssignedOrganizations =(projectId)=>{
   return useQuery({
-    queryKey: ["projectAssignedServices", projectId],
+    queryKey: ["projectAssignedOrganization", projectId],
     queryFn: async () => {
       const resp = await ProjectRepository.getProjectAssignedOrganizations(projectId);
       return resp.data;

src/repositories/ProjectRepository.jsx

@@ -5,8 +5,20 @@ const ProjectRepository = {
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 
-  getProjectAllocation: (projetid) =>
-    api.get(`api/project/allocation/${projetid}`),
+  getProjectAllocation: (projectId, organizationId, serviceId) => {
+    let url = `/api/project/allocation/${projectId}`;
+
+    const params = [];
+    if (organizationId) params.push(`organizationId=${organizationId}`);
+    if (serviceId) params.push(`serviceId=${serviceId}`);
+
+    if (params.length > 0) {
+      url += `?${params.join("&")}`;
+    }
+
+    return api.get(url);
+  },
+
 
   getEmployeesByProject: (projectId) =>
     api.get(`/api/Project/employees/get/${projectId}`),
@@ -39,18 +51,18 @@ const ProjectRepository = {
     ),
 
 
-    // Permission Managment for Employee at Project Level
+  // Permission Managment for Employee at Project Level
 
-    getProjectLevelEmployeeList:(projectId)=>api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
-    getProjectLevelModules:()=>api.get(`/api/Project/get/proejct-level/modules`),
-    getProjectLevelEmployeePermissions:(employeeId,projectId)=>api.get(`/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`),
-    updateProjectLevelEmployeePermission:(data)=>api.post(`/api/Project/assign/project-level-permission`,data),
-    getAllProjectLevelPermission:(projectId)=>api.get(`/api/Project/get/all/project-level-permission/${projectId}`),
+  getProjectLevelEmployeeList: (projectId) => api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
+  getProjectLevelModules: () => api.get(`/api/Project/get/proejct-level/modules`),
+  getProjectLevelEmployeePermissions: (employeeId, projectId) => api.get(`/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`),
+  updateProjectLevelEmployeePermission: (data) => api.post(`/api/Project/assign/project-level-permission`, data),
+  getAllProjectLevelPermission: (projectId) => api.get(`/api/Project/get/all/project-level-permission/${projectId}`),
 
 
-    // Services
-    getProjectAssignedServices:(projectId)=>api.get(`/api/Project/get/assigned/services/${projectId}`),
-    getProjectAssignedOrganizations:(projectId)=>api.get(`/api/Project/get/assigned/organization/${projectId}`)
+  // Services
+  getProjectAssignedServices: (projectId) => api.get(`/api/Project/get/assigned/services/${projectId}`),
+  getProjectAssignedOrganizations: (projectId) => api.get(`/api/Project/get/assigned/organization/${projectId}`)
 };
 
 export const TasksRepository = {