Merge branch 'Organization_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Organization_Management

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/components/Project/Infrastructure/InfraTable.jsx

@@ -143,7 +143,7 @@ const InfraTable = ({ buildings, projectId}) => {
   // }, [handler]);
 
   return (
-    <div>
+    <div className="px-6">
       {projectBuilding && projectBuilding.length > 0 && (
         <table className="table table-bordered">
           <tbody>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -6,9 +6,10 @@ import {
   useActivitiesMaster,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask } from "../../../hooks/useProjects";
+import { useManageTask, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
+import { useSelectedProject } from "../../../slices/apiDataManager";
 
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
@@ -37,6 +38,15 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { activities, loading: activityLoading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
 
+  const projectId = useSelectedProject();
+
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+
+  const [selectedService, setSelectedService] = useState("");
+
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
   const {
     register,
     handleSubmit,
@@ -97,9 +107,11 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
 
   const onSubmitForm = async (data) => {
     const payload = [data];
-      CreateTask({payload:payload,buildingId: data.buildingID,
+    CreateTask({
+      payload: payload, buildingId: data.buildingID,
       floorId: data.floorId,
-      workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
+      workAreaId: data.workAreaId, PreviousPlannedWork: 0, previousCompletedWork: 0
+    });
   };
 
   return (
@@ -150,6 +162,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+      {/* Work Area Selection */}
       {selectedFloor && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Work Area</Label>
@@ -172,6 +185,32 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+      {/* Services Selection */}
+      {selectedWorkArea && (
+        <div className="col-12 text-start">
+          <Label className="form-label">Select Services</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}
+          >
+            {servicesLoading && <option>Loading...</option>}
+            {assignedServices?.map((service) => (
+              <option key={service.id} value={service.id}>
+                {service.name}
+              </option>
+            ))}
+          </select>
+          {errors.buildingID && (
+            <p className="danger-text">{errors.buildingID.message}</p>
+          )}
+        </div>
+      )}
+
+      {/* Activity Selection */}
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <Label className="form-label" required>Select Activity</Label>
@@ -192,6 +231,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
         </div>
       )}
 
+
       {selectedWorkArea && (
         <div className="col-12 text-start">
           <label className="form-label">Select Work Category</label>

src/components/Project/ProjectInfra.jsx

@@ -17,22 +17,21 @@ import {
   getCachedData,
   useSelectedProject,
 } from "../../slices/apiDataManager";
-import { useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
+import { 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 { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 
-const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
+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( [] );
+  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 [project, setProject] = useState(projects_Details);
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
   const ManageTask = useHasUserPermission(MANAGE_TASK)
   const [showModalFloor, setshowModalFloor] = useState(false);
@@ -40,46 +39,45 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
   const [showModalTask, setshowModalTask] = useState(false);
   const [showModalBuilding, setshowModalBuilding] = useState(false);
   const dispatch = useDispatch();
+  const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
+
+  const [selectedService, setSelectedService] = useState("");
+  const handleServiceChange = (e) => {
+    setSelectedService(e.target.value);
+  };
 
   useEffect(() => {
     setProject(projectInfra);
   }, [data, projects_Details]);
 
-  // useEffect(() => {
-  //   if (reloadedData) {
-  //     refetch();
-  //     dispatch(refreshData(false));
-  //   }
-  // }, [reloadedData]);
-
   const signalRHandler = (response) => {
     setProject(response);
   }
 
   return (
     <>
-      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding( false )}>
+      {showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
         <BuildingModel
           project={projectInfra}
-          onClose={() => setshowModalBuilding( false )}
+          onClose={() => setshowModalBuilding(false)}
         />
       </GlobalModel>}
-      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={()=>setshowModalFloor(false)}>
+      {showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
         <FloorModel
           project={projectInfra}
-            onClose={()=>setshowModalFloor(false)}
+          onClose={() => setshowModalFloor(false)}
         />
       </GlobalModel>}
-      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={()=>setshowModalWorkArea(false)} >
+      {showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
         <WorkAreaModel
           project={projectInfra}
-            onClose={()=>setshowModalWorkArea(false)}
+          onClose={() => setshowModalWorkArea(false)}
         />
       </GlobalModel>}
-      {showModalTask && ( <GlobalModel isOpen={showModalTask} size="lg" closeModal={()=>setshowModalTask(false)}>
+      {showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
         <TaskModel
           project={projectInfra}
-            onClose={()=>setshowModalTask(false)}
+          onClose={() => setshowModalTask(false)}
         />
       </GlobalModel>)}
       <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
@@ -88,13 +86,48 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
             <div className="align-items-center">
               <div className="row ">
                 <div
-                  className={`col-12 text-end mb-1 `}
+                  className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
+                  id="DataTables_Table_0_length"
                 >
-                  {ManageInfra && (<>
+                  {servicesLoading ? (
+                    <span></span>
+                  ) : 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}
+                      >
+                        {assignedServices.map((service) => (
+                          <option key={service.id} value={service.id}>
+                            {service.name}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : (
+                    <div
+                      style={{
+                        
+                      }}
+                    >
+                      {assignedServices?.length === 1
+                        ? <h5>{ assignedServices[0].name}</h5>
+                        : "No service available"}
+                    </div>
+                  )}
+                </div>
+                {/* Buttons Section (aligned to right) */}
+                <div className="col-md-8 col-12 text-end mb-1">
+                  {ManageInfra && (
+                    <>
                       <button
                         type="button"
                         className="link-button btn btn-xs rounded-md link-button-sm m-1 btn-primary"
-                    onClick={()=>setshowModalBuilding(true)}
+                        onClick={() => setshowModalBuilding(true)}
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Building
@@ -102,7 +135,7 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
                       <button
                         type="button"
                         className="link-button btn btn-xs rounded-md m-1 btn-primary"
-                    onClick={()=>setshowModalFloor(true)}
+                        onClick={() => setshowModalFloor(true)}
                       >
                         <i className="bx bx-plus-circle me-2"></i>
                         Manage Floors
@@ -119,7 +152,7 @@ const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
                   {(ManageTask || ManageInfra) && (<button
                     type="button"
                     className="link-button btn btn-xs rounded-md m-1 btn-primary"
-                    onClick={()=>setshowModalTask(true)}
+                    onClick={() => setshowModalTask(true)}
                   >
                     <i className="bx bx-plus-circle me-2"></i>
                     Create Tasks

src/components/Project/Teams.jsx

@@ -17,12 +17,11 @@ import eventBus from "../../services/eventBus";
 import {
   useEmployeesByProjectAllocated,
   useManageProjectAllocation,
+  useProjectAssignedServices,
 } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 
 const Teams = () => {
-  // const {projectId} = useParams()
-  // const projectId = useSelector((store)=>store.localVariables.projectId)
   const projectId = useSelectedProject();
   const dispatch = useDispatch();
 
@@ -37,6 +36,14 @@ const Teams = () => {
   const [activeEmployee, setActiveEmployee] = useState(true);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
   const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  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);
+  };
 
   const navigate = useNavigate();
 
@@ -136,7 +143,6 @@ const Teams = () => {
   useEffect(() => {
     if (projectEmployees) {
       setEmployees(projectEmployees);
-      //setFilteredEmployees(projectEmployees?.filter((emp) => emp.isActive));
       const filtered = projectEmployees.filter((emp) => emp.isActive);
       setFilteredEmployees(filtered);
     }
@@ -179,13 +185,6 @@ const Teams = () => {
 
   const handleFilterEmployee = (e) => {
     const filterValue = e.target.value;
-    // if (filterValue === "true") {
-    //   setActiveEmployee(true);
-    //   setFilteredEmployees(employees.filter((emp) => emp.isActive));
-    // } else {
-    //   setFilteredEmployees(employees.filter((emp) => !emp.isActive));
-    //   setActiveEmployee(false);
-    // }
     setActiveEmployee(filterValue === "true");
     setSearchTerm("");
   };
@@ -264,6 +263,66 @@ const Teams = () => {
         <div className="card-body">
           <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 ? (
+                  <span></span>
+                ) : 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: "32px", width: "190px" }}
+                    >
+                      {assignedServices.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                ) : (
+                  <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">
+              <div className="form-check form-switch me-2 mt-2">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={activeEmployee}
+                  onChange={handleToggleActive}
+                  id="activeEmployeeSwitch"
+                />
+                <label className="form-check-label ms-0 " htmlFor="activeEmployeeSwitch">
+                  {activeEmployee ? "Active Employees" : "Inactive Employees"}
+                </label>
+              </div>
               <div className="dataTables_filter d-inline-flex align-items-center ms-2">
                 <input
                   type="search"
@@ -274,31 +333,10 @@ const Teams = () => {
                   onChange={handleSearch}
                 />
               </div>
-            </div>
+
-            <div className="col-md-6 col-12 d-flex justify-content-end align-items-center">
-              <div
-                className="dataTables_length text-start py-2 px-2"
-                id="DataTables_Table_0_length"
-              >
-                <label>
-                  <select
-                    name="DataTables_Table_0_length"
-                    aria-controls="DataTables_Table_0"
-                    className="form-select form-select-sm"
-                    onChange={handleFilterEmployee}
-                    // value={false}
-                    aria-label=""
-                    defaultValue="true"
-                  >
-                    <option value="true">Active Employee</option>
-                    <option value="false">In-Active Employee</option>
-                  </select>
-                </label>
-              </div>
               <button
                 type="button"
-                className={`link-button btn-primary btn-sm ${
+                className={`link-button btn-primary btn-sm ${HasAssignUserPermission ? "" : "d-none"
-                  HasAssignUserPermission ? "" : "d-none"
                   }`}
                 data-bs-toggle="modal"
                 data-bs-target="#user-model"
@@ -319,6 +357,7 @@ const Teams = () => {
                       <th>
                         <div className="text-start ms-5">Name</div>
                       </th>
+                      <th>Organization</th>
                       <th>Assigned Date</th>
                       {!activeEmployee && <th>Release Date</th>}
                       <th>Project Role</th>
@@ -334,7 +373,7 @@ const Teams = () => {
                               <Avatar
                                 firstName={item.firstName}
                                 lastName={item.lastName}
-                              ></Avatar>
+                              />
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
@@ -352,18 +391,16 @@ const Teams = () => {
                               </div>
                             </div>
                           </td>
+
+                          <td>{item.organizationName || "N/A"}</td>
+
                           <td>
-                            {" "}
+                            {moment(item.allocationDate).format("DD-MMM-YYYY")}
-                            {moment(item.allocationDate).format(
-                              "DD-MMM-YYYY"
-                            )}{" "}
                           </td>
                           {!activeEmployee && (
                             <td>
                               {item.reAllocationDate
-                                ? moment(item.reAllocationDate).format(
+                                ? moment(item.reAllocationDate).format("DD-MMM-YYYY")
-                                    "DD-MMM-YYYY"
-                                  )
                                 : "Present"}
                             </td>
                           )}
@@ -373,7 +410,7 @@ const Teams = () => {
                             </span>
                           </td>
                           <td>
-                            {item.isActive && (
+                            {item.isActive ? (
                               <button
                                 aria-label="Delete"
                                 type="button"
@@ -381,27 +418,26 @@ const Teams = () => {
                                 className="btn p-0 dropdown-toggle hide-arrow"
                                 onClick={() => deleteModalOpen(item)}
                               >
-                                {" "}
                                 {removingEmployeeId === item.id ? (
                                   <div
                                     className="spinner-border spinner-border-sm text-primary"
                                     role="status"
                                   >
-                                    <span className="visually-hidden">
+                                    <span className="visually-hidden">Loading...</span>
-                                      Loading...
-                                    </span>
                                   </div>
                                 ) : (
                                   <i className="bx bx-trash me-1 text-danger"></i>
                                 )}
                               </button>
+                            ) : (
+                              <span>Not in project</span>
                             )}
-                            {!item.isActive && <span>Not in project</span>}
                           </td>
                         </tr>
                       ))}
                   </tbody>
                 </table>
+
               )}
             {!employeeLodaing && filteredEmployees.length === 0 && (
               <div className="text-center text-muted py-3">

src/components/common/FilterIcon.jsx

@@ -203,7 +203,7 @@ const FilterIcon = ({
           <>
             <li><hr className="my-1" /></li>
             <li>
-              <div className="fw-bold text-dark mb-1">Floors</div>
+              <div className="fw-bold text-dark mb-2 mt-2">Floors</div>
               <div className="row">
                 {uniqueFloors.length > 0 ? (
                   uniqueFloors.map((floor, idx) => (
@@ -235,7 +235,7 @@ const FilterIcon = ({
           <>
             <li><hr className="my-1" /></li>
             <li>
-              <div className="fw-bold text-dark mb-1">Activities</div>
+              <div className="fw-bold text-dark mb-2 mt-2">Activities</div>
               <div className="row">
                 {uniqueActivities.length > 0 ? (
                   uniqueActivities.map((activity, idx) => (

src/pages/Activities/DailyTask.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useTaskList } from "../../hooks/useTasks";
-import { useProjectName } from "../../hooks/useProjects";
+import { useProjectAssignedServices, useProjectName } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import DateRangePicker from "../../components/common/DateRangePicker";
@@ -24,6 +24,14 @@ const DailyTask = () => {
   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: [],
@@ -38,7 +46,6 @@ const DailyTask = () => {
     dateRange?.endDate || null
   );
 
-  // Ensure project is set
   useEffect(() => {
     if (!selectedProject && projectNames.length > 0) {
       debugger
@@ -46,7 +53,6 @@ const DailyTask = () => {
     }
   }, [selectedProject, projectNames, dispatch]);
 
-  // 🔹 Reset filters when project changes
   useEffect(() => {
     setFilters({
       selectedBuilding: "",
@@ -55,7 +61,6 @@ const DailyTask = () => {
     });
   }, [selectedProject]);
 
-  //  Memoized filtering
   const filteredTasks = useMemo(() => {
     if (!TaskList) return [];
     return TaskList.filter((task) => {
@@ -69,7 +74,6 @@ const DailyTask = () => {
     });
   }, [TaskList, filters]);
 
-  //  Memoized dates
   const groupedTasks = useMemo(() => {
     const groups = {};
     filteredTasks.forEach((task) => {
@@ -82,13 +86,11 @@ const DailyTask = () => {
       .map((date) => ({ date, tasks: groups[date] }));
   }, [filteredTasks]);
 
-  // --- Modal State
   const [modal, setModal] = useState({ type: null, data: null });
 
   const openModal = (type, data = null) => setModal({ type, data });
   const closeModal = () => setModal({ type: null, data: null });
 
-  // --- Render helpers
   const renderTeamMembers = (task, refIndex) => (
     <div
       key={refIndex}
@@ -133,7 +135,6 @@ const DailyTask = () => {
 
   return (
     <>
-      {/* --- Modals --- */}
       {modal.type === "report" && (
         <GlobalModel isOpen size="md" closeModal={closeModal}>
           <ReportTask report={modal.data} closeModal={closeModal} />
@@ -161,12 +162,54 @@ const DailyTask = () => {
       <div className="container-fluid">
         <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Daily Progress Report" }]} />
 
-        <div className="card card-action mb-6">
+        <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>)}
-            {/* --- Filters --- */}
+
-            <div className="d-flex align-items-center mb-2">
+            <div className="d-flex align-items-center justify-content-between mb-2">
-              <DateRangePicker onRangeChange={setDateRange} endDateMode="today" DateDifference="6" dateFormat="DD-MM-YYYY" />
+
+              {/* --- Left: Service Dropdown + Filter Icon --- */}
+              <div className="d-flex align-items-center gap-6">
+                <div className="me-3">
+                  {servicesLoading ? (
+                    <span></span>
+                  ) : assignedServices?.length > 1 ? (
+                    <select
+                      name="serviceSelect"
+                      className="form-select form-select-sm"
+                      value={selectedService}
+                      onChange={handleServiceChange}
+                      style={{ fontSize: "0.875rem", height: "32px", minWidth: "190px" }}
+                    >
+                      {assignedServices.map((service) => (
+                        <option key={service.id} value={service.id}>
+                          {service.name}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <div
+                      className="ms-4 mt-2"
+                    >
+                      {assignedServices?.length === 1
+                        ? <h5>{assignedServices[0].name}</h5>
+                        : "No service available"}
+                    </div>
+                  )}
+                </div>
+
+                {/* <FilterIcon
+                  taskListData={TaskList}
+                  onApplyFilters={setFilters}
+                  currentSelectedBuilding={filters.selectedBuilding}
+                  currentSelectedFloors={filters.selectedFloors}
+                  currentSelectedActivities={filters.selectedActivities}
+                  selectedProject={selectedProject}
+                /> */}
+              </div>
+
+              {/* --- Right: DateRangePicker --- */}
+              <div className="d-flex justify-content-end align-items-center gap-3 me-3">
                 <FilterIcon
                   taskListData={TaskList}
                   onApplyFilters={setFilters}
@@ -175,8 +218,15 @@ const DailyTask = () => {
                   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">

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 selectedProject = useSelectedProject();
-const dispatch = useDispatch();
+  const dispatch = useDispatch();
-const { projectNames = [], loading: projectLoading } = useProjectName();
+  const { projectNames = [], loading: projectLoading } = useProjectName();
 
-useEffect(() => {
+  // Service dropdown state
-  if (!selectedProject) {
+  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,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>
   );
 };