Integrate the API for Work Area and fetch data filtered by serviceId.

src/components/Project/Infrastructure/Floor.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ({ floor, workAreas, forBuilding }) => {
+const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
   return (
     <React.Fragment key={floor.id}>
       {workAreas && workAreas.length > 0 ? (
@@ -10,6 +10,7 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
             key={workArea.id}
             workArea={workArea}
             floor={floor}
+            serviceId={serviceId}
           />
         ))
       ) : (

src/components/Project/Infrastructure/InfraTable.jsx

@@ -11,7 +11,7 @@ import {
   getCachedData,
 } from "../../../slices/apiDataManager";
 
-const InfraTable = ({ buildings, projectId}) => {
+const InfraTable = ({ buildings, projectId, serviceId }) => {
   const [projectBuilding, setProjectBuilding] = useState([]);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [showFloorModal, setShowFloorModal] = useState(false);
@@ -90,6 +90,7 @@ const InfraTable = ({ buildings, projectId}) => {
           forBuilding={building}
           floor={floor}
           workAreas={floor.workAreas}
+          serviceId={serviceId}
         />
       ))
     ) : (

src/components/Project/Infrastructure/WorkArea.jsx

@@ -16,18 +16,17 @@ import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
 import {formatNumber} from "../../../utils/dateUtils";
 
-const WorkArea = ({ workArea, floor, forBuilding }) => {
+const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
   const selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects_Details, loading } = useProjectDetails(selectedProject);
   const [IsExpandedArea, setIsExpandedArea] = useState(false);
   const dispatch = useDispatch();
   const [Project, setProject] = useState();
-  // const { projectId } = useParams();
 
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
 
-  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id, IsExpandedArea);
+  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,serviceId, IsExpandedArea);
 
   const [workAreaStatus, setWorkAreaStatus] = useState({
     completed: 0,

src/components/Project/ProjectInfra.jsx

@@ -25,7 +25,6 @@ import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
-  // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedProject();
   const reloadedData = useSelector((store) => store.localVariables.reload);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
@@ -89,9 +88,8 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
                   id="DataTables_Table_0_length"
                 >
-                  {servicesLoading ? (
-                    <span></span>
-                  ) : assignedServices?.length > 1 ? (
+                  {!servicesLoading && assignedServices?.length > 0 && (
+                    assignedServices.length > 1 ? (
                       <label>
                         <select
                           name="DataTables_Table_0_length"
@@ -101,6 +99,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                           value={selectedService}
                           onChange={handleServiceChange}
                         >
+                          <option value="">All Services</option>
                           {assignedServices.map((service) => (
                             <option key={service.id} value={service.id}>
                               {service.name}
@@ -109,17 +108,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                         </select>
                       </label>
                     ) : (
-                    <div
-                      style={{
-                        
-                      }}
-                    >
-                      {assignedServices?.length === 1
-                        ? <h5>{ assignedServices[0].name}</h5>
-                        : "No service available"}
-                    </div>
+                      <h5>{assignedServices[0].name}</h5>
+                    )
                   )}
                 </div>
+
                 {/* Buttons Section (aligned to right) */}
                 <div className="col-md-8 col-12 text-end mb-1">
                   {ManageInfra && (
@@ -165,8 +158,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   <InfraTable
                     buildings={projectInfra}
                     projectId={projectId}
-                  // handleFloor={submitData}
-                  // signalRHandler ={signalRHandler}
+                    serviceId={selectedService} 
                   />
                 )}
                 {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}

src/hooks/useProjects.js

@@ -202,23 +202,20 @@ export const useProjectInfra = (projectId) => {
   return { projectInfra, isLoading, error, isFetched };
 };
 
-export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
-  const {
-    data: ProjectTaskList,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["WorkItems", workAreaId],
+export const useProjectTasks = (workAreaId, serviceId = null, isExpandedArea = false) => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["WorkItems", workAreaId, serviceId],
     queryFn: async () => {
-      const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId);
-      return res.data;
+      const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId, serviceId);
+      return res.data; // return actual task list
     },
-    enabled: !!workAreaId && !!IsExpandedArea,
-    onError: (error) => {
-      showToast(error.message || "Error while Fetching project Tasks", "error");
+    enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
+    onError: (err) => {
+      showToast(err.message || "Error while fetching project tasks", "error");
     },
   });
-  return { ProjectTaskList, isLoading, error };
+
+  return { ProjectTaskList: data, isLoading, error };
 };
 
 export const useProjectTasksByEmployee = (employeeId, fromDate, toDate) => {

src/repositories/ProjectRepository.jsx

@@ -24,7 +24,6 @@ const ProjectRepository = {
     api.get(`/api/Project/employees/get/${projectId}`),
 
   manageProject: (data) => api.post("/api/project", data),
-  // updateProject: (data) => api.post("/api/project/update", data),
 
   manageProjectAllocation: (data) => api.post("/api/project/allocation", data),
 
@@ -44,13 +43,19 @@ const ProjectRepository = {
 
   getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
   getProjectInfraByproject: (id) => api.get(`/api/project/infra-details/${id}`),
-  getProjectTasksByWorkArea: (id) => api.get(`/api/project/tasks/${id}`),
+  getProjectTasksByWorkArea: (workAreaId, serviceId) => {
+    let url = `/api/project/tasks/${workAreaId}`;
+    if (serviceId) {
+      url += `?serviceId=${serviceId}`;
+    }
+
+    return api.get(url);
+  },
   getProjectTasksByEmployee: (id, fromDate, toDate) =>
     api.get(
       `/api/project/tasks-employee/${id}?fromDate=${fromDate}&toDate=${toDate}`
     ),
 
-
   // Permission Managment for Employee at Project Level
 
   getProjectLevelEmployeeList: (projectId) => api.get(`/api/Project/get/proejct-level/employees/${projectId}`),