automatic user logout after inactivity. Dafault to 7 mins

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -152,12 +152,12 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
         >
           {(data:any)=>(
             <div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
-              <table className="w-full table-auto">
+              <table className="text-[12px] sm:text-base w-full table-auto">
                 <thead>
                   <tr className='text-left border-b-2'>
                     <th className='px-1 py-4'>Date</th>
                     <th className='px-1 py-4 text-right'>Amount</th>
-                    <th className='px-1 py-4 text-center'>Payment Term</th>
+                    <th className='px-1 py-4 text-center min-w-[110px]'>Payment Term</th>
                     <th className='px-1 py-4 text-center'>Status</th>
                     <th className='px-1 py-4'>Action</th>
                   </tr>

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,42 +1,42 @@
-import React from 'react';
-import * as Yup from 'yup';
-import { Form, Formik } from 'formik';
-import { InputCompOne } from '..';
-import { useNavigate } from 'react-router-dom';
-import { RouteHandler } from '../../router/routes';
+import React from "react";
+import * as Yup from "yup";
+import { Form, Formik } from "formik";
+import { InputCompOne } from "..";
+import {useNavigate} from 'react-router-dom'
+import { RouteHandler } from "../../router/routes";
 
-import { useDispatch } from 'react-redux';
-import { updateUserDetails } from '../../store/UserDetails';
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../store/UserDetails";
 
-import { validateBVN, verifyOTP } from '../../core/apiRequest';
-import { RequestStatus } from '../../core/models';
+import { validateBVN, verifyOTP } from "../../core/apiRequest";
+import { RequestStatus } from "../../core/models";
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
   bvn: Yup.string()
-    .required('BVN is required')
-    .test('no-e', 'Invalid number', (value: any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
-      }
-      return true;
-    })
-    .min(11, 'must be 11 digits')
-    .max(11, 'must be 11 digits'),
+  .required("BVN is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(11, "must be 11 digits")
+  .max(11, "must be 11 digits"),
   otp: Yup.string()
-    // .when('require_otp', {
-    //   is: true,
-    //   then: Yup.string().required("OTP is required")
-    // })
-    // .required("OTP is required")
-    .test('no-e', 'Invalid number', (value: any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
-      }
-      return true;
-    })
-    .min(5, 'must be 5 digits')
-    .max(5, 'must be 5 digits'),
+  // .when('require_otp', {
+  //   is: true,
+  //   then: Yup.string().required("OTP is required")
+  // })
+  // .required("OTP is required")
+  .test("no-e", "Invalid number", (value:any) => {
+    if (value && /^[0-9]*$/.test(value) == false) {
+      return false;
+    }
+    return true;
+  })
+  .min(5, "must be 5 digits")
+  .max(5, "must be 5 digits"),
   // .test("no-e", "must be 11 characters", (value:any) => {
   //   if (value.length < 11) {
   //     return false;
@@ -52,207 +52,151 @@ let initialValues = {
 };
 
 type ValidBVN = {
-  verification_id: string;
-  valid: undefined | boolean;
-};
+  verification_id:string
+  valid: undefined | boolean
+}
 
 const LetsGetStarted: React.FC = () => {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
   // const [pinValues, setPinValues] = React.useState({
   //   bvn: "",
   //   otp: "",
   // });
   // const otpInputRef = React.useRef<HTMLInputElement>(null);
 
-  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>(
-    { loading: false, status: undefined, message: '' }
-  );
+  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
 
-  const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>(
-    { loading: false, status: undefined, message: '' }
-  );
+  const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
 
   const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
     verification_id: '',
-    valid: undefined,
+    valid: undefined
   });
 
+
   // e: React.FormEvent<HTMLInputElement>
   // let { value } = e.target as HTMLInputElement;
