src/components/Project/Teams.jsx

@@ -36,11 +36,10 @@ 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);
@@ -54,7 +53,7 @@ const Teams = () => {
     projectEmployees,
     loading: employeeLodaing,
     refetch,
-  } = useEmployeesByProjectAllocated(projectId,selectedService);
+  } = useEmployeesByProjectAllocated(projectId);
   const {
     mutate: submitAllocations,
     isPending,
@@ -154,6 +153,7 @@ const Teams = () => {
       setEmpJobRoles(data);
     }
   }, [data]);
+
   const filterAndSearchEmployees = useCallback(() => {
     const statusFiltered = employees.filter((emp) =>
       activeEmployee ? emp.isActive : !emp.isActive
@@ -165,25 +165,20 @@ const filterAndSearchEmployees = useCallback(() => {
     }
 
     const lowercasedSearchTerm = searchTerm.toLowerCase();
-
     const searchedAndFiltered = statusFiltered.filter((item) => {
-    const fullName = `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
+      const fullName =
+        `${item.firstName} ${item.middleName} ${item.lastName}`.toLowerCase();
       const roleName = getRole(item.jobRoleId).toLowerCase();
-    const orgName = (item.organizationName || "").toLowerCase();
-    const serviceName = (item.serviceName || "").toLowerCase();
 
       return (
         fullName.includes(lowercasedSearchTerm) ||
-      roleName.includes(lowercasedSearchTerm) ||
-      orgName.includes(lowercasedSearchTerm) ||
-      serviceName.includes(lowercasedSearchTerm)
+        roleName.includes(lowercasedSearchTerm)
       );
     });
 
     setFilteredEmployees(searchedAndFiltered);
   }, [employees, activeEmployee, searchTerm, getRole]);
 
-
   useEffect(() => {
     filterAndSearchEmployees();
   }, [employees, activeEmployee, searchTerm, filterAndSearchEmployees]);
@@ -269,11 +264,12 @@ const filterAndSearchEmployees = useCallback(() => {
           <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 ? null : assignedServices && assignedServices.length > 0 ? (
-                  assignedServices.length > 1 ? (
+                {servicesLoading ? (
+                  <span></span>
+                ) : assignedServices?.length > 1 ? (
                   <label>
                     <select
-                        name="serviceFilter"
+                      name="DataTables_Table_0_length"
                       aria-controls="DataTables_Table_0"
                       className="form-select form-select-sm"
                       aria-label="Select Service"
@@ -281,7 +277,6 @@ const filterAndSearchEmployees = useCallback(() => {
                       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}
@@ -290,17 +285,29 @@ const filterAndSearchEmployees = useCallback(() => {
                     </select>
                   </label>
                 ) : (
-                    <div>
-                      <h5>{assignedServices[0].name}</h5>
-                    </div>
-                  )
-                ) : (
-                  <div>
+                  <div
+                    style={{
                           
+                    }}
+                  >
+                    {/* fier fitting */}
+                    {assignedServices?.length === 1
+                      ?<h5>{ assignedServices[0].name}</h5>
+                      : "No service available"}
                   </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">
@@ -350,7 +357,6 @@ const filterAndSearchEmployees = useCallback(() => {
                       <th>
                         <div className="text-start ms-5">Name</div>
                       </th>
-                      <th>Services</th>
                       <th>Organization</th>
                       <th>Assigned Date</th>
                       {!activeEmployee && <th>Release Date</th>}
@@ -386,7 +392,6 @@ const filterAndSearchEmployees = useCallback(() => {
                             </div>
                           </td>
 
-                          <td>{item.serviceName || "N/A"}</td>
                           <td>{item.organizationName || "N/A"}</td>
 
                           <td>

src/hooks/useProjects.js

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

src/repositories/ProjectRepository.jsx

@@ -5,20 +5,8 @@ const ProjectRepository = {
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${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);
-  },
-
+  getProjectAllocation: (projetid) =>
+    api.get(`api/project/allocation/${projetid}`),
 
   getEmployeesByProject: (projectId) =>
     api.get(`/api/Project/employees/get/${projectId}`),