Merge pull request 'Adding Filter Icon on Daily Progress Report and performing a filteration according to building, floor and activity.' (#187) from Kartik_Task#472 into Issue_Jun_1W_2

Reviewed-on: #187

src/components/Activities/ReportTaskComments.jsx

@@ -56,9 +56,9 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
     if (!firstRender.current && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     } else {
-      firstRender.current = false; 
+      firstRender.current = false;
     }
-  }, [comments]); 
+  }, [comments]);
 
   const onSubmit = async (data) => {
     let sendComment = {
@@ -69,11 +69,11 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
     try {
       setloading(true);
       const resp = await TasksRepository.taskComments(sendComment);
-    
+
       setComment((prevItems) => [...prevItems, resp.data]);
 
       const taskList = getCachedData("taskList");
-      
+
       if (taskList && taskList.data) {
         const updatedTaskList = taskList.data.map((task) => {
           if (task.id === resp.data.taskAllocationId) {
@@ -87,14 +87,14 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
           }
           return task;
         });
-       
+
         cacheData("taskList", {
           data: updatedTaskList,
-          projectId: taskList.projectId, 
+          projectId: taskList.projectId,
         });
       }
 
-      reset(); 
+      reset();
       setloading(false);
       showToast("Successfully Sent", "success");
     } catch (error) {
@@ -134,7 +134,16 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
           </p>
 
           <p className="fw-bold my-2 text-start">
-            Loaction :
+            Reported By :
+            <span className=" ms-2"> -
+              {/* {commentsData?.assignedBy?.firstName +
+                " " +
+                commentsData?.assignedBy?.lastName} */}
+            </span>{" "}
+          </p>
+
+          <p className="fw-bold my-2 text-start">
+            Location :
             <span className="fw-normal ms-2 text-start">
               {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
               <i className="bx bx-chevron-right"></i>{" "}
@@ -146,11 +155,19 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
             </span>
           </p>
           <p className="fw-bold my-2 text-start">
-            Planned Work: {commentsData?.plannedTask}
+            Planned Work: {commentsData?.plannedTask}{" "}            
+              {
+                commentsData?.workItem?.activityMaster
+                  ?.unitOfMeasurement
+              }            
           </p>
           <p className="fw-bold my-2 text-start">
             {" "}
-            Completed Work : {commentsData?.completedTask}
+            Completed Work : {commentsData?.completedTask}{" "}           
+              {
+                commentsData?.workItem?.activityMaster
+                  ?.unitOfMeasurement
+              }            
           </p>
           <div className="d-flex align-items-center flex-wrap">
             <p className="fw-bold text-start m-0 me-1">Team :</p>
@@ -196,12 +213,12 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
 
           <ul
             className="list-group px-0 mx-0 overflow-auto border-0"
-            ref={containerRef} 
+            ref={containerRef}
           >
             {comments &&
               comments
                 ?.slice()
-                .reverse() 
+                .reverse()
                 .map((data, idx) => {
                   const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
                   return (

src/components/common/FilterIcon.jsx

@@ -0,0 +1,240 @@
+import React, { useState, useEffect } from "react";
+
+const FilterIcon = ({ taskListData, onApplyFilters, currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities }) => {
+  // State for filters, now managed within FilterIcon
+  const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding);
+  const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors);
+  const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities);
+
+  // Update internal state when props change (e.g., project selection in DailyTask clears filters)
+  useEffect(() => {
+    setSelectedBuilding(currentSelectedBuilding);
+    setSelectedFloors(currentSelectedFloors);
+    setSelectedActivities(currentSelectedActivities);
+  }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
+
+  // Helper to get unique values for filters based on current selections
+  const getUniqueFilterValues = (key) => {
+    if (!taskListData) return [];
+    let relevantTasks = taskListData;
+
+    // Filter tasks based on selected building for floors and activities
+    if (selectedBuilding) {
+      relevantTasks = relevantTasks.filter(task =>
+        task?.workItem?.workArea?.floor?.building?.name === selectedBuilding
+      );
+    }
+
+    // Filter tasks based on selected floors for activities
+    if (selectedFloors.length > 0) {
+      relevantTasks = relevantTasks.filter(task =>
+        selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+      );
+    }
+
+    const values = relevantTasks.map(task => {
+      if (key === 'building') return task?.workItem?.workArea?.floor?.building?.name;
+      if (key === 'floor') return task?.workItem?.workArea?.floor?.floorName;
+      if (key === 'activity') return task?.workItem?.activityMaster?.activityName;
+      return null;
+    }).filter(Boolean); // Remove null or undefined values
+    return [...new Set(values)].sort(); // Sort for consistent order
+  };
+
+  const uniqueBuildings = getUniqueFilterValues('building');
+  const uniqueFloors = getUniqueFilterValues('floor');
+  const uniqueActivities = getUniqueFilterValues('activity');
+
+  // Handle filter selection with dependency logic
+  const handleFilterChange = (filterType, value) => {
+    let newSelectedBuilding = selectedBuilding;
+    let newSelectedFloors = [...selectedFloors];
+    let newSelectedActivities = [...selectedActivities];
+
+    if (filterType === 'building') {
+      if (selectedBuilding !== value) {
+        newSelectedFloors = [];
+        newSelectedActivities = [];
+      }
+      newSelectedBuilding = value;
+    } else if (filterType === 'floor') {
+      newSelectedFloors = selectedFloors.includes(value) ? selectedFloors.filter(item => item !== value) : [...selectedFloors, value];
+      if (!newSelectedFloors.includes(value) && selectedFloors.includes(value)) {
+        newSelectedActivities = [];
+      }
+    } else if (filterType === 'activity') {
+      newSelectedActivities = selectedActivities.includes(value) ? selectedActivities.filter(item => item !== value) : [...selectedActivities, value];
+    }
+
+    setSelectedBuilding(newSelectedBuilding);
+    setSelectedFloors(newSelectedFloors);
+    setSelectedActivities(newSelectedActivities);
+
+    // Communicate the updated filter states back to the parent
+    onApplyFilters({
+      selectedBuilding: newSelectedBuilding,
+      selectedFloors: newSelectedFloors,
+      selectedActivities: newSelectedActivities,
+    });
+  };
+
+  const clearAllFilters = () => {
+    setSelectedBuilding('');
+    setSelectedFloors([]);
+    setSelectedActivities([]);
+    // Communicate cleared filters back to the parent
+    onApplyFilters({
+      selectedBuilding: '',
+      selectedFloors: [],
+      selectedActivities: [],
+    });
+  };
+
+  return (
+    <div className="dropdown">
+      <a
+        className="dropdown-toggle hide-arrow cursor-pointer"
+        id="filterDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <i className="fa-solid fa-filter bx-sm "></i>
+        
+      </a>
+      <ul
+        className="dropdown-menu p-2"
+        aria-labelledby="filterDropdown"
+        style={{
+          minWidth: "360px",
+          fontSize: "13px",
+        }}
+        // Prevent dropdown from closing when clicking inside it
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Building Filter - Now a Dropdown */}
+        <li>
+          <div className="fw-bold text-dark mb-1">Building</div>
+          <div className="row">
+            <div className="col-12">
+              <select
+                className="form-select form-select-sm"
+                value={selectedBuilding}
+                onChange={(e) => handleFilterChange("building", e.target.value)}
+              >
+                <option value="">Select Building</option>
+                {uniqueBuildings.length > 0 ? (
+                  uniqueBuildings.map((building, idx) => (
+                    <option key={`building-option-${idx}`} value={building}>
+                      {building}
+                    </option>
+                  ))
+                ) : (
+                  <option value="" disabled>No buildings available</option>
+                )}
+              </select>
+            </div>
+          </div>
+        </li>
+
+        {/* Floor Filter - Visible only if a building is selected */}
+        {selectedBuilding && (
+          <>
+            <li>
+              <hr className="my-1" />
+            </li>
+
+            <li>
+              <div className="fw-bold text-dark mb-1">Floor</div>
+              <div className="row">
+                {uniqueFloors.length > 0 ? (
+                  uniqueFloors.map((floor, idx) => (
+                    <div className="col-6" key={`floor-${idx}`}>
+                      <div className="form-check mb-1">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`floor-${floor}`}
+                          checked={selectedFloors.includes(floor)}
+                          onChange={() => handleFilterChange("floor", floor)}
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor={`floor-${floor}`}
+                        >
+                          {floor}
+                        </label>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="col-12 text-muted">No floors for selected building.</div>
+                )}
+              </div>
+            </li>
+          </>
+        )}
+
+        {/* Activity Filter - Visible only if a floor is selected */}
+        {selectedFloors.length > 0 && (
+          <>
+            <li>
+              <hr className="my-1" />
+            </li>
+
+            <li>
+              <div className="fw-bold text-dark mb-1">Activity</div>
+              <div className="row">
+                {uniqueActivities.length > 0 ? (
+                  uniqueActivities.map((activity, idx) => (
+                    <div className="col-6" key={`activity-${idx}`}>
+                      <div className="form-check mb-1">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id={`activity-${activity}`}
+                          checked={selectedActivities.includes(activity)}
+                          onChange={() => handleFilterChange("activity", activity)}
+                        />
+                        <label
+                          className="form-check-label"
+                          htmlFor={`activity-${activity}`}
+                        >
+                          {activity}
+                        </label>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="col-12 text-muted">No activities for selected floor(s).</div>
+                )}
+              </div>
+            </li>
+          </>
+        )}
+
+        {/* Clear Filters */}
+        {(selectedBuilding ||
+          selectedFloors.length > 0 ||
+          selectedActivities.length > 0) && (
+            <>
+              <li>
+                <hr className="my-1" />
+              </li>
+              <li>
+                <button
+                  type="button"
+                  className="dropdown-item text-danger px-2 py-1"
+                  style={{ fontSize: "13px" }}
+                  onClick={clearAllFilters}
+                >
+                  Clear All Filters
+                </button>
+              </li>
+            </>
+          )}
+      </ul>
+    </div>
+  );
+};
+
+export default FilterIcon;

src/pages/Activities/DailyTask.jsx

@@ -1,47 +1,48 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Breadcrumb from "../../components/common/Breadcrumb";
-import { dailyTask } from "../../data/masters";
 import { useTaskList } from "../../hooks/useTasks";
 import { useProjects } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
-import { useProfile } from "../../hooks/useProfile";
-// import { formatDate } from "../../utils/dateUtils"; // Removed this import
-import GlobalModel from "../../components/common/GlobalModel";
-import AssignRoleModel from "../../components/Project/AssignRole";
 import { ReportTask } from "../../components/Activities/ReportTask";
 import ReportTaskComments from "../../components/Activities/ReportTaskComments";
 import DateRangePicker from "../../components/common/DateRangePicker";
-import DatePicker from "../../components/common/DatePicker";
 import { useSearchParams } from "react-router-dom";
 import moment from "moment";
+import FilterIcon from "../../components/common/FilterIcon"; // Import the FilterIcon component
 
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
-  const projectId = searchParams.get("project");
+  const projectIdFromUrl = searchParams.get("project");
-  const selectedProject = useSelector(
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
-    (store) => store.localVariables.projectId
-  );
   const {
     projects,
-    loading: project_lodaing,
+    loading: project_loading,
     error: projects_Error,
   } = useProjects();
 
   const [initialized, setInitialized] = useState(false);
+  const dispatch = useDispatch();
+
+  // State for filters (moved to FilterIcon, but we need to receive them here)
+  const [filters, setFilters] = useState({
+    selectedBuilding: '',
+    selectedFloors: [],
+    selectedActivities: [],
+  });
 
   // Sync projectId (either from URL or pick first accessible one)
   useEffect(() => {
-    if (!project_lodaing && projects.length > 0 && !initialized) {
+    if (!project_loading && projects.length > 0 && !initialized) {
-      if (selectedProject === 1 || selectedProject === undefined) {
+      if (projectIdFromUrl) {
+        dispatch(setProjectId(projectIdFromUrl));
+      } else if (selectedProject === 1 || selectedProject === undefined) {
         dispatch(setProjectId(projects[0].id));
       }
-
       setInitialized(true);
     }
-  }, [project_lodaing, projects, projectId, selectedProject, initialized]);
+  }, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]);
 
-  const dispatch = useDispatch(selectedProject);
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
 
   const {
@@ -59,9 +60,30 @@ const DailyTask = () => {
   const [dates, setDates] = useState([]);
   const popoverRefs = useRef([]);
 
+  // Effect to apply filters (now using filters from FilterIcon)
   useEffect(() => {
-    setTaskLists(TaskList);
+    let filteredTasks = TaskList;
-  }, [TaskList, selectedProject]);
+
+    if (filters.selectedBuilding) {
+      filteredTasks = filteredTasks.filter(task =>
+        task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
+      );
+    }
+
+    if (filters.selectedFloors.length > 0) {
+      filteredTasks = filteredTasks.filter(task =>
+        filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+      );
+    }
+
+    if (filters.selectedActivities.length > 0) {
+      filteredTasks = filteredTasks.filter(task =>
+        filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName)
+      );
+    }
+
+    setTaskLists(filteredTasks);
+  }, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]); // Depend on filters state
 
   useEffect(() => {
     const AssignmentDates = [
@@ -81,26 +103,37 @@ const DailyTask = () => {
 
   const openComment = () => setIsModalOpenComment(true);
   const closeCommentModal = () => setIsModalOpenComment(false);
+
   const handletask = (task) => {
     selectTask(task);
     openModal();
   };
 
   useEffect(() => {
+    // Ensure Bootstrap's Popover is initialized correctly
     popoverRefs.current.forEach((el) => {
-      if (el) {
+      if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
-        new bootstrap.Popover(el, {
+        new window.bootstrap.Popover(el, {
           trigger: "focus",
           placement: "left",
           html: true,
-          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+          content: el.getAttribute("data-bs-content"),
         });
       }
     });
-  }, [dates]);
+  }, [dates, TaskLists]);
+
+  // Handler for project selection
+  const handleProjectChange = (e) => {
+    const newProjectId = e.target.value;
+    dispatch(setProjectId(newProjectId));
+    // Reset filters when project changes (communicate to FilterIcon to clear)
+    setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] });
+  };
 
   return (
     <>
+      {/* Report Task Modal */}
       <div
         className={`modal fade ${isModalOpen ? "show" : ""}`}
         tabIndex="-1"
@@ -115,6 +148,7 @@ const DailyTask = () => {
         />
       </div>
 
+      {/* Report Task Comments Modal */}
       <div
         className={`modal fade ${isModalOpenComment ? "show" : ""}`}
         tabIndex="-1"
@@ -132,34 +166,43 @@ const DailyTask = () => {
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
-            { label: "Daily Task", link: null },
+            { label: "Daily Progress Report", link: null },
           ]}
         ></Breadcrumb>
         <div className="card card-action mb-6">
           <div className="card-body p-1 p-sm-2">
-            <div className="row d-flex justify-content-between">
+            <div className="row d-flex justify-content-between align-items-center">
-              <div className="col-6 text-start">
+              <div className="justify-content-between align-items-center"></div>
+              <div className="col-md-6 d-flex gap-3 align-items-center col-12 text-start mb-2 mb-md-0">
                 <DateRangePicker
                   onRangeChange={setDateRange}
                   DateDifference="6"
                   dateFormat="DD-MM-YYYY"
                 />
+                {/* FilterIcon component now manages its own filter states and logic */}
+                <FilterIcon
+                  taskListData={TaskList} // Pass the raw TaskList to FilterIcon
+                  onApplyFilters={setFilters} // Callback to receive the filtered states from FilterIcon
+                  currentSelectedBuilding={filters.selectedBuilding}
+                  currentSelectedFloors={filters.selectedFloors}
+                  currentSelectedActivities={filters.selectedActivities}
+                />
               </div>
-              <div className="col-sm-3 col-6 text-end mb-1">
+              <div className="col-md-4 col-12 text-center mb-2 mb-md-0">
                 <select
-                  name="DataTables_Table_0_length"
+                  name="project_select"
                   aria-controls="DataTables_Table_0"
                   className="form-select form-select-sm"
-                  value={selectedProject}
+                  value={selectedProject || ""}
-                  onChange={(e) => dispatch(setProjectId(e.target.value))}
+                  onChange={handleProjectChange}
-                  aria-label=""
+                  aria-label="Select Project"
                 >
-                  {project_lodaing && (
+                  {project_loading && (
-                    <option value="Loading..." disabled>
+                    <option value="" disabled>
-                      Loading...
+                      Loading Projects...
                     </option>
                   )}
-                  {!project_lodaing &&
+                  {!project_loading &&
                     projects &&
                     projects?.map((project) => (
                       <option value={project.id} key={project.id}>
@@ -169,13 +212,13 @@ const DailyTask = () => {
                 </select>
               </div>
             </div>
-            <div className="table-responsive text-nowrap">
+            <div className="table-responsive text-nowrap mt-3">
               <table className="table">
                 <thead>
                   <tr>
                     <th>Activity</th>
                     <th>Assigned </th>
-                    <th>Compeleted</th>
+                    <th>Completed</th>
                     <th>Assign On</th>
                     <th>Team</th>
                     <th>Actions</th>
@@ -189,7 +232,7 @@ const DailyTask = () => {
                       </td>
                     </tr>
                   )}
-                  {!task_loading && TaskList.length === 0 && (
+                  {!task_loading && TaskLists.length === 0 && (
                     <tr>
                       <td colSpan={7} className="text-center">
                         <p>No Reports Found</p>
@@ -197,6 +240,11 @@ const DailyTask = () => {
                     </tr>
                   )}
                   {dates.map((date, i) => {
+                    const tasksForDate = TaskLists.filter((task) =>
+                      task.assignmentDate.includes(date)
+                    );
+                    if (tasksForDate.length === 0) return null;
+
                     return (
                       <React.Fragment key={i}>
                         <tr className="table-row-header">
@@ -204,12 +252,10 @@ const DailyTask = () => {
                             <strong>{moment(date).format("DD-MM-YYYY")}</strong>
                           </td>
                         </tr>
-                        {TaskLists.filter((task) =>
+                        {tasksForDate.map((task, index) => {
-                          task.assignmentDate.includes(date)
+                          const refIndex = `${i}-${index}`;
-                        ).map((task, index) => {
-                          const refIndex = index * 10 + i;
                           return (
-                            <React.Fragment key={index}>
+                            <React.Fragment key={refIndex}>
                               <tr>
                                 <td className="flex-wrap text-start">
                                   <div>
@@ -218,7 +264,7 @@ const DailyTask = () => {
                                   </div>
                                   <div>
                                     {" "}
-                                    <label className=" col-form-label text-sm">
+                                    <label className="col-form-label text-sm">
                                       {" "}
                                       {
                                         task?.workItem?.workArea?.floor
@@ -266,23 +312,18 @@ const DailyTask = () => {
                                         ${task.teamMembers
                                           .map(
                                             (member) => `
-                                              <div class="d-flex align-items-center gap-2 mb-2">
+                                            <div class="d-flex align-items-center gap-2 mb-2">
-                                                <div class="avatar avatar-xs">
+                                              <div class="avatar avatar-xs">
-                                                  <span class="avatar-initial rounded-circle bg-label-primary">
+                                                <span class="avatar-initial rounded-circle bg-label-primary">
-                                                    ${
+                                                  ${member?.firstName?.charAt(0) || ""
-                                                      member?.firstName?.charAt(
+                                                  }${member?.lastName?.charAt(0) || ""
-                                                        0
+                                                  }
-                                                      ) || ""
+                                                </span>
-                                                    }${
-                                              member?.lastName?.charAt(0) || ""
-                                            }
-                                                  </span>
-                                                </div>
-                                                <span>${member.firstName} ${
-                                              member.lastName
-                                            }</span>
                                               </div>
-                                            `
+                                              <span>${member.firstName} ${member.lastName
+                                              }</span>
+                                            </div>
+                                          `
                                           )
                                           .join("")}
                                       </div>
@@ -300,7 +341,6 @@ const DailyTask = () => {
                                           title={`${member.firstName} ${member.lastName}`}
                                           className="avatar avatar-xs"
                                         >
-                                          {/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
                                           <span className="avatar-initial rounded-circle bg-label-primary">
                                             {member?.firstName.slice(0, 1)}
                                           </span>
@@ -311,9 +351,8 @@ const DailyTask = () => {
                                         className="avatar avatar-xs"
                                         data-bs-toggle="tooltip"
                                         data-bs-placement="bottom"
-                                        title={`${
+                                        title={`${task.teamMembers.length - 3
-                                          task.teamMembers.length - 3
+                                          } more`}
-                                        } more`}
                                       >
                                         <span className="avatar-initial rounded-circle bg-label-secondary pull-up">
                                           +{task.teamMembers.length - 3}
@@ -326,9 +365,8 @@ const DailyTask = () => {
                                   <div className="d-flex justify-content-center">
                                     <button
                                       type="button"
-                                      className={`btn btn-xs btn-primary ${
+                                      className={`btn btn-xs btn-primary ${task.reportedDate != null ? "d-none" : ""
-                                        task.reportedDate != null ? "d-none" : ""
+                                        }`}
-                                      }`}
                                       onClick={() => {
                                         selectTask(task);
                                         openModal();