-  const bvnValidation = (values: any) => {
-    // Function to Validate BVN
-    let bvn = values.bvn;
-    setRequestStatusBVN({ loading: true, status: false, message: '' });
-    validateBVN({ bvn })
-      .then((res) => {
-        if (!res || !res.data.call_return) {
-          setBvnIsValid({ verification_id: '', valid: false });
-          setRequestStatusBVN({
-            loading: false,
-            status: false,
-            message: 'unable to verify BVN',
-          });
-          return setTimeout(() => {
-            setRequestStatusBVN({ loading: false, status: false, message: '' });
-          }, 4000);
-        }
-        setBvnIsValid({
-          verification_id: res.data.verification_id,
-          valid: true,
-        });
-        setRequestStatusBVN({
-          loading: false,
-          status: true,
-          message: 'verified',
-        });
-      })
-      .catch((err) => {
-        setBvnIsValid({ verification_id: '', valid: false });
-        console.log(err);
-      });
+  const bvnValidation = (values:any) => {   // Function to Validate BVN
+    let bvn = values.bvn
+    setRequestStatusBVN({loading:true, status:false, message:''})
+    validateBVN({bvn}).then(res => {
+      if(!res || !res.data.call_return){
+        setBvnIsValid({verification_id:'', valid: false})
+        setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
+        return setTimeout(()=>{
+          setRequestStatusBVN({loading:false, status:false, message:''})
+        }, 4000)
+      }
+      setBvnIsValid({verification_id:res.data.verification_id, valid: true})
+      setRequestStatusBVN({loading:false, status:true, message:'verified'})
+    }).catch(err => {
+      setBvnIsValid({verification_id:'', valid: false})
+      console.log(err)
+    })
   };
 
-  const handleSubmit = (values: any) => {
-    // Function to VERIFY OTP AND LOGIN USER
-    setRequestStatusOTP({ loading: true, status: false, message: '' });
+  const handleSubmit = (values:any) => {  // Function to VERIFY OTP AND LOGIN USER
+    setRequestStatusOTP({loading:true, status:false, message:''})
     // console.log('values', values)
-    verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
-      .then((res) => {
-        if (!res || !res.data.call_return) {
-          setRequestStatusOTP({
-            loading: false,
-            status: false,
-            message: 'wrong otp',
-          });
-          return setTimeout(() => {
-            setRequestStatusOTP({ loading: false, status: false, message: '' });
-          }, 4000);
-        }
-        // console.log(res.data)
-        localStorage.setItem('token', res.data?.token);
-        localStorage.setItem('uid', res?.data?.customer[0]?.uid);
-        dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
-        navigate(RouteHandler.dashboardHome, { replace: true });
-      })
-      .catch((err) => {
-        setRequestStatusOTP({
-          loading: false,
-          status: false,
-          message: 'something went wrong, try again',
-        });
-        console.log(err);
-        return setTimeout(() => {
-          setRequestStatusOTP({ loading: false, status: false, message: '' });
-        }, 4000);
-      });
+    verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
+      if(!res || !res.data.call_return){
+        setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
+        return setTimeout(()=>{
+          setRequestStatusOTP({loading:false, status:false, message:''})
+        },4000)
+      }
+      // console.log(res.data)
+      localStorage.setItem('token', res.data?.token)
+      localStorage.setItem('uid', res?.data?.customer[0]?.uid)
+      dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
+      navigate(RouteHandler.dashboardHome, {replace:true})
+    }).catch(err => {
+      setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'})
+      console.log(err)
+      return setTimeout(()=>{
+        setRequestStatusOTP({loading:false, status:false, message:''})
+      },4000)
+    })
   };
 
   return (
     <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
     >
-      {(props: any) => (
-        <Form className="">
-          <div className="w-full">
-            <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
-              <div className="my-[4rem] flex items-center justify-center w-full">
-                <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
-                  Let’s Get You Started
-                </h1>
+    {(props:any) => (
+      <Form className="">
+        <div className="w-full">
+          <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+            <div className="my-[4rem] flex items-center justify-center w-full">
+              <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+                Let’s Get You Started
+              </h1>
+            </div>
+            <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+              <div className='w-full'>
+                <InputCompOne
+                  parentClass="flex flex-col gap-2"
+                  label="Enter Your BVN "
+                  name="bvn"
+                  parentInputClass="w-full"
+                  labelSpan="( To get your BVN, dial *565*0# )"
+                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                  placeholder="Enter your BVN"
+                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                  input
+                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                  value={props.values.bvn}
+                  onChange={props.handleChange}
+                  error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
+                />
+                <p className={`p-2 ${!requestStatusBVN.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusBVN.loading ? 'verifying...' : requestStatusBVN.message}</p>
               </div>
-              <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-                <div className="w-full">
-                  <InputCompOne
-                    parentClass="flex flex-col gap-2"
-                    label="Enter Your BVN "
-                    name="bvn"
-                    parentInputClass="w-full"
-                    labelSpan="( To get your BVN, dial *565*0# )"
-                    labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-                    placeholder="Enter your BVN"
-                    labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-                    input
-                    inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-                    value={props.values.bvn}
-                    onChange={props.handleChange}
-                    error={
-                      props.errors.bvn && props.touched.bvn && props.errors.bvn
-                    }
-                    maxLength={11}
-                  />
-                  <p
-                    className={`p-2 ${
-                      !requestStatusBVN.status
-                        ? 'text-red-500'
-                        : 'text-emerald-500'
-                    }`}
-                  >
-                    {requestStatusBVN.loading
-                      ? 'verifying...'
-                      : requestStatusBVN.message}
-                  </p>
-                </div>
-                {bvnIsValid.valid && (
-                  <InputCompOne
-                    parentClass="flex flex-col gap-2"
-                    label="Enter OTP "
-                    name="otp"
-                    parentInputClass="w-full"
-                    labelSpan="( Please check your BVN phone number for verification pin )"
-                    labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
-                    placeholder="Enter your OTP"
-                    labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
-                    input
-                    inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
-                    value={props.values.otp}
-                    onChange={props.handleChange}
-                    error={
-                      props.errors.otp && props.touched.otp && props.errors.otp
-                    }
-                    maxLength={5}
-                  />
-                )}
-                <button
-                  type="submit"
-                  className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
-                  disabled={
-                    requestStatusBVN.loading ||
-                    (!props.values.otp && bvnIsValid.valid)
-                  }
-                >
-                  Enter
-                </button>
+              {bvnIsValid.valid && (
+                <InputCompOne
+                  parentClass="flex flex-col gap-2"
+                  label="Enter OTP "
+                  name="otp"
+                  parentInputClass="w-full"
+                  labelSpan="( Please check your BVN phone number for verification pin )"
+                  labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+                  placeholder="Enter your OTP"
+                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+                  input
+                  inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+                  value={props.values.otp}
+                  onChange={props.handleChange}
+                  error={(props.errors.otp && props.touched.otp) && props.errors.otp}
+                />
+              )}
+              <button
+                type='submit'
+                className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+                disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
+              >
+                Enter
+              </button>
+              
+              <p className={`p-2 ${!requestStatusOTP.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusOTP.message}</p>
 
-                <p
-                  className={`p-2 ${
-                    !requestStatusOTP.status
-                      ? 'text-red-500'
-                      : 'text-emerald-500'
-                  }`}
-                >
-                  {requestStatusOTP.message}
+              {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Every personal information attached to your BVN is safe and
+                  secure. It is only important for us to verify your information and
+                  also give you access to your application profile/account.
                 </p>
-
-                {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
-                  <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-                    ***Every personal information attached to your BVN is safe
-                    and secure. It is only important for us to verify your
-                    information and also give you access to your application
-                    profile/account.
-                  </p>
-                ) : (
-                  <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
-                    ***Did not receive OTP? Click to resend
-                  </p>
-                )}
-              </div>
+              ) : (
+                <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+                  ***Did not receive OTP? Click to resend
+                </p>
+              )}
             </div>
           </div>
-        </Form>
-      )}
+        </div>
+      </Form>
+    )}
     </Formik>
   );
 };

