src/components/Activities/InfraPlanning.jsx

@@ -55,7 +55,7 @@ const InfraPlanning = () => {
 
   if (isFetched && (!projectInfra || projectInfra.length === 0)) {
     return (
-      <div className="card text-center">
+      <div className="text-center">
         <p className="my-3">No Result Found</p>
       </div>
     );
@@ -63,14 +63,12 @@ const InfraPlanning = () => {
 
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
-      <div className="card">
         <div className="card-body" style={{ padding: "0.5rem" }}>
           <div className="row">
             <InfraTable buildings={projectInfra} projectId={selectedProject} />
         </div>
       </div>
     </div>
-    </div>
   );
 };
 

src/pages/Activities/TaskPlannng.jsx

@@ -1,22 +1,31 @@
-import React,{useEffect,useRef} from "react";
+import React, { useEffect, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import InfraPlanning from "../../components/Activities/InfraPlanning";
 import { useProjectName } from "../../hooks/useProjects";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import { useProjectAssignedServices } from "../../hooks/useProjects";
 
 const TaskPlannng = () => {
   const selectedProject = useSelectedProject();
   const dispatch = useDispatch();
   const { projectNames = [], loading: projectLoading } = useProjectName();
 
+  // Service dropdown state
+  const { data: assignedServices, isLoading: servicesLoading } =
+    useProjectAssignedServices(selectedProject);
+  const [selectedService, setSelectedService] = useState("");
+
   useEffect(() => {
-  if (!selectedProject) {
+    if (!selectedProject && projectNames?.length > 0) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
-}, [projectNames, selectedProject?.id, dispatch]);
+  }, [projectNames, selectedProject, dispatch]);
 
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   return (
     <div className="container-fluid">
@@ -26,12 +35,46 @@ useEffect(() => {
           { label: "Daily Task Planning" },
         ]}
       />
+
+      <div className="card">
+        <div className="card-body">
+          {/* Service Dropdown */}
+          <div className="mb-1 ms-2">
+            {assignedServices?.length > 1 ? (
+              <select
+                id="serviceSelect"
+                className="form-select"
+                value={selectedService}
+                onChange={handleServiceChange}
+                style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
+              >
+                {assignedServices.map((service) => (
+                  <option key={service.id} value={service.id}>
+                    {service.name}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <div
+                className="text-start"
+              >
+                {assignedServices?.length === 1
+                  ? <h5>{ assignedServices[0].name}</h5>
+                  : "No service available"}
+              </div>
+            )}
+          </div>
+
+
+          {/* Infra Planning Component */}
           {selectedProject ? (
-        <InfraPlanning />
+            <InfraPlanning selectedService={selectedService} />
           ) : (
             <div className="text-center">Please Select Project</div>
           )}
         </div>
+      </div>
+    </div>
   );
 };