automatic user logout after inactivity. Dafault to 7 mins

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:[