src/layouts/DashboardLayout/Aside.tsx

@@ -1,31 +1,62 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import Logo from "../../assets/icons/logo.svg";
-import { Icons } from "../../components";
+import { useState, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import Logo from '../../assets/icons/logo.svg';
+import { Icons } from '../../components';
 
 type Props = {
   asideDisplay?: () => void;
-  logoutUser: () => void
+  logoutUser: () => void;
 };
 
 export default function Aside({ asideDisplay, logoutUser }: Props) {
   const { pathname } = useLocation();
 
   const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
-    { name: "" }
+    { name: '' }
   );
 
   const handleOpenNestedLink = (e: any) => {
     if (!e || !e.target) {
-      return setOpenNestedLink({ name: "" });
+      return setOpenNestedLink({ name: '' });
     }
     if (openNestedLink.name && openNestedLink.name == e.target.name) {
-      setOpenNestedLink({ name: "" });
+      setOpenNestedLink({ name: '' });
     } else {
       setOpenNestedLink({ name: e.target.name });
     }
   };
 
+  // Track user activity
+  useEffect(() => {
+    let timeout: number;
+
+    const resetTimeout = () => {
+      clearTimeout(timeout);
+      timeout = window.setTimeout(() => {
+        // Logout user after 7 minutes of inactivity
+        logoutUser();
+      }, 7 * 60 * 1000); // 7 minutes in milliseconds
+    };
+
+    const handleUserActivity = () => {
+      resetTimeout();
+    };
+
+    // Attach event listeners to track user activity
+    document.addEventListener('mousemove', handleUserActivity);
+    document.addEventListener('keypress', handleUserActivity);
+
+    // Initialize timeout
+    resetTimeout();
+
+    // Clear timeout and remove event listeners on component unmount
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener('mousemove', handleUserActivity);
+      document.removeEventListener('keypress', handleUserActivity);
+    };
+  }, [logoutUser]);
+
   return (
     <div className="py-5 px-10 flex flex-col h-full bg-inherit">
       <Link to="/">
@@ -45,8 +76,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   onClick={(e) => handleOpenNestedLink(e)}
                   className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
                     allNestedLinks.includes(pathname)
-                      ? " text-[#5C2684]"
-                      : " text-[#585858]"
+                      ? ' text-[#5C2684]'
+                      : ' text-[#585858]'
                   }`}
                 >
                   {link.name}
@@ -60,8 +91,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                 <div
                   className={`transition-all duration-300 w-full z-1 ${
                     openNestedLink.name == link.name
-                      ? "relative top-0"
-                      : "absolute -top-[500px]"
+                      ? 'relative top-0'
+                      : 'absolute -top-[500px]'
                   }`}
                 >
                   {link.nestedLink.map((nextLink, index) => (
@@ -70,17 +101,17 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                         asideDisplay && asideDisplay();
                       }}
                       key={index}
-                      to={nextLink.link ? nextLink.link : "#"}
+                      to={nextLink.link ? nextLink.link : '#'}
                       className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
                         pathname == nextLink.link
-                          ? " text-[#5C2684]"
-                          : "text-[#585858]"
+                          ? ' text-[#5C2684]'
+                          : 'text-[#585858]'
                       }`}
                     >
                       <Icons
                         name={nextLink.icon}
                         fillColor={`${
-                          pathname == nextLink.link ? "#5C2684" : "#585858"
+                          pathname == nextLink.link ? '#5C2684' : '#585858'
                         }`}
                       />
                       {nextLink.name}
