Implement a spinner in the Daily Progress Report to indicate when data is being loaded.

src/pages/Activities/DailyTask.jsx

@@ -37,6 +37,7 @@ const DailyTask = () => {
       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);
@@ -47,7 +48,7 @@ const DailyTask = () => {
 
   const {
     TaskList,
-    loading: task_loading,
+    loading: task_loading, // This `loading` state indicates if task data is being fetched
     error: task_error,
     refetch,
   } = useTaskList(
@@ -56,34 +57,40 @@ const DailyTask = () => {
     initialized ? dateRange.endDate : null
   );
 
-  const [TaskLists, setTaskLists] = useState([]);
+  const [TaskLists, setTaskLists] = useState([]); // This state holds the *filtered* tasks for display
   const [dates, setDates] = useState([]);
   const popoverRefs = useRef([]);
 
-  // Effect to apply filters (now using filters from FilterIcon)
+  // Effect to apply filters to TaskList (from useTaskList) and update TaskLists (filtered display)
   useEffect(() => {
-    let filteredTasks = TaskList;
+    // Only filter if TaskList is available (not null or undefined)
+    if (TaskList) {
+      let filteredTasks = TaskList;
 
-    if (filters.selectedBuilding) {
+      if (filters.selectedBuilding) {
-      filteredTasks = filteredTasks.filter(task =>
+        filteredTasks = filteredTasks.filter(task =>
-        task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
+          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);
+    } 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([]);
     }
-
+  }, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]);
-    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 = [
@@ -113,6 +120,11 @@ const DailyTask = () => {
     // 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, {
           trigger: "focus",
           placement: "left",
@@ -121,12 +133,27 @@ const DailyTask = () => {
         });
       }
     });
-  }, [dates, TaskLists]);
+
+    // 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
   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)
     setFilters({ selectedBuilding: '', selectedFloors: [], selectedActivities: [] });
   };
@@ -135,7 +162,7 @@ const DailyTask = () => {
     <>
       {/* Report Task Modal */}
       <div
-        className={`modal fade ${isModalOpen ? "show" : ""}`}
+        className={`modal fade ${isModalOpen ? "show d-block" : ""}`} 
         tabIndex="-1"
         role="dialog"
         style={{ display: isModalOpen ? "block" : "none" }}
@@ -146,11 +173,12 @@ 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" : ""}`}
+        className={`modal fade ${isModalOpenComment ? "show d-block" : ""}`}
         tabIndex="-1"
         role="dialog"
         style={{ display: isModalOpenComment ? "block" : "none" }}
@@ -160,6 +188,7 @@ 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">
@@ -172,7 +201,6 @@ const DailyTask = () => {
         <div className="card card-action mb-6">
           <div className="card-body p-1 p-sm-2">
             <div className="row d-flex justify-content-between align-items-center">
-              <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}
@@ -187,6 +215,8 @@ const DailyTask = () => {
                   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">
@@ -197,6 +227,7 @@ const DailyTask = () => {
                   value={selectedProject || ""}
                   onChange={handleProjectChange}
                   aria-label="Select Project"
+                  disabled={project_loading} // Disable dropdown while projects are loading
                 >
                   {project_loading && (
                     <option value="" disabled>
@@ -226,30 +257,37 @@ const DailyTask = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
+                  {/* --- Spinner when tasks are loading --- */}
                   {task_loading && (
                     <tr>
-                      <td colSpan={7} className="text-center">
+                      <td colSpan={6} className="text-center"> {/* ColSpan set to 6 based on your table headers */}
-                        <p>Loading..</p>
+                        <div className="spinner-border text-primary" role="status">
+                          <span className="visually-hidden">Loading...</span>
+                        </div>
+                        <p className="mt-2">Loading Tasks...</p>
                       </td>
                     </tr>
                   )}
+                  {/* --- "No Reports Found" message only if not loading and no tasks --- */}
                   {!task_loading && TaskLists.length === 0 && (
                     <tr>
-                      <td colSpan={7} className="text-center">
+                      <td colSpan={6} className="text-center"> {/* ColSpan set to 6 */}
                         <p>No Reports Found</p>
                       </td>
                     </tr>
                   )}
-                  {dates.map((date, i) => {
+                  {/* --- 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 (
                       <React.Fragment key={i}>
                         <tr className="table-row-header">
-                          <td colSpan={7} className="text-start">
+                          <td colSpan={6} className="text-start"> {/* ColSpan set to 6 */}
                             <strong>{moment(date).format("DD-MM-YYYY")}</strong>
                           </td>
                         </tr>
@@ -264,7 +302,6 @@ const DailyTask = () => {
                                       .activityName || "No Activity Name"}
                                   </div>
                                   <div>
-                                    {" "}
                                     <label className="col-form-label text-sm">
                                       {" "}
                                       {
@@ -403,4 +440,4 @@ const DailyTask = () => {
     </>
   );
 };
-export default DailyTask;
+export default DailyTask;

src/pages/authentication/ResetPasswordPage.jsx

@@ -67,7 +67,7 @@ const ResetPasswordPage = () => {
       navigate("/auth/login", { replace: true });
       // setLoading(false);
     } catch (error) {
-      showToast("Token is expries or Invalid ", "error");
+      showToast("Link is expries or Invalid ", "error");
       setTokenExpired(true);
       setLoading(false);
     }
@@ -76,8 +76,8 @@ const ResetPasswordPage = () => {
   if (tokenExpired) {
     return (
       <AuthWrapper>
-        <h4 className="mb-2 text-secondary">Session Expired 🔒</h4>
+        <h4 className="mb-2 ">Invalid Link 🔒</h4>
-        <p className="mb-4">Your session has expired or token is invalid.</p>
+        <p className="mb-4" style={{fontSize: "12px"}}>This link appears to be invalid or expired. Please use the 'Forgot Password' feature to set your new password.</p>
         <div className="text-center mb-4">
           <Link to="/auth/forgot-password" className="btn btn-outline-primary">
             Go to Forgot Password