UI Freeze on Comment Click in Daily Progress Report

src/pages/Activities/DailyTask.jsx

@@ -26,20 +26,17 @@ const DailyTask = () => {
   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_loading && projects.length > 0 && !initialized) {
       if (projectIdFromUrl) {
         dispatch(setProjectId(projectIdFromUrl));
       } else if (selectedProject === 1 || selectedProject === undefined) {
-        // If no project from URL or default/undefined, pick the first project
         dispatch(setProjectId(projects[0].id));
       }
       setInitialized(true);
@@ -57,7 +54,7 @@ const DailyTask = () => {
 
   const {
     TaskList,
-    loading: task_loading, // This `loading` state indicates if task data is being fetched
+    loading: task_loading, 
     error: task_error,
     refetch,
   } = useTaskList(
@@ -66,13 +63,11 @@ const DailyTask = () => {
     initialized ? dateRange.endDate : null
   );
 
-  const [TaskLists, setTaskLists] = useState([]); // This state holds the *filtered* tasks for display
+  const [TaskLists, setTaskLists] = useState([]); 
   const [dates, setDates] = useState([]);
   const popoverRefs = useRef([]);
 
-  // Effect to apply filters to TaskList (from useTaskList) and update TaskLists (filtered display)
   useEffect(() => {
-    // Only filter if TaskList is available (not null or undefined)
     if (TaskList) {
       let filteredTasks = TaskList;
 
@@ -101,8 +96,6 @@ const DailyTask = () => {
       }
       setTaskLists(filteredTasks);
     } else {
-      // If TaskList is null (e.g., during initial load or project change before data arrives),
-      // ensure TaskLists is also empty to avoid displaying stale data.
       setTaskLists([]);
     }
   }, [
@@ -137,52 +130,22 @@ const DailyTask = () => {
   };
 
   useEffect(() => {
-    // Ensure Bootstrap's Popover is initialized correctly
     popoverRefs.current.forEach((el) => {
-      if (
-        el &&
-        window.bootstrap &&
-        typeof window.bootstrap.Popover === "function"
-      ) {
-        // Dispose existing popovers to prevent duplicates if component re-renders
-        const existingPopover = window.bootstrap.Popover.getInstance(el);
-        if (existingPopover) {
-          existingPopover.dispose();
-        }
-        new window.bootstrap.Popover(el, {
+      if (el) {
+        new bootstrap.Popover(el, {
           trigger: "focus",
           placement: "left",
           html: true,
-          content: el.getAttribute("data-bs-content"),
+          content: el.getAttribute("data-bs-content"), 
         });
       }
     });
-
-    // Cleanup function for popovers when component unmounts or dependencies change
-    return () => {
-      popoverRefs.current.forEach((el) => {
-        if (
-          el &&
-          window.bootstrap &&
-          typeof window.bootstrap.Popover === "function"
-        ) {
-          const existingPopover = window.bootstrap.Popover.getInstance(el);
-          if (existingPopover) {
-            existingPopover.dispose();
-          }
-        }
-      });
-      popoverRefs.current = []; // Clear the refs array
-    };
-  }, [dates, TaskLists]); // Re-initialize popovers when tasks or dates change
-
-  // Handler for project selection
+  },[dates, TaskLists]);
+ 
   const handleProjectChange = (e) => {
     const newProjectId = e.target.value;
     dispatch(setProjectId(newProjectId));
-    // --- IMPORTANT: Clear old data immediately to show loading state ---
-    setTaskLists([]); // This makes the table empty, allowing the spinner to show
-    // Reset filters when project changes (communicate to FilterIcon to clear)
+    setTaskLists([]); 
     setFilters({
       selectedBuilding: "",
       selectedFloors: [],
@@ -192,7 +155,6 @@ const DailyTask = () => {
 
   return (
     <>
-      {/* Report Task Modal */}
       <div
         className={`modal fade ${isModalOpen ? "show d-block" : ""}`}
         tabIndex="-1"
@@ -205,11 +167,8 @@ const DailyTask = () => {
           closeModal={closeModal}
           refetch={refetch}
         />
-        {isModalOpen && <div className="modal-backdrop fade show"></div>}{" "}
-        {/* Add backdrop */}
       </div>
 
-      {/* Report Task Comments Modal */}
       <div
         className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
         tabIndex="-1"
@@ -221,8 +180,6 @@ const DailyTask = () => {
           commentsData={comments}
           closeModal={closeCommentModal}
         />
-        {isModalOpenComment && <div className="modal-backdrop fade show"></div>}{" "}
-        {/* Add backdrop */}
       </div>
 
       <div className="container-xxl flex-grow-1 container-p-y">
@@ -242,15 +199,12 @@ const DailyTask = () => {
                   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
+                  taskListData={TaskList} 
+                  onApplyFilters={setFilters}
                   currentSelectedBuilding={filters.selectedBuilding}
                   currentSelectedFloors={filters.selectedFloors}
                   currentSelectedActivities={filters.selectedActivities}
-                  // You can pass the project_loading state here if you want to disable filter during project load
-                  // isProjectLoading={project_loading}
                 />
               </div>
               <div className="col-md-4 col-12 text-center mb-2 mb-md-0">
@@ -261,7 +215,7 @@ const DailyTask = () => {
                   value={selectedProject || ""}
                   onChange={handleProjectChange}
                   aria-label="Select Project"
-                  disabled={project_loading} // Disable dropdown while projects are loading
+                  disabled={project_loading}
                 >
                   {project_loading && (
                     <option value="" disabled>
@@ -296,7 +250,6 @@ const DailyTask = () => {
                     <tr>
                       <td colSpan={6} className="text-center">
                         {" "}
-                        {/* ColSpan set to 6 based on your table headers */}
                         <div className="mt-10 mb-10 pt-5  pb-10">
                           <div
                             className="spinner-border text-primary"
@@ -309,7 +262,6 @@ const DailyTask = () => {
                       </td>
                     </tr>
                   )}
-                  {/* --- "No Reports Found" message only if not loading and no tasks --- */}
                   {!task_loading &&
                     !project_loading &&
                     TaskLists.length === 0 && (
@@ -317,20 +269,17 @@ const DailyTask = () => {
                         <td colSpan={6} className="text-center">
                           <div className="mt-10 mb-10 pt-10 pb-10">
                             {" "}
-                            {/* ColSpan set to 6 */}
                             <p>No Reports Found</p>
                           </div>
                         </td>
                       </tr>
                     )}
-                  {/* --- Render tasks when not loading and tasks exist --- */}
                   {!task_loading &&
                     TaskLists.length > 0 &&
                     dates.map((date, i) => {
                       const tasksForDate = TaskLists.filter((task) =>
                         task.assignmentDate.includes(date)
                       );
-                      // Only render the date header if there are tasks for that date after filtering
                       if (tasksForDate.length === 0) return null;
 
                       return (
@@ -338,14 +287,13 @@ const DailyTask = () => {
                           <tr className="table-row-header">
                             <td colSpan={6} className="text-start">
                               {" "}
-                              {/* ColSpan set to 6 */}
                               <strong>
                                 {moment(date).format("DD-MM-YYYY")}
                               </strong>
                             </td>
                           </tr>
                           {tasksForDate.map((task, index) => {
-                            const refIndex = `${i}-${index}`;
+                            const refIndex = index * 10 + i;
                             return (
                               <React.Fragment key={refIndex}>
                                 <tr>