daily task planning filtering according to service

src/components/Project/Infrastructure/Floor.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import WorkArea from "./WorkArea";
-const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
+const Floor = ({ floor, workAreas, forBuilding }) => {
   return (
     <React.Fragment key={floor.id}>
       {workAreas && workAreas.length > 0 ? (
@@ -10,7 +10,6 @@ const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
             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, serviceId }) => {
+const InfraTable = ({ buildings, projectId }) => {
   const [projectBuilding, setProjectBuilding] = useState([]);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
   const [showFloorModal, setShowFloorModal] = useState(false);
@@ -90,7 +90,6 @@ const InfraTable = ({ buildings, projectId, serviceId }) => {
           forBuilding={building}
           floor={floor}
           workAreas={floor.workAreas}
-          serviceId={serviceId}
         />
       ))
     ) : (

src/components/Project/Infrastructure/WorkArea.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import WorkItem from "./WorkItem";
-import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
+import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
-import { cacheData } from "../../../slices/apiDataManager";
+import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -15,9 +15,11 @@ import {
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
 import {formatNumber} from "../../../utils/dateUtils";
+import { useServices } from "../../../hooks/masterHook/useMaster";
 
-const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
+const WorkArea = ({ workArea, floor, forBuilding }) => {
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const selectedProject = useSelectedProject()
+  const selectedService  = useCurrentService()
   const { projects_Details, loading } = useProjectDetails(selectedProject);
   const [IsExpandedArea, setIsExpandedArea] = useState(false);
   const dispatch = useDispatch();
@@ -25,8 +27,7 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
 
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
-
+  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,selectedService, IsExpandedArea);
-  const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,serviceId, IsExpandedArea);
 
   const [workAreaStatus, setWorkAreaStatus] = useState({
     completed: 0,

src/components/Project/ProjectInfra.jsx

@@ -17,33 +17,37 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
+import {
+  useCurrentService,
+  useProjectAssignedServices,
+  useProjectDetails,
+  useProjectInfra,
+} from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import { refreshData } from "../../slices/localVariablesSlice";
 import eventBus from "../../services/eventBus";
 import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
+import { setService } from "../../slices/globalVariablesSlice";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const projectId = useSelectedProject();
+  const selectedService = useCurrentService();
   const reloadedData = useSelector((store) => store.localVariables.reload);
   const [expandedBuildings, setExpandedBuildings] = useState([]);
-  const { projectInfra, isLoading, error } = useProjectInfra(projectId)
+  const { projectInfra, isLoading, error } = useProjectInfra(projectId);
   const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
   const [project, setProject] = useState(projects_Details);
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
-  const ManageTask = useHasUserPermission(MANAGE_TASK)
+  const ManageTask = useHasUserPermission(MANAGE_TASK);
   const [showModalFloor, setshowModalFloor] = useState(false);
   const [showModalWorkArea, setshowModalWorkArea] = useState(false);
   const [showModalTask, setshowModalTask] = useState(false);
   const [showModalBuilding, setshowModalBuilding] = useState(false);
   const dispatch = useDispatch();
-  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+  const { data: assignedServices, isLoading: servicesLoading } =
+    useProjectAssignedServices(projectId);
 
-  const [selectedService, setSelectedService] = useState("");
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
 
   useEffect(() => {
     setProject(projectInfra);
@@ -51,34 +55,58 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
 
   const signalRHandler = (response) => {
     setProject(response);
-  }
+  };
 
   return (
     <>
-      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
+      {showModalBuilding && (
-        <BuildingModel
+        <GlobalModel
-          project={projectInfra}
+          isOpen={showModalBuilding}
-          onClose={() => setshowModalBuilding(false)}
+          size="md"
-        />
+          closeModal={() => setshowModalBuilding(false)}
-      </GlobalModel>}
+        >
-      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
+          <BuildingModel
-        <FloorModel
+            project={projectInfra}
-          project={projectInfra}
+            onClose={() => setshowModalBuilding(false)}
-          onClose={() => setshowModalFloor(false)}
+          />
-        />
+        </GlobalModel>
-      </GlobalModel>}
+      )}
-      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
+      {showModalFloor && (
-        <WorkAreaModel
+        <GlobalModel
-          project={projectInfra}
+          isOpen={showModalFloor}
-          onClose={() => setshowModalWorkArea(false)}
+          size="md"
-        />
+          closeModal={() => setshowModalFloor(false)}
-      </GlobalModel>}
+        >
-      {showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
+          <FloorModel
-        <TaskModel
+            project={projectInfra}
-          project={projectInfra}
+            onClose={() => setshowModalFloor(false)}
-          onClose={() => setshowModalTask(false)}
+          />
-        />
+        </GlobalModel>
-      </GlobalModel>)}
+      )}
+      {showModalWorkArea && (
+        <GlobalModel
+          isOpen={showModalWorkArea}
+          size="lg"
+          closeModal={() => setshowModalWorkArea(false)}
+        >
+          <WorkAreaModel
+            project={projectInfra}
+            onClose={() => setshowModalWorkArea(false)}
+          />
+        </GlobalModel>
+      )}
+      {showModalTask && (
+        <GlobalModel
+          isOpen={showModalTask}
+          size="lg"
+          closeModal={() => setshowModalTask(false)}
+        >
+          <TaskModel
+            project={projectInfra}
+            onClose={() => setshowModalTask(false)}
+          />
+        </GlobalModel>
+      )}
       <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" }}>
@@ -88,8 +116,9 @@ 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 && assignedServices?.length > 0 && (
+                  {!servicesLoading &&
-                    assignedServices.length > 1 ? (
+                    assignedServices?.length > 0 &&
+                    (assignedServices.length > 1 ? (
                       <label>
                         <select
                           name="DataTables_Table_0_length"
@@ -97,7 +126,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                           className="form-select form-select-sm"
                           aria-label="Select Service"
                           value={selectedService}
-                          onChange={handleServiceChange}
+                          onChange={(e) => dispatch(setService(e.target.value))}
                         >
                           <option value="">All Services</option>
                           {assignedServices.map((service) => (
@@ -109,8 +138,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       </label>
                     ) : (
                       <h5>{assignedServices[0].name}</h5>
-                    )
+                    ))}
-                  )}
                 </div>
 
                 {/* Buttons Section (aligned to right) */}
@@ -140,16 +168,20 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Work Areas
-                      </button></>)}
+                      </button>
+                    </>
+                  )}
 
-                  {(ManageTask || ManageInfra) && (<button
+                  {(ManageTask || ManageInfra) && (
-                    type="button"
+                    <button
-                    className="link-button btn btn-xs rounded-md m-1 btn-primary"
+                      type="button"
-                    onClick={() => setshowModalTask(true)}
+                      className="link-button btn btn-xs rounded-md m-1 btn-primary"
-                  >
+                      onClick={() => setshowModalTask(true)}
-                    <i className="bx bx-plus-circle me-2"></i>
+                    >
-                    Create Tasks
+                      <i className="bx bx-plus-circle me-2"></i>
-                  </button>)}
+                      Create Tasks
+                    </button>
+                  )}
                 </div>
               </div>
               <div className="row ">
@@ -158,10 +190,14 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                   <InfraTable
                     buildings={projectInfra}
                     projectId={projectId}
-                    serviceId={selectedService} 
+                    serviceId={selectedService}
                   />
                 )}
