File size: 5,223 Bytes
6282d86 b92ea37 6282d86 8f2286f 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 b92ea37 6282d86 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuth } from '@/lib/auth';
import { useTenant } from '@/lib/tenant';
import {
LayoutDashboard, Building2, Users, Phone, MessageSquare, Contact2,
Activity, CreditCard, Bot, LogOut, ChevronLeft, ScrollText
} from 'lucide-react';
const NAV_ITEMS = [
{ to: '/platform/dashboard', icon: LayoutDashboard, labelKey: 'super_admin.nav_dashboard' },
{ to: '/platform/organizations', icon: Building2, labelKey: 'super_admin.nav_organizations' },
{ to: '/platform/users', icon: Users, labelKey: 'super_admin.nav_users' },
{ to: '/platform/whatsapp', icon: Phone, labelKey: 'super_admin.nav_whatsapp' },
{ to: '/platform/whatsapp/templates', icon: MessageSquare, labelKey: 'super_admin.nav_templates' },
{ to: '/platform/whatsapp/profiles', icon: Contact2, labelKey: 'super_admin.nav_profiles' },
{ to: '/platform/monitoring', icon: Activity, labelKey: 'super_admin.nav_monitoring' },
{ to: '/platform/billing', icon: CreditCard, labelKey: 'super_admin.nav_billing' },
{ to: '/platform/ai', icon: Bot, labelKey: 'super_admin.nav_ai' },
{ to: '/platform/audit-logs', icon: ScrollText, labelKey: 'super_admin.nav_audit_logs' },
];
export default function SuperAdminLayout() {
const { t } = useTranslation();
const { user, logout } = useAuth();
const { setSelectedOrgId } = useTenant();
const navigate = useNavigate();
function handleExit() {
setSelectedOrgId(null);
navigate('/');
}
return (
<div className="flex h-screen bg-slate-950 text-white overflow-hidden">
{/* Sidebar */}
<aside className="w-60 shrink-0 bg-slate-900 border-r border-slate-800 flex flex-col">
<div className="px-4 py-5 border-b border-slate-800">
<div className="text-xs font-semibold text-violet-400 uppercase tracking-widest mb-0.5">XAMLÉ</div>
<div className="text-base font-bold text-white">{t('super_admin.platform_admin')}</div>
</div>
<nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
{NAV_ITEMS.map(({ to, icon: Icon, labelKey }) => (
<NavLink
key={to}
to={to}
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
isActive
? 'bg-violet-600 text-white'
: 'text-slate-400 hover:text-white hover:bg-slate-800'
}`
}
>
<Icon className="w-4 h-4 shrink-0" />
{t(labelKey)}
</NavLink>
))}
</nav>
<div className="p-3 border-t border-slate-800 space-y-1">
<button
onClick={handleExit}
className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
>
<ChevronLeft className="w-4 h-4" />
{t('super_admin.exit_admin')}
</button>
<button
onClick={logout}
className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-red-400 hover:text-red-300 hover:bg-slate-800 transition-colors"
>
<LogOut className="w-4 h-4" />
{t('super_admin.logout')}
</button>
</div>
</aside>
{/* Main */}
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
{/* Top bar */}
<header className="h-14 shrink-0 bg-slate-900 border-b border-slate-800 flex items-center justify-between px-6">
<div className="text-sm text-slate-400">
{t('super_admin.super_admin_label')} · <span className="text-white">{user?.email || user?.name || 'Admin'}</span>
</div>
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
<span className="text-xs text-slate-400">{t('super_admin.system_active')}</span>
</div>
</header>
{/* Page content */}
<main className="flex-1 overflow-y-auto bg-slate-950">
<div className="p-6 max-w-screen-xl mx-auto">
<Outlet />
</div>
</main>
</div>
</div>
);
}
|