Merge branch 'pramod_Task#482' into Issue_Jun_1W_2

# Conflicts:
#	src/pages/authentication/LoginPage.jsx

src/components/Activities/Attendance.jsx

@@ -42,13 +42,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
           <>
             <table className="table ">
               <thead>
-                <tr className="border-top-0" style={{ textAlign: 'left' }}>
+                <tr className="border-none" style={{ textAlign: 'left' }}>
-                  <td >
+                  <td style={{ borderBottom: 'none' }}>
                     <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
                   </td>
-                  <td style={{ paddingLeft: '20px' }}>
+                  <td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
-                  </td>
                 </tr>
+
                 <tr>
                   <th className="border-top-0" colSpan={2}>
                     Name

src/components/Activities/AttendcesLogs.jsx

@@ -122,109 +122,112 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
 
   return (
     <>
-      <div
-        className="dataTables_length text-start py-2 d-flex justify-content-between"
-        id="DataTables_Table_0_length"
-      >
-        <div className="col-md-3 my-0 ">
-          <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday}  />
-        </div>
-        <div className="col-md-2 m-0 text-end">
-          <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
-              }`}
-            title="Refresh"
-            onClick={() => setIsRefreshing(true)}
-          />
-        </div>
-      </div>
-      <div className="table-responsive text-nowrap">
-        {data && data.length > 0 && (
-          <table className="table mb-0">
-            <thead>
-              <tr>
-                <th className="border-top-1" colSpan={2}>
-                  Name
-                </th>
-                <th className="border-top-1">Date</th>
-                <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                </th>
-                <th>
-                  <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
-                </th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {(loading || isRefreshing) && (
-                <tr>
-                  <td colSpan={6}>Loading...</td>
-                </tr>
-              )}
-              {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
-                const previousAttendance = arr[index - 1];
-                const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
       
-                if (!previousDate || currentDate !== previousDate) {
+        <div
+          className="dataTables_length text-start py-2 d-flex justify-content-between"
+          id="DataTables_Table_0_length"
+        >
+          <div className="col-md-3 my-0 ">
+            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
+          </div>
+          <div className="col-md-2 m-0 text-end">
+            <i
+              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+                }`}
+              title="Refresh"
+              onClick={() => setIsRefreshing(true)}
+            />
+          </div>
+        </div>
+        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
+          {data && data.length > 0 && (
+            <table className="table mb-0">
+              <thead>
+                <tr>
+                  <th className="border-top-1" colSpan={2}>
+                    Name
+                  </th>
+                  <th className="border-top-1">Date</th>
+                  <th>
+                    <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
+                  </th>
+                  <th>
+                    <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
+                  </th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(loading || isRefreshing) && (
+                  <tr>
+                    <td colSpan={6}>Loading...</td>
+                  </tr>
+                )}
+                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                  const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
+                  const previousAttendance = arr[index - 1];
+                  const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+
+                  if (!previousDate || currentDate !== previousDate) {
+                    acc.push(
+                      <tr key={`header-${currentDate}`} className="table-row-header">
+                        <td colSpan={6} className="text-start">
+                          <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                        </td>
+                      </tr>
+                    );
+                  }
                   acc.push(
-                    <tr key={`header-${currentDate}`} className="table-row-header">
+                    <tr key={index}>
-                      <td colSpan={6} className="text-start">
+                      <td colSpan={2}>
-                        <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                        <div className="d-flex justify-content-start align-items-center">
+                          <Avatar
+                            firstName={attendance.firstName}
+                            lastName={attendance.lastName}
+                          />
+                          <div className="d-flex flex-column">
+                            <a
+                              href="#"
+                              className="text-heading text-truncate"
+                            >
+                              <span className="fw-normal">
+                                {attendance.firstName} {attendance.lastName}
+                              </span>
+                            </a>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                      </td>
+                      <td>{convertShortTime(attendance.checkInTime)}</td>
+                      <td>
+                        {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                      </td>
+                      <td className="text-center">
+                        <RenderAttendanceStatus
+                          attendanceData={attendance}
+                          handleModalData={handleModalData}
+                          Tab={2}
+                          currentDate={today.toLocaleDateString("en-CA")}
+                        />
                       </td>
                     </tr>
                   );
-                }
+                  return acc;
-                acc.push(
+                }, [])}
-                  <tr key={index}>
+              </tbody>
-                    <td colSpan={2}>
+            </table>
-                      <div className="d-flex justify-content-start align-items-center">
+
-                        <Avatar
+
-                          firstName={attendance.firstName}
+          )}
-                          lastName={attendance.lastName}
+          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-                        />
+          {error && !loading && !isRefreshing && (
-                        <div className="d-flex flex-column">
+            <tr>
-                          <a
+              <td colSpan={6}>{error}</td>
-                            href="#"
+            </tr>
-                            className="text-heading text-truncate"
+          )}
-                          >
+        </div>
-                            <span className="fw-normal">
-                              {attendance.firstName} {attendance.lastName}
-                            </span>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td>
-                      {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
-                    </td>
-                    <td>{convertShortTime(attendance.checkInTime)}</td>
-                    <td>
-                      {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
-                    </td>
-                    <td className="text-center">
-                      <RenderAttendanceStatus
-                        attendanceData={attendance}
-                        handleModalData={handleModalData}
-                        Tab={2}
-                        currentDate={today.toLocaleDateString("en-CA")}
-                      />
-                    </td>
-                  </tr>
-                );
-                return acc;
-              }, [])}
-            </tbody>
-          </table>
-        )}
-        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-        {error && !loading && !isRefreshing && (
-          <tr>
-            <td colSpan={6}>{error}</td>
-          </tr>
-        )}
-      </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">

