Merge pull request 'Adding Dropdown and API call in Daily Progress Report.' (#413) from Kartik_Task_DailyProgress#1232 into Organization_Management

Reviewed-on: #413

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,22 +162,71 @@ 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">
-              <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 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 ? (
+                    <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}
+                  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">