Luciano Milani
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { useLayoutEffect } from 'react'
|
|
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router'
|
|
import { useLogout } from '@/hooks/useAuth'
|
|
import { useAuthStore } from '@/store/authStore'
|
|
import { queryClient } from '@/lib/queryClient'
|
|
|
|
const nav = [
|
|
{ to: '/app', label: 'Dashboard', end: true },
|
|
{ to: '/app/work-orders', label: 'Ordens de Trabalho' },
|
|
{ to: '/app/clients', label: 'Clientes' },
|
|
{ to: '/app/catalog', label: 'Catálogo' },
|
|
{ to: '/app/staff', label: 'Técnicos' },
|
|
{ to: '/app/expenses', label: 'Despesas' },
|
|
{ to: '/app/invoices', label: 'Faturação' },
|
|
{ to: '/app/settings', label: 'Definições' },
|
|
]
|
|
|
|
export default function AppLayout() {
|
|
const { mutate: logout } = useLogout()
|
|
const { previousSession, restoreSession, user, impersonateTenant } = useAuthStore()
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
|
|
useLayoutEffect(() => {
|
|
const imp = location.state?.impersonation
|
|
if (imp) {
|
|
impersonateTenant(imp.token, imp.user)
|
|
queryClient.clear()
|
|
// Remove impersonation payload from history state so back/forward doesn't re-apply it
|
|
navigate(location.pathname, { replace: true, state: {} })
|
|
}
|
|
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
function handleRestore() {
|
|
restoreSession()
|
|
navigate('/admin')
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen bg-slate-950">
|
|
{previousSession && (
|
|
<div className="flex items-center justify-between px-4 py-2 bg-amber-500 text-amber-950 text-sm font-medium shrink-0">
|
|
<span>
|
|
TechXCar Admin — a gerir: <strong>{user?.name}</strong>
|
|
</span>
|
|
<button
|
|
onClick={handleRestore}
|
|
className="px-3 py-1 rounded bg-amber-950 text-amber-100 hover:bg-amber-900 text-xs font-semibold transition-colors"
|
|
>
|
|
← Voltar ao painel
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<aside className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col">
|
|
<div className="p-4 border-b border-slate-800">
|
|
<h1 className="text-lg font-bold text-white">TechXCar</h1>
|
|
<p className="text-xs text-slate-400 mt-0.5">Gestão de Oficina</p>
|
|
</div>
|
|
<nav className="flex-1 p-3 space-y-1">
|
|
{nav.map(({ to, label, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) =>
|
|
`flex items-center px-3 py-2 rounded-md text-sm transition-colors ${
|
|
isActive
|
|
? 'bg-slate-700 text-white'
|
|
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<div className="p-3 border-t border-slate-800">
|
|
<button
|
|
onClick={() => logout()}
|
|
className="w-full text-left px-3 py-2 text-sm text-slate-400 hover:text-white rounded-md hover:bg-slate-800 transition-colors"
|
|
>
|
|
Terminar sessão
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<main className="flex-1 overflow-auto p-6 text-white">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|