src/components/Activities/Regularization.jsx

@@ -31,7 +31,7 @@ const Regularization = ({ handleRequest }) => {
   );
 
   return (
-    <div className="table-responsive text-nowrap">
+    <div className="table-responsive text-nowrap" style={{minHeight:"300px"}}>
       <table className="table mb-0">
         <thead>
           <tr>
@@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
           </tr>
         </thead>
         <tbody>
-          {loading && <td colSpan={5}>Loading...</td>}
+          {loading && <td colSpan={6} className="text-center py-5">Loading...</td>}
 
           {!loading &&
             (regularizes?.length > 0 ? (
@@ -88,12 +88,17 @@ const Regularization = ({ handleRequest }) => {
               ))
             ) : (
               <tr>
-                <td colSpan={5}>No Record Found</td>
+                <td colSpan={6}
+                  className="text-center" style={{
+                    height: "200px",
+                    verticalAlign: "middle",
+                    borderBottom: "none",
+                  }}>No Record Found</td>
               </tr>
             ))}
         </tbody>
       </table>
-      {!loading && (
+      {!loading >10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
@@ -107,9 +112,8 @@ const Regularization = ({ handleRequest }) => {
             {[...Array(totalPages)].map((_, index) => (
               <li
                 key={index}
-                className={`page-item ${
+                className={`page-item ${currentPage === index + 1 ? "active" : ""
-                  currentPage === index + 1 ? "active" : ""
+                  }`}
-                }`}
               >
                 <button
                   className="page-link "
@@ -120,9 +124,8 @@ const Regularization = ({ handleRequest }) => {
               </li>
             ))}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
+                }`}
-              }`}
             >
               <button
                 className="page-link "

src/components/Project/Infrastructure/TaskModel.jsx

@@ -86,7 +86,7 @@ const TaskModel = ({
       ...prev,
       floorId: value,
       workAreaId: 0,
-      activityID: 0,
+      activityID: "",
       workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
     }));
   };
@@ -291,7 +291,7 @@ const TaskModel = ({
                     {...register("activityID")}
                     onChange={handleActivityChange}
                   >
-                    <option value="0">Select Activity</option>
+                    <option value="">Select Activity</option>
                     {activityData &&
                       activityData.length > 0 &&
                       activityData

src/components/common/DateRangePicker.jsx

@@ -1,21 +1,27 @@
 import React, { useEffect, useRef } from "react";
 
-const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
+const DateRangePicker = ({
+  onRangeChange,
+  DateDifference = 7,
+  endDateMode = "yesterday", // "today" or "yesterday"
+}) => {
   const inputRef = useRef(null);
 
   useEffect(() => {
-    const today = new Date();;
+    const endDate = new Date();
-    today.setDate(today.getDate() - 1);
+    if (endDateMode === "yesterday") {
-    const fifteenDaysAgo = new Date();
+      endDate.setDate(endDate.getDate() - 1);
+    }
 
-    fifteenDaysAgo.setDate(today.getDate() - DateDifference);
+    const startDate = new Date();
+    startDate.setDate(endDate.getDate() - DateDifference);
 
     const fp = flatpickr(inputRef.current, {
       mode: "range",
-      dateFormat: "Y-m-d",           // Format for backend (actual input value)
+      dateFormat: "Y-m-d",
-      altInput: true,                // Enables a visually different field
+      altInput: true,
       altFormat: "d-m-Y",
-      defaultDate: [fifteenDaysAgo, today],
+      defaultDate: [startDate, endDate],
       static: true,
       clickOpens: true,
       onChange: (selectedDates, dateStr) => {
@@ -25,16 +31,14 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
     });
 
     onRangeChange?.({
-      // startDate: fifteenDaysAgo.toISOString().split("T")[0],
+      startDate: startDate.toLocaleDateString("en-CA"),
-      // endDate: today.toISOString().split("T")[0],
+      endDate: endDate.toLocaleDateString("en-CA"),
-      startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
-      endDate: today.toLocaleDateString("en-CA"),
     });
 
     return () => {
       fp.destroy();
     };
-  }, [onRangeChange]);
+  }, [onRangeChange, DateDifference, endDateMode]);
 
   return (
     <input

src/pages/Activities/DailyTask.jsx

@@ -176,6 +176,7 @@ const DailyTask = () => {
               <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"
                 />

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,70 +107,100 @@ const LoginPage = () => {
             </div>
           )}
         </div>
-       <div className="mb-3 ">
+
-          <label className="form-label" htmlFor="password">Password</label>
+        {!IsLoginWithOTP && (
-          <div className="input-group input-group-merge  d-flex align-items-center border rounded px-2">
+          <>
-            <input
+            <div className="mb-3 form-password-toggle">
-              type={hidepass ? "password" : "text"}
+              <label className="form-label" htmlFor="password">
-              id="password"
+                Password
-              autoComplete="true"
+              </label>
-              className="form-control border-0 shadow-none"
+              <div className="input-group input-group-merge">
-              {...register("password")}
+                <input
-              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                  type={hidepass ? "password" : "text"}
-              style={{ flex: 1 }}
+                  autoComplete="true"
-              aria-describedby="password"
+                  id="password"
-            />
+                  {...register("password")}
-            <button
+                  className="form-control"
-              type="button"
+                  placeholder="••••••••••••"
-              className="btn btn-link p-0 ms-2"
+                />
-              style={{ fontSize: "18px", color: "#6c757d", }}
+                <button
-              onClick={() => setHidepass(!hidepass)}
+                  type="button"
-            >
+                  className="btn border-top border-end border-bottom"
-              <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
+                  onClick={() => setHidepass(!hidepass)}
-            </button>
+                  style={{
-          </div>
+                    borderTopLeftRadius: 0,
-          {errors.password && (
+                    borderBottomLeftRadius: 0,
-            <p className="danger-text small-text text-start">{errors.password.message}</p>
+                    borderLeft: 0,
-          )}
+                  }}
-        </div>
+                >
-        <div className="mb-3 d-flex justify-content-between">
+                  {hidepass ? (
-          <div className="form-check d-flex">
+                    <i className="bx bx-hide" />
-            <input
+                  ) : (
-              className="form-check-input"
+                    <i className="bx bx-show" />
-              type="checkbox"
+                  )}
-              id="remember-me"
+                </button>
-              name="rememberMe"
+              </div>
-              {...register("rememberMe")}
+              {errors.password && (
-            />
+                <div
-            <label className="form-check-label ms-2">Remember Me</label>
+                  className="danger-text text-start"
-          </div>
+                  style={{ fontSize: "12px" }}
-          <Link
+                >
-            aria-label="Go to Forgot Password Page"
+                  {errors.password.message}
-            to="/auth/forgot-password"
+                </div>
-          >
+              )}
-            <span>Forgot Password?</span>
+            </div>
-          </Link>
+
-        </div>
+            <div className="mb-3 d-flex justify-content-between">
+              <div className="form-check d-flex">
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  id="remember-me"
+                  {...register("rememberMe")}
+                />
+                <label className="form-check-label ms-2">Remember Me</label>
+              </div>
+              <Link to="/auth/forgot-password">Forgot Password?</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>
+          <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/pages/employee/AttendancesEmployeeRecords.jsx

@@ -141,7 +141,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           id="DataTables_Table_0_length"
         >
           <div className="col-md-3 my-0 ">
-            <DateRangePicker onRangeChange={setDateRange} />
+            <DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday"/>
           </div>
           <div className="col-md-2 m-0 text-end">
             <i

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"
+