src/components/common/FilterIcon.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
 
 const FilterIcon = ({
   taskListData,
@@ -8,26 +7,15 @@ const FilterIcon = ({
   currentSelectedFloors,
   currentSelectedActivities,
 }) => {
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
-
   const [selectedBuilding, setSelectedBuilding] = useState(currentSelectedBuilding || "");
   const [selectedFloors, setSelectedFloors] = useState(currentSelectedFloors || []);
   const [selectedActivities, setSelectedActivities] = useState(currentSelectedActivities || []);
 
-  const [appliedBuilding, setAppliedBuilding] = useState(currentSelectedBuilding || "");
-  const [appliedFloors, setAppliedFloors] = useState(currentSelectedFloors || []);
-  const [appliedActivities, setAppliedActivities] = useState(currentSelectedActivities || []);
-
-  // Reset filters whenever inputs OR projectId changes
   useEffect(() => {
     setSelectedBuilding(currentSelectedBuilding || "");
     setSelectedFloors(currentSelectedFloors || []);
     setSelectedActivities(currentSelectedActivities || []);
-
+  }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities]);
-    setAppliedBuilding(currentSelectedBuilding || "");
-    setAppliedFloors(currentSelectedFloors || []);
-    setAppliedActivities(currentSelectedActivities || []);
-  }, [currentSelectedBuilding, currentSelectedFloors, currentSelectedActivities, selectedProject]);
 
   const getUniqueFilterValues = (key, overrideBuilding, overrideFloors) => {
     if (!taskListData) return [];
@@ -73,11 +61,12 @@ const FilterIcon = ({
     } else if (filterType === "floor") {
       if (updatedFloors.includes(value)) {
         updatedFloors = updatedFloors.filter((floor) => floor !== value);
-        const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors);
-        updatedActivities = updatedActivities.filter((act) => validActivities.includes(act));
       } else {
         updatedFloors.push(value);
       }
+
+      const validActivities = getUniqueFilterValues("activity", updatedBuilding, updatedFloors);
+      updatedActivities = updatedActivities.filter((act) => validActivities.includes(act));
     } else if (filterType === "activity") {
       if (updatedActivities.includes(value)) {
         updatedActivities = updatedActivities.filter((act) => act !== value);
@@ -89,20 +78,12 @@ const FilterIcon = ({
     setSelectedBuilding(updatedBuilding);
     setSelectedFloors(updatedFloors);
     setSelectedActivities(updatedActivities);
-  };
-
-  const applyFilters = () => {
-    setAppliedBuilding(selectedBuilding);
-    setAppliedFloors(selectedFloors);
-    setAppliedActivities(selectedActivities);
 
     onApplyFilters({
-      selectedBuilding,
+      selectedBuilding: updatedBuilding,
-      selectedFloors,
+      selectedFloors: updatedFloors,
-      selectedActivities,
+      selectedActivities: updatedActivities,
     });
-
-    document.getElementById("filterDropdown").click();
   };
 
   const clearAllFilters = () => {
@@ -110,10 +91,6 @@ const FilterIcon = ({
     setSelectedFloors([]);
     setSelectedActivities([]);
 
-    setAppliedBuilding("");
-    setAppliedFloors([]);
-    setAppliedActivities([]);
-
     onApplyFilters({
       selectedBuilding: "",
       selectedFloors: [],
@@ -121,51 +98,21 @@ const FilterIcon = ({
     });
   };
 
-  // Count applied filters
-  const appliedFilterCount =
-    (appliedBuilding ? 1 : 0) + appliedFloors.length + appliedActivities.length;
-
   return (
-    <div className="dropdown" style={{ marginLeft: "-14px", position: "relative" }}>
+    <div className="dropdown" style={{marginLeft:"-14px"}}>
       <a
         className="dropdown-toggle hide-arrow cursor-pointer"
         id="filterDropdown"
         data-bs-toggle="dropdown"
         aria-expanded="false"
       >
-        <div style={{ position: "relative", display: "inline-block" }}>
+        {/* <i className="bx bx-slider-alt ms-1" /> */}
         <i
           className="bx bx-slider-alt"
-            style={{
+          style={{ color: selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0 ? "#7161EF" : "gray" }}
-              color: appliedFilterCount > 0 ? "#7161EF" : "gray",
-              fontSize: "20px",
-            }}
         ></i>
-          {appliedFilterCount > 0 && (
-            <span
-              style={{
-                position: "absolute",
-                top: "-11px",
-                right: "-6px",
-                backgroundColor: "#FFC107", // yellow
-                color: "white",
-                fontSize: "10px",
-                fontWeight: "bold",
-                borderRadius: "50%",
-                width: "18px",
-                height: "18px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: "1px solid white",
-              }}
-            >
-              {appliedFilterCount}
-            </span>
-          )}
-        </div>
-      </a>
 
+      </a>
       <ul
         className="dropdown-menu p-2 mt-2"
         aria-labelledby="filterDropdown"
@@ -258,30 +205,45 @@ const FilterIcon = ({
         )}
 
         {/* Action Buttons */}
-        <li>
+        <li><hr className="my-1" /></li>
-          <hr className="my-1" />
+        {(selectedBuilding || selectedFloors.length > 0 || selectedActivities.length > 0) && (
-        </li>
+          <li className="d-flex justify-content-end gap-2 px-2">
-        {(appliedFilterCount > 0 ||
-          selectedBuilding ||
-          selectedFloors.length > 0 ||
-          selectedActivities.length > 0) && (
-          <li className="d-flex justify-content-end gap-2 px-2 mt-2 mb-2">
             <button
               type="button"
-              className="btn btn-secondary btn-sm py-0 px-2"
+              className="btn btn-sm"
+              style={{
+                backgroundColor: "#7161EF",
+                color: "white",
+                fontSize: "13px",
+                padding: "4px 16px",
+                borderRadius: "8px",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
+              }}
               onClick={clearAllFilters}
             >
               Clear
             </button>
             <button
               type="button"
-              className="btn btn-primary btn-sm py-0 px-2"
+              className="btn btn-sm"
-              onClick={applyFilters}
+              style={{
+                backgroundColor: "#7161EF",
+                color: "white",
+                fontSize: "13px",
+                padding: "4px 16px",
+                borderRadius: "8px",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.1)"
+              }}
+              onClick={() => {
+                document.getElementById("filterDropdown").click();
+              }}
             >
               Apply
             </button>
           </li>
         )}
+
+
       </ul>
     </div>
   );

src/pages/Activities/DailyTask.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useTaskList } from "../../hooks/useTasks";
 import { useProjectName } from "../../hooks/useProjects";
@@ -14,6 +14,7 @@ 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 = () => {
@@ -44,15 +45,6 @@ const DailyTask = () => {
     }
   }, [selectedProject, projectNames, dispatch]);
 
-  // 🔹 Reset filters when project changes
-  useEffect(() => {
-    setFilters({
-      selectedBuilding: "",
-      selectedFloors: [],
-      selectedActivities: [],
-    });
-  }, [selectedProject]);
-
   //  Memoized filtering
   const filteredTasks = useMemo(() => {
     if (!TaskList) return [];
@@ -171,7 +163,6 @@ const DailyTask = () => {
                 currentSelectedBuilding={filters.selectedBuilding}
                 currentSelectedFloors={filters.selectedFloors}
                 currentSelectedActivities={filters.selectedActivities}
-                selectedProject={selectedProject} 
               />
             </div>