feat: implement logout functionality in Layout component and enhance AuthContext with auto-logout feature

frontend/src/components/Layout.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { ThemeToggle } from './ThemeToggle'
 import { Button } from './ui/Button'
+import { useAuth } from '../context/AuthContext'
 
 interface LayoutProps {
   children: ReactNode
@@ -10,6 +11,7 @@ interface LayoutProps {
 export default function Layout({ children }: LayoutProps) {
   const location = useLocation()
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const { logout } = useAuth()
 
   const navigation = [
     { name: 'Dashboard', path: '/', icon: '📊' },
@@ -63,6 +65,17 @@ export default function Layout({ children }: LayoutProps) {
               </Link>
             )
           })}
+
+          <button
+            onClick={() => {
+              setSidebarOpen(false)
+              logout()
+            }}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors text-gray-600 dark:text-gray-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400"
+          >
+            <span className="text-lg">🚪</span>
+            Logout
+          </button>
         </nav>
         <div className="p-4 border-t border-gray-200 dark:border-gray-800">
           <div className="text-xs text-gray-500 dark:text-gray-500">

frontend/src/components/__tests__/Layout.test.tsx

@@ -1,10 +1,17 @@
 import { ReactNode } from 'react'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import Layout from '../Layout'
 import { ThemeProvider } from '../../context/ThemeContext'
 
+// Mock AuthContext
+vi.mock('../../context/AuthContext', () => ({
+  useAuth: () => ({
+    logout: vi.fn(),
+  }),
+}))
+
 const renderWithProviders = (children: ReactNode) => {
   return render(
     <BrowserRouter>