@@ -96,14 +127,14 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
                   asideDisplay && asideDisplay();
                 }}
                 key={index}
-                to={link.link ? link.link : "#"}
+                to={link.link ? link.link : '#'}
                 className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
-                  pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
+                  pathname == link.link ? 'text-[#5C2684]' : 'text-[#585858]'
                 }`}
               >
                 <Icons
                   name={link.icon}
-                  fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
+                  fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`}
                 />
                 {link.name}
               </Link>
@@ -119,7 +150,6 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
           Log out
         </button>
 
-      
         <div className="flex flex-col gap-[.4375rem] text-[.75rem]">
           <p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
             For more enquiries and support
@@ -131,7 +161,6 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
             Email: fcmbloan@support.com
           </p>
         </div>
-      
       </div>
     </div>
   );
@@ -149,29 +178,34 @@ type AsideLinksType = {
 }[];
 
 const asideLinks: AsideLinksType = [
-  { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
   {
-    name: "Your Profile",
-    link: "/dashboard/profile",
-    icon: "dash-icon",
+    name: 'Dashboard',
+    link: '/dashboard/home',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Employment Details",
-    link: "/dashboard/verification",
-    icon: "dash-icon",
+    name: 'Your Profile',
+    link: '/dashboard/profile',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Reference Details",
-    link: "/dashboard/payments",
-    icon: "dash-icon",
+    name: 'Employment Details',
+    link: '/dashboard/verification',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   {
-    name: "Agreements",
-    link: "/dashboard/legals",
-    icon: "dash-icon",
+    name: 'Reference Details',
+    link: '/dashboard/payments',
+    icon: 'dash-icon',
+    nestedLink: [],
+  },
+  {
+    name: 'Agreements',
+    link: '/dashboard/legals',
+    icon: 'dash-icon',
     nestedLink: [],
   },
   // {name: 'Nested Link', icon: 'home', nestedLink:[

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -83,8 +83,8 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
               </div>
           </div>
         </header>
-        <div className="flex p-5 relative">
-          <div className="w-full p-5">{children}</div>
+        <div className="flex p-2 md:p-5 relative">
+          <div className="w-full p-2 md:p-5">{children}</div>
         </div>
       </main>
     </div>