| 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> |
| ); |
| } |
|
|
