Merge branch 'Issue_Jun_1W_2' of https://git.marcoaiot.com/admin/marco.pms.web into Issue_Jun_1W_2

src/components/Activities/Attendance.jsx

@@ -33,7 +33,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
 
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
-    10
+    20
   );
   return (
     <>
@@ -130,7 +130,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               </tbody>
             </table>
 
-            {!loading && (
+            {!loading>20 && (
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li

src/components/Activities/ReportTaskComments.jsx

@@ -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>

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,35 +166,44 @@ 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}
                   endDateMode="today"
                   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}>
@@ -170,13 +213,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>
@@ -190,7 +233,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>
@@ -198,6 +241,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">
@@ -205,12 +253,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>
@@ -219,7 +265,7 @@ const DailyTask = () => {
                                   </div>
                                   <div>
                                     {" "}
-                                    <label className=" col-form-label text-sm">
+                                    <label className="col-form-label text-sm">
                                       {" "}
                                       {
                                         task?.workItem?.workArea?.floor
@@ -267,23 +313,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>
@@ -301,7 +342,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>
@@ -312,9 +352,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}
@@ -327,9 +366,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();

src/pages/authentication/LoginPage.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { AuthWrapper } from "./AuthWrapper";
 import { useNavigate } from "react-router-dom";
@@ -9,16 +9,23 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-const loginScheam = z.object({
-  username: z.string().email(),
-  password: z.string().min(1, { message: "Password required" }),
-  rememberMe: z.boolean(),
-});
-
 const LoginPage = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [hidepass, setHidepass] = useState(true);
+  const [IsLoginWithOTP, setLoginWithOtp] = useState(false);
+  const [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false);
+  const now = Date.now();
+
+  const loginSchema = IsLoginWithOTP
+    ? z.object({
+        username: z.string().email({ message: "Valid email required" }),
+      })
+    : z.object({
+        username: z.string().email({ message: "Valid email required" }),
+        password: z.string().min(1, { message: "Password required" }),
+        rememberMe: z.boolean(),
+      });
 
   const {
     register,
@@ -27,35 +34,53 @@ const LoginPage = () => {
     reset,
     getValues,
   } = useForm({
-    resolver: zodResolver(loginScheam),
+    resolver: zodResolver(loginSchema),
   });
 
   const onSubmit = async (data) => {
     setLoading(true);
 
     try {
-      let userCredential = {
+      if (!IsLoginWithOTP) {
-        username: data.username,
+        const userCredential = {
-        password: data.password,
+          username: data.username,
-      };
+          password: data.password,
-      const response = await AuthRepository.login(userCredential);
+        };
-      localStorage.setItem("jwtToken", response.data.token);
+        const response = await AuthRepository.login(userCredential);
-      localStorage.setItem("refreshToken", response.data.refreshToken);
+        localStorage.setItem("jwtToken", response.data.token);
-      setLoading(false);
+        localStorage.setItem("refreshToken", response.data.refreshToken);
-      navigate("/dashboard");
+        setLoading(false);
+        navigate("/dashboard");
+      } else {
+        await AuthRepository.sendOTP({ email: data.username });
+        localStorage.setItem("otpUsername", data.username);
+        localStorage.setItem("otpSentTime", now.toString());
+        navigate("/auth/login-otp");
+      }
     } catch (err) {
-       showToast("Invalid username or password.","error")
+      showToast("Invalid username or password.", "error");
       setLoading(false);
     }
   };
 
+  useEffect(() => {
+    const otpSentTime = localStorage.getItem("otpSentTime");
+    if (
+      localStorage.getItem("otpUsername") &&
+      IsLoginWithOTP &&
+      now - Number(otpSentTime) < 10 * 60 * 1000
+    ) {
+      navigate("/auth/login-otp");
+    }
+  }, [IsLoginWithOTP]);
   return (
     <AuthWrapper>
       <h4 className="mb-2">Welcome to PMS!</h4>
       <p className="mb-4">
-        Please sign-in to your account and start the adventure
+        {IsLoginWithOTP
+          ? "Enter your email to receive a one-time password (OTP)."
+          : "Please sign-in to your account and start the adventure."}
       </p>
-
       <form
         id="formAuthentication"
         className="mb-3"
@@ -70,7 +95,6 @@ const LoginPage = () => {
             className="form-control"
             id="username"
             {...register("username")}
-            name="username"
             placeholder="Enter your email or username"
             autoFocus
           />
@@ -83,87 +107,100 @@ const LoginPage = () => {
             </div>
           )}
         </div>
-        <div className="mb-3 form-password-toggle">
+
-          <div className="d-flex justify-content-center">
+        {!IsLoginWithOTP && (
-            <label className="form-label" htmlFor="password">
+          <>
-              Password
+            <div className="mb-3 form-password-toggle">
-            </label>
+              <label className="form-label" htmlFor="password">
-          </div>
+                Password
-          <div className="input-group input-group-merge">
+              </label>
-            <input
+              <div className="input-group input-group-merge">
-              type={hidepass ? "password" : "text"}
+                <input
-              autoComplete="true"
+                  type={hidepass ? "password" : "text"}
-              id="password"
+                  autoComplete="true"
-              {...register("password")}
+                  id="password"
-              className="form-control"
+                  {...register("password")}
-              name="password"
+                  className="form-control"
-              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                  placeholder="••••••••••••"
-              aria-describedby="password"
+                />
-            />
+                <button
-            <button
+                  type="button"
-              type="button"
+                  className="btn border-top border-end border-bottom"
-              className="btn border-top border-end border-bottom"
+                  onClick={() => setHidepass(!hidepass)}
-              onClick={() => setHidepass(!hidepass)}
+                  style={{
-              style={{
+                    borderTopLeftRadius: 0,
-                borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
-                borderBottomLeftRadius: 0,
+                    borderLeft: 0,
-                borderLeft: 0,
+                  }}
-              }}
+                >
-            >
+                  {hidepass ? (
-              {hidepass ? (
+                    <i className="bx bx-hide" />
-                <i className="bx bx-hide" />
+                  ) : (
-              ) : (
+                    <i className="bx bx-show" />
-                <i className="bx bx-show" />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.password.message}
+                </div>
               )}
-            </button>
-          </div>
-          {errors.password && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.password.message}
             </div>
-          )}
+
-        </div>
+            <div className="mb-3 d-flex justify-content-between">
-        <div className="mb-3 d-flex justify-content-between">
+              <div className="form-check d-flex">
-          <div className="form-check d-flex">
+                <input
-            <input
+                  className="form-check-input"
-              className="form-check-input"
+                  type="checkbox"
-              type="checkbox"
+                  id="remember-me"
-              id="remember-me"
+                  {...register("rememberMe")}
-              name="rememberMe"
+                />
-              {...register("rememberMe")}
+                <label className="form-check-label ms-2">Remember Me</label>
-            />
+              </div>
-            <label className="form-check-label ms-2">Remember Me</label>
+              <Link to="/auth/forgot-password">Forgot Password?</Link>
-          </div>
+            </div>
-          <Link
+          </>
-            aria-label="Go to Forgot Password Page"
+        )}
-            to="/auth/forgot-password"
+
-          >
-            <span>Forgot Password?</span>
-          </Link>
-        </div>
         <div className="mb-3">
           <button
-            aria-label="Click me"
+            aria-label="Submit form"
-            className="btn btn-primary d-grid w-100"
+            className="btn btn-primary d-grid w-100 mb-2"
             type="submit"
           >
-            {loading ? "Please Wait" : " Sign in"}
+            {loading ? "Please Wait" : IsLoginWithOTP ? "Send OTP" : "Sign In"}
           </button>
+          {!IsLoginWithOTP && <div className="p-2">OR</div>}
+          {!IsLoginWithOTP && (
+            <button
+              aria-label="loginwithotp"
+              type="button"
+              onClick={() => setLoginWithOtp(true)}
+              className="btn btn-secondary  w-100"
+            >
+              Login With OTP
+            </button>
+          )}
         </div>
       </form>
 
       <p className="text-center">
         <span>New on our platform? </span>
-        <Link
+        {IsLoginWithOTP ? (
-          aria-label="Go to Register Page"
+          <a
-          to="/auth/reqest/demo"
+            className="text-primary cursor-pointer"
-          className="registration-link"
+            onClick={() => setLoginWithOtp(false)}
-        >
+          >
-          <span>Request a Demo</span>
+            Login With Password
-        </Link>
+          </a>
+        ) : (
+          <Link to="/auth/reqest/demo" className="registration-link">
+            Request a Demo
+          </Link>
+        )}
       </p>
     </AuthWrapper>
   );

src/pages/authentication/LoginWithOtp.jsx

@@ -0,0 +1,185 @@
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState, useRef, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import showToast from "../../services/toastService";
+import { AuthWrapper } from "./AuthWrapper";
+import { OTP_EXPIRY_SECONDS } from "../../utils/constants";
+import AuthRepository from "../../repositories/AuthRepository";
+
+const otpSchema = z.object({
+  otp1: z.string().min(1, "Required"),
+  otp2: z.string().min(1, "Required"),
+  otp3: z.string().min(1, "Required"),
+  otp4: z.string().min(1, "Required"),
+});
+
+const LoginWithOtp = () => {
+  const navigate = useNavigate();
+
+    const [ loading, setLoading ] = useState( false );
+    const [ timeLeft, setTimeLeft ] = useState( 0 );
+    
+
+  const inputRefs = useRef([]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitted },
+    getValues,
+  } = useForm({
+    resolver: zodResolver(otpSchema),
+  });
+
+  const onSubmit = async (data) => {
+    const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
+      const username = localStorage.getItem( "otpUsername" );
+      console.log(username)
+    setLoading(true);
+
+    try {
+        let requestedData =  {
+            email: username,
+            otp:finalOtp
+        }
+        const response = await AuthRepository.verifyOTP( requestedData )
+  
+        localStorage.setItem("jwtToken", response.data.token);
+        localStorage.setItem("refreshToken", response.data.refreshToken);
+        setLoading( false );
+         localStorage.removeItem( "otpUsername" );
+        localStorage.removeItem( "otpSentTime" );
+        navigate( "/dashboard" );
+       
+    } catch (err) {
+        showToast( "Invalid or expired OTP.", "error" );
+        
+        setLoading(false);
+    }
+  };
+const formatTime = (seconds) => {
+  const min = Math.floor(seconds / 60).toString().padStart(2, "0");
+  const sec = (seconds % 60).toString().padStart(2, "0");
+  return `${min}:${sec}`;
+};
+
+useEffect(() => {
+  const otpSentTime = localStorage.getItem("otpSentTime");
+  const now = Date.now();
+
+  if (otpSentTime) {
+    const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
+    const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0);    // prevent negatives
+    setTimeLeft(remaining);
+  }
+}, []);
+useEffect(() => {
+  if (timeLeft <= 0) return;
+
+  const timer = setInterval(() => {
+    setTimeLeft((prev) => {
+      if (prev <= 1) {
+        clearInterval(timer);
+          localStorage.removeItem( "otpSentTime" ); 
+          localStorage.removeItem("otpUsername"); 
+        return 0;
+      }
+      return prev - 1;
+    });
+  }, 1000);
+
+  return () => clearInterval(timer);
+}, [timeLeft]);
+
+
+  return (
+    <AuthWrapper>
+      <div className="otp-verification-wrapper">
+        <h4>Verify Your OTP</h4>
+        <p className="mb-4">Please enter the 4-digit code sent to your email.</p>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="d-flex justify-content-center gap-6 mb-3">
+            {[1, 2, 3, 4].map((num, idx) => {
+              const { ref, onChange, ...rest } = register(`otp${num}`);
+
+              return (
+                <input
+                  key={num}
+                  type="text"
+                  maxLength={1}
+                  className={`form-control text-center ${
+                    errors[`otp${num}`] ? "is-invalid" : ""
+                  }`}
+                  ref={(el) => {
+                    inputRefs.current[idx] = el;
+                    ref(el);
+                  }}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    onChange(e);
+                    if (/^\d$/.test(val) && idx < 3) {
+                      inputRefs.current[idx + 1]?.focus();
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (
+                      e.key === "Backspace" &&
+                      !getValues()[`otp${num}`] &&
+                      idx > 0
+                    ) {
+                      inputRefs.current[idx - 1]?.focus();
+                    }
+                  }}
+                  style={{ width: "40px", height: "40px", fontSize: "15px" }}
+                  {...rest}
+                />
+              );
+            })}
+          </div>
+
+          {isSubmitted && Object.values(errors).some((e) => e?.message) && (
+            <div
+              className="text-danger text-center mb-3"
+              style={{ fontSize: "12px" }}
+            >
+              Please fill all four digits.
+            </div>
+          )}
+
+          <button
+            type="submit"
+            className="btn btn-primary d-grid w-100"
+            disabled={loading}
+          >
+            {loading ? "Verifying..." : "Verify OTP"}
+          </button>
+
+          {timeLeft > 0 ? (
+            <p
+              className="text-center text-muted mt-2"
+              style={{ fontSize: "14px" }}
+            >
+              This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
+            </p>
+                  ) : (
+                          <div>
+                              <p
+              className="text-center text-danger mt-2 text small-text m-0"
+            
+            >
+              OTP has expired. Please request a new one.
+                              </p>
+                              <a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
+                          </div>
+            
+          )}
+        </form>
+      </div>
+    </AuthWrapper>
+  );
+};
+
+export default LoginWithOtp;

src/repositories/AuthRepository.jsx

@@ -10,7 +10,9 @@ const AuthRepository = {
   resetPassword: (data) => api.post("/api/auth/reset-password", data),
   forgotPassword: (data) => api.post("/api/auth/forgot-password", data),
   sendMail: (data) => api.post("/api/auth/sendmail", data),
-  changepassword: (data) => api.post("/api/auth/change-password", data),
+  changepassword: ( data ) => api.post( "/api/auth/change-password", data ),
+  sendOTP: ( data ) => api.post( 'api/auth/send-otp', data ),
+  verifyOTP:(data)=>api.post("api/auth/login-otp",data)
 };
 
 export default AuthRepository;

src/router/AppRoutes.jsx

@@ -37,13 +37,15 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 // Protected Route Wrapper
 import ProtectedRoute from "./ProtectedRoute";
 import Directory from "../pages/Directory/Directory";
+import LoginWithOtp from "../pages/authentication/LoginWithOtp";
 
 const router = createBrowserRouter(
   [
     {
       element: <AuthLayout />,
       children: [
-        { path: "/auth/login", element: <LoginPage /> },
+        {path: "/auth/login", element: <LoginPage />},
+        {path: "/auth/login-otp", element: <LoginWithOtp />},
         { path: "/auth/reqest/demo", element: <RegisterPage /> },
         { path: "/auth/forgot-password", element: <ForgotPasswordPage /> },
         { path: "/reset-password", element: <ResetPasswordPage /> },

src/utils/constants.jsx

@@ -1,5 +1,6 @@
 export const THRESH_HOLD = 48;  //  hours
 export const DURATION_TIME = 10; // minutes
+export const OTP_EXPIRY_SECONDS = 600  // OTP time
 
 export const MANAGE_MASTER = "588a8824-f924-4955-82d8-fc51956cf323";
 
@@ -25,3 +26,4 @@ export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
 export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"
+