-                {!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
+                {!isLoading && projectInfra?.length == 0 && (
+                  <div className="mt-5">
+                    <p>No Infra Avaiable</p>
+                  </div>
+                )}
               </div>
             </div>
           </div>

src/hooks/useProjects.js

@@ -14,6 +14,16 @@ import {
 } from "@tanstack/react-query";
 import showToast from "../services/toastService";
 
+
+
+export const useCurrentService = ()=>{
+  return useSelector((store)=>store.globalVariables.selectedServiceId)
+}
+
+
+
+
+
 // ------------------------------Query-------------------
 
 export const useProjects = () => {

src/pages/Activities/DailyTask.jsx

@@ -1,289 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
-import { useTaskList } from "../../hooks/useTasks";
-import { useProjectAssignedServices, useProjectName } from "../../hooks/useProjects";
-import { setProjectId } from "../../slices/localVariablesSlice";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import DateRangePicker from "../../components/common/DateRangePicker";
-import FilterIcon from "../../components/common/FilterIcon";
-import GlobalModel from "../../components/common/GlobalModel";
-import ReportTask from "../../components/Activities/ReportTask";
-import ReportTaskComments from "../../components/Activities/ReportTaskComments";
-import SubTask from "../../components/Activities/SubTask";
-import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
-import { useSelectedProject } from "../../slices/apiDataManager";
-import moment from "moment";
-import Loader from "../../components/common/Loader";
-
-const DailyTask = () => {
-  const dispatch = useDispatch();
-  const selectedProject = useSelectedProject();
-  const { projectNames } = useProjectName();
-  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
-  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
-
-  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(selectedProject);
-
-  const [selectedService, setSelectedService] = useState("");
-
-  const handleServiceChange = (e) => {
-    setSelectedService(e.target.value);
-  };
-
-  const [filters, setFilters] = useState({
-    selectedBuilding: "",
-    selectedFloors: [],
-    selectedActivities: [],
-  });
-
-  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-
-  const { TaskList, loading: taskLoading } = useTaskList(
-    selectedProject || null,
-    dateRange?.startDate || null,
-    dateRange?.endDate || null
-  );
-
-  useEffect(() => {
-    if (!selectedProject && projectNames.length > 0) {
-      debugger
-      dispatch(setProjectId(projectNames[0].id));
-    }
-  }, [selectedProject, projectNames, dispatch]);
-
-  useEffect(() => {
-    setFilters({
-      selectedBuilding: "",
-      selectedFloors: [],
-      selectedActivities: [],
-    });
-  }, [selectedProject]);
-
-  const filteredTasks = useMemo(() => {
-    if (!TaskList) return [];
-    return TaskList.filter((task) => {
-      const { selectedBuilding, selectedFloors, selectedActivities } = filters;
-
-      if (selectedBuilding && task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding) return false;
-      if (selectedFloors.length > 0 && !selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)) return false;
-      if (selectedActivities.length > 0 && !selectedActivities.includes(task?.workItem?.activityMaster?.activityName)) return false;
-
-      return true;
-    });
-  }, [TaskList, filters]);
-
-  const groupedTasks = useMemo(() => {
-    const groups = {};
-    filteredTasks.forEach((task) => {
-      const date = task.assignmentDate.split("T")[0];
-      if (!groups[date]) groups[date] = [];
-      groups[date].push(task);
-    });
-    return Object.keys(groups)
-      .sort((a, b) => new Date(b) - new Date(a))
-      .map((date) => ({ date, tasks: groups[date] }));
-  }, [filteredTasks]);
-
-  const [modal, setModal] = useState({ type: null, data: null });
-
-  const openModal = (type, data = null) => setModal({ type, data });
-  const closeModal = () => setModal({ type: null, data: null });
-
-  const renderTeamMembers = (task, refIndex) => (
-    <div
-      key={refIndex}
-      tabIndex="0"
-      className="d-flex align-items-center avatar-group justify-content-center"
-      data-bs-toggle="popover"
-      data-bs-trigger="focus"
-      data-bs-placement="left"
-      data-bs-html="true"
-      data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
-          ${task.teamMembers
-          .map(
-            (m) => `
-            <div class="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
-                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""}
-                </span>
-              </div>
-              <span>${m.firstName} ${m.lastName}</span>
-            </div>`
-          )
-          .join("")}
-        </div>
-      `}
-    >
-      {task.teamMembers.slice(0, 3).map((m) => (
-        <div key={m.id} className="avatar avatar-xs" title={`${m.firstName} ${m.lastName}`}>
-          <span className="avatar-initial rounded-circle bg-label-primary">
-            {m?.firstName.slice(0, 1)}
-          </span>
-        </div>
-      ))}
-      {task.teamMembers.length > 3 && (
-        <div className="avatar avatar-xs" title={`${task.teamMembers.length - 3} more`}>
-          <span className="avatar-initial rounded-circle bg-label-secondary">+{task.teamMembers.length - 3}</span>
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <>
-      {modal.type === "report" && (
-        <GlobalModel isOpen size="md" closeModal={closeModal}>
-          <ReportTask report={modal.data} closeModal={closeModal} />
-        </GlobalModel>
-      )}
-      {modal.type === "comments" && (
-        <GlobalModel isOpen size="lg" closeModal={closeModal}>
-          <ReportTaskComments
-            commentsData={modal.data.task}
-            actionAllow={modal.data.isActionAllow}
-            handleCloseAction={(isSubTask) => {
-              if (isSubTask) openModal("subtask", modal.data.task);
-              else closeModal();
-            }}
-            closeModal={closeModal}
-          />
-        </GlobalModel>
-      )}
-      {modal.type === "subtask" && (
-        <GlobalModel isOpen size="lg" closeModal={closeModal}>
-          <SubTask activity={modal.data} onClose={closeModal} />
-        </GlobalModel>
-      )}
-
-      <div className="container-fluid">
-        <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Daily Progress Report" }]} />
-
-        <div className="card card-action mb-6 p-5">
-          <div className="card-body p-1 p-sm-2">
-            {!selectedProject && (<div className="text-center text-muted">Please Select Project</div>)}
-
-            <div className="d-flex align-items-center justify-content-between mb-2">
-              {/* --- Left: Service Dropdown + Filter Icon --- */}
-              <div className="d-flex align-items-center gap-6">
-                <div className="me-3">
-                  {!servicesLoading && assignedServices?.length > 0 && (
-                    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: "35px", width: "190px" }}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
-                    ) : (
-                      <h5>{assignedServices[0].name}</h5>
-                    )
-                  )}
-                </div>
-              </div>
-
-              {/* --- Right: DateRangePicker --- */}
-              <div className="d-flex justify-content-end align-items-center gap-3 me-3">
-                <FilterIcon
-                  taskListData={TaskList}
-                  onApplyFilters={setFilters}
-                  currentSelectedBuilding={filters.selectedBuilding}
-                  currentSelectedFloors={filters.selectedFloors}
-                  currentSelectedActivities={filters.selectedActivities}
-                  selectedProject={selectedProject}
-                />
-                <DateRangePicker
-                  onRangeChange={setDateRange}
-                  endDateMode="today"
-                  DateDifference="6"
-                  dateFormat="DD-MM-YYYY"
-                />
-              </div>
-
-            </div>
-            {/* --- Table --- */}
-            <div className="table-responsive text-nowrap mt-3" style={{ minHeight: "200px" }}>
-              <table className="table">
-                <thead>
-                  <tr>
-                    <th>Activity</th>
-                    <th>Assigned</th>
-                    <th>Completed</th>
-                    <th>Assign On</th>
-                    <th>Team</th>
-                    <th>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {taskLoading && (
-                    <tr>
-                      <td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
-                        <Loader />
-                      </td>
-                    </tr>
-                  )}
-                  {!taskLoading && groupedTasks.length === 0 && (
-                    <tr>
-                      <td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
-                        No reports available for the selected date range.
-                      </td>
-                    </tr>
-                  )}
-                  {!taskLoading &&
-                    groupedTasks.map(({ date, tasks }) => (
-                      <React.Fragment key={date}>
-                        <tr className="table-row-header text-start">
-                          <td colSpan={6}><strong>{formatUTCToLocalTime(date)}</strong></td>
-                        </tr>
-                        {tasks.map((task, idx) => (
-                          <tr key={task.id || idx}>
-                            <td className="flex-wrap text-start">
-                              <div>{task.workItem.activityMaster?.activityName || "No Activity Name"}</div>
-                              <div className="text-sm">
-                                {task.workItem.workArea?.floor?.building?.name} › {task.workItem.workArea?.floor?.floorName} › {task.workItem.workArea?.areaName}
-                              </div>
-                            </td>
-                            <td>{formatNumber(task.plannedTask)} / {formatNumber(task.workItem.plannedWork - task.workItem.completedWork)}</td>
-                            <td>{task.completedTask}</td>
-                            <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                            <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                            <td className="text-center">
-                              <div className="d-flex justify-content-end gap-2">
-                                {ReportTaskRights && !task.reportedDate && (
-                                  <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>Report</button>
-                                )}
-                                {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                                  <button className="btn btn-xs btn-warning" onClick={() => openModal("comments", { task, isActionAllow: true })}>QC</button>
-                                )}
-                                <button className="btn btn-xs btn-primary" onClick={() => openModal("comments", { task, isActionAllow: false })}>Comment</button>
-                              </div>
-                            </td>
-                          </tr>
-                        ))}
-                      </React.Fragment>
-                    ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-export default DailyTask;

src/pages/Activities/TaskPlannng.jsx

@@ -1,32 +1,34 @@
 import React, { useEffect, useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import InfraPlanning from "../../components/Activities/InfraPlanning";
-import { useProjectName } from "../../hooks/useProjects";
+import { useCurrentService, useProjectName } from "../../hooks/useProjects";
 import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
+import { setService } from "../../slices/globalVariablesSlice";
 
-const TaskPlannng = () => {
+const TaskPlanning = () => {
   const selectedProject = useSelectedProject();
+  const selectedService = useCurrentService();
   const dispatch = useDispatch();
+
   const { projectNames = [], loading: projectLoading } = useProjectName();
 
-  // Service dropdown state
+  const { data, isLoading: servicesLoading } =
-  const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(selectedProject);
-  const [selectedService, setSelectedService] = useState("");
 
+  // Set default project if none selected
   useEffect(() => {
-    if (!selectedProject && projectNames?.length > 0) {
+    if (!selectedProject && projectNames.length > 0) {
       dispatch(setProjectId(projectNames[0]?.id));
     }
   }, [projectNames, selectedProject, dispatch]);
 
-  const handleServiceChange = (e) => {
+  // Loading state
-    setSelectedService(e.target.value);
+  if (projectLoading) {
-  };
+    return <div className="text-center py-5">Loading...</div>;
-
+  }
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -36,51 +38,39 @@ const TaskPlannng = () => {
         ]}
       />
 
-      <div className="card">
+      <div className="card py-2 ">
-        <div className="card-body">
+        <div className="col-sm-4 col-md-3 col-12 px-4 py-2 text-start">
-          {/* Service Dropdown */}       
+          {data?.length === 0 ? (
-
+            <p className="badge bg-label-secondary m-0">Service not assigned</p>
-          <div
-            className="dataTables_length text-start py-2 px-5 col-md-4 col-12"
-            id="DataTables_Table_0_length"
-          >
-            {!servicesLoading && assignedServices?.length > 0 && (
-              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: "35px", width: "190px" }}
-                  >
-                    <option value="">All Services</option>
-                    {assignedServices.map((service) => (
-                      <option key={service.id} value={service.id}>
-                        {service.name}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-              ) : (
-                <h5>{assignedServices[0].name}</h5>
-              )
-            )}
-          </div>
-
-
-          {/* Infra Planning Component */}
-          {selectedProject ? (
-            <InfraPlanning selectedService={selectedService} />
           ) : (
-            <div className="text-center">Please Select Project</div>
+            <select
+              name="DataTables_Table_0_length"
+              aria-controls="DataTables_Table_0"
+              className="form-select form-select-sm"
+              aria-label="Select Service"
+              value={selectedService ?? ""}
+              onChange={(e) => dispatch(setService(e.target.value))}
+            >
+              <option value="">All Services</option>
+              {!servicesLoading &&
+                data?.map((service) => (
+                  <option key={service.id} value={service.id}>
+                    {service.name}
+                  </option>
+                ))}
+            </select>
           )}
         </div>
+
+        {/* Planning Component */}
+        {selectedProject ? (
+          <InfraPlanning selectedService={selectedService} />
+        ) : (
+          <div className="text-center py-3">Please select a project</div>
+        )}
       </div>
     </div>
   );
 };
 
-export default TaskPlannng;
+export default TaskPlanning;

src/pages/DailyProgressReport/DailyProgrssReport.jsx

@@ -83,7 +83,7 @@ const DailyProgrssReport = () => {
           <div className="col-sm-4 col-md-3 col-12">
             <select
               className="form-select form-select-sm"
-              value={service}
+              value={service ?? ""}
               onChange={(e) => setService(e.target.value)}
             >
               {isLoading ? (
@@ -91,7 +91,7 @@ const DailyProgrssReport = () => {
               ) : (
                 <>
                   <option value="" selected>
-                    Select service
+                    All Services
                   </option>
                   {data?.data?.map((service) => (
                     <option key={service.id} value={service.id}>

src/router/AppRoutes.jsx

@@ -21,7 +21,6 @@ import EmployeeList from "../pages/employee/EmployeeList";
 import EmployeeProfile from "../pages/employee/EmployeeProfile";
 import Inventory from "../pages/project/Inventory";
 import AttendancePage from "../pages/Activities/AttendancePage";
-import DailyTask from "../pages/Activities/DailyTask";
 import TaskPlannng from "../pages/Activities/TaskPlannng";
 import Reports from "../pages/reports/Reports";
 import ImageGallary from "../pages/Gallary/ImageGallary";

src/slices/globalVariablesSlice.jsx

@@ -5,6 +5,7 @@ const globalVariablesSlice = createSlice({
   initialState: {
     loginUser: null,
     currentTenant: null,
+    selectedServiceId : null
   },
   reducers: {
     setGlobalVariable: (state, action) => {
@@ -17,9 +18,12 @@ const globalVariablesSlice = createSlice({
     setCurrentTenant: (state, action) => {
       state.currentTenant = action.payload;
     },
+      setService: (state, action) => {
+      state.selectedServiceId = action.payload;
+    },
   },
 });
 
-export const { setGlobalVariable, setLoginUserPermmisions, setCurrentTenant } =
+export const { setGlobalVariable, setLoginUserPermmisions, setCurrentTenant, setService} =
   globalVariablesSlice.actions;
 export default globalVariablesSlice.reducer;