Merge pull request 'Implement a spinner in the Daily Progress Report to indicate when data is being loaded.' (#194) from Kartik_Bug#487 into Issue_Jun_1W_2

Reviewed-on: #194

src/pages/Activities/DailyTask.jsx

@@ -14,7 +14,9 @@ import FilterIcon from "../../components/common/FilterIcon"; // Import the Filte
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
   const projectIdFromUrl = searchParams.get("project");
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
   const {
     projects,
     loading: project_loading,
@@ -26,7 +28,7 @@ const DailyTask = () => {
 
   // State for filters (moved to FilterIcon, but we need to receive them here)
   const [filters, setFilters] = useState({
-    selectedBuilding: '',
+    selectedBuilding: "",
     selectedFloors: [],
     selectedActivities: [],
   });
@@ -37,17 +39,25 @@ 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);
     }
-  }, [project_loading, projects, projectIdFromUrl, selectedProject, initialized, dispatch]);
+  }, [
+    project_loading,
+    projects,
+    projectIdFromUrl,
+    selectedProject,
+    initialized,
+    dispatch,
+  ]);
 
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
 
   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 +66,51 @@ 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(() => {
+    // Only filter if TaskList is available (not null or undefined)
+    if (TaskList) {
       let filteredTasks = TaskList;
 
       if (filters.selectedBuilding) {
-      filteredTasks = filteredTasks.filter(task =>
+        filteredTasks = filteredTasks.filter(
-        task?.workItem?.workArea?.floor?.building?.name === filters.selectedBuilding
+          (task) =>
+            task?.workItem?.workArea?.floor?.building?.name ===
+            filters.selectedBuilding
         );
       }
 
       if (filters.selectedFloors.length > 0) {
-      filteredTasks = filteredTasks.filter(task =>
+        filteredTasks = filteredTasks.filter((task) =>
-        filters.selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)
+          filters.selectedFloors.includes(
+            task?.workItem?.workArea?.floor?.floorName
+          )
         );
       }
 
       if (filters.selectedActivities.length > 0) {
-      filteredTasks = filteredTasks.filter(task =>
+        filteredTasks = filteredTasks.filter((task) =>
-        filters.selectedActivities.includes(task?.workItem?.activityMaster?.activityName)
+          filters.selectedActivities.includes(
+            task?.workItem?.activityMaster?.activityName
+          )
         );
       }
-
       setTaskLists(filteredTasks);
-  }, [TaskList, filters.selectedBuilding, filters.selectedFloors, filters.selectedActivities]); // Depend on filters state
+    } 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,
+  ]);
 
   useEffect(() => {
     const AssignmentDates = [
@@ -112,7 +139,16 @@ const DailyTask = () => {
   useEffect(() => {
     // Ensure Bootstrap's Popover is initialized correctly
     popoverRefs.current.forEach((el) => {
-      if (el && window.bootstrap && typeof window.bootstrap.Popover === 'function') {
+      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,21 +157,44 @@ 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: [] });
+    setFilters({
+      selectedBuilding: "",
+      selectedFloors: [],
+      selectedActivities: [],
+    });
   };
 
   return (
     <>
       {/* 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 +205,13 @@ 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 +221,8 @@ 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 +235,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 +249,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 +261,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,31 +291,57 @@ const DailyTask = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {task_loading && (
+                  {/* --- Spinner when tasks are loading --- */}
+                  {(task_loading || project_loading) && (
                     <tr>
-                      <td colSpan={7} className="text-center">
+                      <td colSpan={6} className="text-center">
-                        <p>Loading..</p>
+                        {" "}
+                        {/* 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"
+                            role="status"
+                          >
+                            <span className="visually-hidden">Loading...</span>
+                          </div>
+                          <p className="mt-2">Loading Tasks...</p>
+                        </div>
                       </td>
                     </tr>
                   )}
-                  {!task_loading && TaskLists.length === 0 && (
+                  {/* --- "No Reports Found" message only if not loading and no tasks --- */}
+                  {!task_loading &&
+                    !project_loading &&
+                    TaskLists.length === 0 && (
                       <tr>
-                      <td colSpan={7} className="text-center">
+                        <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>
                     )}
-                  {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">
-                            <strong>{moment(date).format("DD-MM-YYYY")}</strong>
+                              {" "}
+                              {/* ColSpan set to 6 */}
+                              <strong>
+                                {moment(date).format("DD-MM-YYYY")}
+                              </strong>
                             </td>
                           </tr>
                           {tasksForDate.map((task, index) => {
@@ -264,7 +355,6 @@ const DailyTask = () => {
                                         .activityName || "No Activity Name"}
                                     </div>
                                     <div>
-                                    {" "}
                                       <label className="col-form-label text-sm">
                                         {" "}
                                         {
@@ -295,7 +385,11 @@ const DailyTask = () => {
                                       task.workItem.completedWork}
                                   </td>
                                   <td>{task.completedTask}</td>
-                                <td>{moment(task.assignmentDate).format("DD-MM-YYYY")}</td>
+                                  <td>
+                                    {moment(task.assignmentDate).format(
+                                      "DD-MM-YYYY"
+                                    )}
+                                  </td>
                                   <td className="text-center">
                                     <div
                                       key={refIndex}
@@ -316,12 +410,17 @@ const DailyTask = () => {
                                             <div class="d-flex align-items-center gap-2 mb-2">
                                               <div class="avatar avatar-xs">
                                                 <span class="avatar-initial rounded-circle bg-label-primary">
-                                                  ${member?.firstName?.charAt(0) || ""
+                                                  ${
-                                                  }${member?.lastName?.charAt(0) || ""
+                                                    member?.firstName?.charAt(
+                                                      0
+                                                    ) || ""
+                                                  }${
+                                              member?.lastName?.charAt(0) || ""
                                             }
                                                 </span>
                                               </div>
-                                              <span>${member.firstName} ${member.lastName
+                                              <span>${member.firstName} ${
+                                              member.lastName
                                             }</span>
                                             </div>
                                           `
@@ -352,7 +451,8 @@ const DailyTask = () => {
                                           className="avatar avatar-xs"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="bottom"
-                                        title={`${task.teamMembers.length - 3
+                                          title={`${
+                                            task.teamMembers.length - 3
                                           } more`}
                                         >
                                           <span className="avatar-initial rounded-circle bg-label-secondary pull-up">
@@ -366,7 +466,10 @@ const DailyTask = () => {
                                     <div className="d-flex justify-content-center">
                                       <button
                                         type="button"
-                                      className={`btn btn-xs btn-primary ${task.reportedDate != null ? "d-none" : ""
+                                        className={`btn btn-xs btn-primary ${
+                                          task.reportedDate != null
+                                            ? "d-none"
+                                            : ""
                                         }`}
                                         onClick={() => {
                                           selectTask(task);

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