Add user/logout section to sidebar footer

Sidebar was missing the account info + sign-out control that every
other app's sidebar has; it showed a static hotel-name label instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-24 15:47:01 +00:00
parent 2114e60fce
commit ae10646d32

View file

@ -1,5 +1,5 @@
import { useState } from 'react'
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu } from 'lucide-react'
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu, LogOut } from 'lucide-react'
import AuthGate, { useAuth } from './components/AuthGate'
import { UpdateBanner } from './components/UpdateBanner'
import { useVersionCheck } from './hooks/useVersionCheck'
@ -27,8 +27,6 @@ function Shell() {
const [page, setPage] = useState<Page>('weekly')
const [menuOpen, setMenuOpen] = useState(false)
const hotelName = import.meta.env.VITE_HOTEL_NAME || 'Hotel'
const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
function selectPage(id: Page) {
@ -36,6 +34,11 @@ function Shell() {
setMenuOpen(false)
}
async function logout() {
await fetch('/wages/api/auth/logout', { method: 'POST', credentials: 'include' })
window.location.reload()
}
return (
<div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
<nav className="sidebar">
@ -55,8 +58,14 @@ function Shell() {
</div>
))}
</div>
<div style={{ padding: '12px 16px', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }}>
{hotelName}
<div className="sidebar-footer">
<div style={{ flex: 1, minWidth: 0 }}>
<div className="sidebar-user-name">{user.name}</div>
<div className="sidebar-user">{user.email}</div>
</div>
<button onClick={logout} className="sidebar-logout" title="Sign out">
<LogOut size={14} strokeWidth={1.75} />
</button>
</div>
</nav>