src/pages/Activities/TaskPlannng.jsx

@@ -1,22 +1,30 @@
-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();
+  const selectedProject = useSelectedProject();
+  const dispatch = useDispatch();
+  const { projectNames = [], loading: projectLoading } = useProjectName();
 
-useEffect(() => {
-  if (!selectedProject) {
+  // Service dropdown state
+  const { data: assignedServices, isLoading: servicesLoading } =
+    useProjectAssignedServices(selectedProject);
+  const [selectedService, setSelectedService] = useState("");
+
+  useEffect(() => {
+    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,8 +34,28 @@ useEffect(() => {
           { label: "Daily Task Planning" },
         ]}
       />
+
+      {/* 🔹 Service Dropdown */}
+      <div className="mb-3">
+        <select
+          id="serviceSelect"
+          className="form-select"
+          value={selectedService}
+          onChange={handleServiceChange}
+          style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
+        >
+          {servicesLoading && <option>Loading...</option>}
+          {assignedServices?.map((service) => (
+            <option key={service.id} value={service.id}>
+              {service.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* 🔹 InfraPlanning only when project is selected */}
       {selectedProject ? (
-        <InfraPlanning />
+        <InfraPlanning selectedService={selectedService} />
       ) : (
         <div className="text-center">Please Select Project</div>
       )}