diff --git a/src/layouts/DashboardLayout/Aside.tsx b/src/layouts/DashboardLayout/Aside.tsx index c868860..2b964a9 100644 --- a/src/layouts/DashboardLayout/Aside.tsx +++ b/src/layouts/DashboardLayout/Aside.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Link, useLocation } from 'react-router-dom'; import Logo from '../../assets/icons/logo.svg'; import { Icons } from '../../components'; @@ -27,6 +27,37 @@ export default function Aside({ asideDisplay, logoutUser }: Props) { } }; + // 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 (