feat(auth): Implemented Session Persistence

apps/web/src/features/auth/Login.tsx

@@ -22,6 +22,7 @@ type LocationState = {
   from?: {
     pathname: string;
   };
+  message?: string;
 };
 
 const Login: React.FC = () => {
@@ -29,6 +30,7 @@ const Login: React.FC = () => {
   const [password, setPassword] = useState("");
   const [emailError, setEmailError] = useState("");
   const [passwordError, setPasswordError] = useState("");
+  const [sessionMessage, setSessionMessage] = useState<string | null>(null);
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useDispatch<AppDispatch>();
@@ -87,6 +89,18 @@ const Login: React.FC = () => {
     navigate(from ?? dashboardPath, { replace: true });
   }, [isAuthenticated, user?.userRole, navigate, location.state]);
 
+  // Check for session expiration message from redirect
+  useEffect(() => {
+    const state = location.state as LocationState | null;
+    if (state?.message) {
+      // Auto-clear session message after 5 seconds
+      const timer = setTimeout(() => setSessionMessage(null), 5000);
+      // Use a microtask to avoid cascading renders
+      Promise.resolve().then(() => setSessionMessage(state.message || null));
+      return () => clearTimeout(timer);
+    }
+  }, [location.state]);
+
   // Clear error message when component unmounts
   useEffect(() => {
     return () => {
@@ -169,6 +183,13 @@ const Login: React.FC = () => {
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-6">
+            {sessionMessage && (
+              <div className="flex items-center p-4 text-sm text-blue-700 bg-blue-50 border border-blue-200 rounded-xl transition-all animate-in fade-in slide-in-from-top-2">
+                <AlertCircle className="w-4 h-4 mr-2 shrink-0" />
+                <span>{sessionMessage}</span>
+              </div>
+            )}
+
             {reduxError && (
               <div className="flex items-center p-4 text-sm text-destructive-foreground bg-destructive/70 border border-destructive/20 rounded-xl transition-all animate-in fade-in slide-in-from-top-2">
                 <AlertCircle className="w-4 h-4 mr-2 shrink-0" />

apps/web/src/features/dashboard/RoleDashboardRedirect.tsx

@@ -0,0 +1,27 @@
+import React, {useEffect} from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { getDashboardPath } from '../../services/firestoreService'
+import type { RootState } from '../../store/store';
+/**
+ * RoleDashboardRedirect Component
+ * Dynamically redirects users to their appropriate dashboard based on their role
+ */
+export const RoleDashboardRedirect: React.FC = () => {
+  const { isAuthenticated, user } = useSelector((state: RootState) => state.auth);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate('/login', { replace: true });
+      return;
+    }
+
+    if (user?.userRole) {
+      const dashboardPath = getDashboardPath(user.userRole);
+      navigate(dashboardPath, { replace: true });
+    }
+  }, [isAuthenticated, user?.userRole, navigate]);
+
+  return null;
+};

apps/web/src/features/layouts/AppLayout.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react';
 import Sidebar from './Sidebar';
 import { getDashboardPath } from '../../services/firestoreService';
+import { useSessionPersistence } from '../../hooks/useSessionPersistence';
 
 /**
  * Main Application Layout for Authenticated Users.
@@ -17,6 +18,9 @@ import { getDashboardPath } from '../../services/firestoreService';
  * Handles role-based navigation rendering and validates user access to dashboard routes.
  */
 const AppLayout: React.FC = () => {
+    // Initialize session persistence and token refresh
+    useSessionPersistence();
+
     // Typed selectors
     const { isAuthenticated, user } = useSelector((state: RootState) => state.auth);
     const dispatch = useDispatch<AppDispatch>();
@@ -47,7 +51,10 @@ const AppLayout: React.FC = () => {
     }
 
     const handleLogout = () => {
-        dispatch(logoutUser());
+        dispatch(logoutUser()).then(() => {
+            // Navigate to login page after logout is complete
+            navigate('/login', { replace: true });
+        });
     };
 
     return (

apps/web/src/features/layouts/DashboardLayout.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PageHeader from '../../common/components/PageHeader';
+import { motion } from 'framer-motion';
+
+interface DashboardLayoutProps {
+    title: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    maxWidth?: string;
+    backAction?: React.ReactNode;
+}
+
+const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+    title,
+    subtitle,
+    actions,
+    children,
+    maxWidth = 'max-w-7xl',
+    backAction
+}) => {
+    return (
+        <div className="p-4 md:p-8">
+            <div className={`${maxWidth} mx-auto`}>
+                {backAction && (
+                    <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+                        className="mb-4"
+                    >
+                        {backAction}
+                    </motion.div>
+                )}
+
+                <PageHeader
+                    title={title}
+                    subtitle={subtitle}
+                    actions={actions}
+                />
+
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default DashboardLayout;

apps/web/src/features/layouts/PublicLayout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface PublicLayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Layout for public, unauthenticated pages (e.g. Login, Forgot Password).
+ * Provides a centered container with a gradient background.
+ */
+const PublicLayout: React.FC<PublicLayoutProps> = ({ children }) => {
+  return (
+    <div className="min-h-screen w-full bg-slate-50 flex items-center justify-center">
+      {/* Background decoration */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 -z-10" />
+      <div className="w-full">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default PublicLayout;

apps/web/src/features/layouts/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { LogOut, Menu, X } from 'lucide-react';
 import { Button } from '../../common/components/ui/button';
 import { NAV_CONFIG } from "../../common/config/navigation";
@@ -22,6 +22,19 @@ const Sidebar: React.FC<SidebarProps> = ({
     onLogout
 }) => {
     const location = useLocation();
+    const navigate = useNavigate();
+
+    /**
+     * Handle logout with navigation
+     * Ensures user is redirected to login page after logout
+     */
+    const handleLogoutClick = async () => {
+        onLogout();
+        // Small delay to allow logout to complete before navigation
+        setTimeout(() => {
+            navigate('/login', { replace: true });
+        }, 100);
+    };
 
     // Filter navigation based on user role
     const filteredNav = useMemo(() => {
@@ -107,7 +120,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                     <Button
                         variant="ghost"
                         size="icon"
-                        onClick={onLogout}
+                        onClick={handleLogoutClick}
                         title="Logout"
                         className="text-secondary-text hover:text-destructive hover:bg-destructive/10"
                     >