Adding Dropdown and API call in Daily Progress Report.

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} />
@@ -165,7 +166,7 @@ const DailyTask = () => {
           <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 mb-2">
               <DateRangePicker onRangeChange={setDateRange} endDateMode="today" DateDifference="6" dateFormat="DD-MM-YYYY" />
               <FilterIcon
                 taskListData={TaskList}
@@ -175,8 +176,47 @@ const DailyTask = () => {
                 currentSelectedActivities={filters.selectedActivities}
                 selectedProject={selectedProject}
               />
+            </div> */}
+
+            <div className="d-flex align-items-center justify-content-between mb-2">
+
+              <div className="d-flex align-items-center">
+                <DateRangePicker
+                  onRangeChange={setDateRange}
+                  endDateMode="today"
+                  DateDifference="6"
+                  dateFormat="DD-MM-YYYY"
+                />
+                <FilterIcon
+                  taskListData={TaskList}
+                  onApplyFilters={setFilters}
+                  currentSelectedBuilding={filters.selectedBuilding}
+                  currentSelectedFloors={filters.selectedFloors}
+                  currentSelectedActivities={filters.selectedActivities}
+                  selectedProject={selectedProject}
+                />
+              </div>
+
+              <div>
+                <select
+                  name="serviceSelect"
+                  className="form-select form-select-sm"
+                  value={selectedService}
+                  onChange={handleServiceChange}
+                  style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
+                >
+                  {servicesLoading && <option>Loading...</option>}
+                  {assignedServices?.map((service) => (
+                    <option key={service.id} value={service.id}>
+                      {service.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
             </div>
 
+
+
             {/* --- Table --- */}
             <div className="table-responsive text-nowrap mt-3" style={{ minHeight: "200px" }}>
               <table className="table">