diff --git a/it0-web-admin/src/presentation/components/layout/top-bar.tsx b/it0-web-admin/src/presentation/components/layout/top-bar.tsx index aaee44c..0f0dcf3 100644 --- a/it0-web-admin/src/presentation/components/layout/top-bar.tsx +++ b/it0-web-admin/src/presentation/components/layout/top-bar.tsx @@ -1,10 +1,53 @@ 'use client'; +import { useState, useEffect, useRef } from 'react'; +import { useRouter } from 'next/navigation'; import { useTenantStore } from '@/stores/zustand/tenant-store'; -import { Search, Bell } from 'lucide-react'; +import { Search, Bell, LogOut, User, Settings } from 'lucide-react'; + +interface StoredUser { + id: string; + email: string; + name: string; + roles: string[]; +} export function TopBar() { + const router = useRouter(); const { currentTenant } = useTenantStore(); + const [menuOpen, setMenuOpen] = useState(false); + const [user, setUser] = useState(null); + const menuRef = useRef(null); + + useEffect(() => { + try { + const raw = localStorage.getItem('user'); + if (raw) setUser(JSON.parse(raw)); + } catch { /* ignore */ } + }, []); + + // Close menu on outside click + useEffect(() => { + function handleClick(e: MouseEvent) { + if (menuRef.current && !menuRef.current.contains(e.target as Node)) { + setMenuOpen(false); + } + } + if (menuOpen) document.addEventListener('mousedown', handleClick); + return () => document.removeEventListener('mousedown', handleClick); + }, [menuOpen]); + + const handleLogout = () => { + localStorage.removeItem('access_token'); + localStorage.removeItem('refresh_token'); + localStorage.removeItem('user'); + localStorage.removeItem('current_tenant'); + router.replace('/login'); + }; + + const initials = user?.name + ? user.name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2) + : 'U'; return (
@@ -37,13 +80,54 @@ export function TopBar() { {/* Tenant indicator */}
Tenant: - {currentTenant?.name || 'Not selected'} + {currentTenant?.name || currentTenant?.id || 'Not selected'}
- {/* User avatar */} - + {/* User avatar + dropdown */} +
+ + + {menuOpen && ( +
+ {/* User info */} +
+

{user?.name || 'User'}

+

{user?.email}

+
+ + {/* Menu items */} + + + +
+ + +
+ )} +
);