'use client'; import React, { useEffect, useRef, useState } from 'react'; import { useRouter, usePathname } from 'next/navigation'; import { fetchMe, isAuthenticated } from '@/lib/auth'; import SettingsModal from '@/components/SettingsModal'; import { useIsMobile } from '@/lib/useIsMobile'; import { useTranslation } from '@/lib/i18n'; import type { TranslationKey } from '@/lib/i18n/messages/en'; import { adminNavItemIsActive } from '@/lib/admin-nav'; // Admin access is controlled by the ADMIN_EMAILS env var on the backend. // The layout fetches /api/auth/me to get the server-authoritative `is_admin` flag, // preventing any client-side bypass. // ─── Logo (same as AppHeader) ───────────────────────────────────── function InvestibookLogo({ size = 26 }: { size?: number }) { return ( ); } // ─── User Dropdown ──────────────────────────────────────────────── function UserDropdown({ email, onSettings, onLogout, }: { email: string; onSettings: () => void; onLogout: () => void; }) { const { t } = useTranslation(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const close = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; document.addEventListener('mousedown', close); return () => document.removeEventListener('mousedown', close); }, [open]); return (
{open && (
{t('adminLayout.signedInAsLabel')}
{email}
{[ { key: 'settings', label: t('adminLayout.settingsNav'), onClick: () => { setOpen(false); onSettings(); } }, { key: 'signout', label: t('adminLayout.signOutNav'), onClick: () => { setOpen(false); onLogout(); } }, ].map((item) => ( ))}
)}
); } // ─── Sidebar nav items ──────────────────────────────────────────── interface NavItem { label: string; href: string; icon: string; description: string; } function getNavItems( t: (key: TranslationKey, vars?: Record) => string, ): NavItem[] { return [ { label: t('adminLayout.navIncidents'), href: '/admin/incidents', icon: '🗂️', description: t('adminLayout.navIncidentsDesc'), }, { label: t('adminLayout.navWeeklyReport'), href: '/admin/weekly-report', icon: '📝', description: t('adminLayout.navWeeklyReportDesc'), }, { label: t('adminLayout.navEvaluations'), href: '/admin/evaluations', icon: '🎯', description: t('adminLayout.navEvaluationsDesc'), }, { label: t('adminLayout.navStats'), href: '/admin/stats', icon: '📊', description: t('adminLayout.navStatsDesc'), }, { label: t('adminLayout.navClinic'), href: '/admin/clinic-state', icon: '🏥', description: t('adminLayout.navClinicDesc'), }, { label: t('adminLayout.navTriagePilot'), href: '/admin/triagepilot', icon: '🧭', description: t('adminLayout.navTriagePilotDesc'), }, { label: t('adminLayout.navUsers'), href: '/admin/user', icon: '👤', description: t('adminLayout.navUsersDesc'), }, ]; } // ─── Admin Layout ───────────────────────────────────────────────── export default function AdminLayout({ children }: { children: React.ReactNode }) { const router = useRouter(); const { t } = useTranslation(); const pathname = usePathname(); const isMobile = useIsMobile(); const [email, setEmail] = useState(null); const [showSettings, setShowSettings] = useState(false); const NAV_ITEMS = getNavItems(t); const isWeeklyReportDevPreview = process.env.NODE_ENV === 'development' && pathname?.startsWith('/admin/weekly-report'); useEffect(() => { if (isWeeklyReportDevPreview) { setEmail('local-preview@investibook.dev'); return; } setEmail(null); if (!isAuthenticated()) { router.replace(`/login?redirect=${encodeURIComponent(window.location.pathname)}`); return; } fetchMe() .then((me) => { if (!me.is_admin) { router.replace('/'); return; } setEmail(me.email); }) .catch(() => router.replace('/')); }, [router, isWeeklyReportDevPreview]); function handleLogout() { localStorage.removeItem('investibook_token'); localStorage.removeItem('investibook_email'); router.push('/login'); } if (!email) return null; return (
{/* ── Top header ── */}
{/* Left: logo + brand + admin badge */}
/ {t('adminLayout.adminBadgeLabel')}
{/* Right: nav back link + user avatar */}
{!isMobile && ( )} {!isMobile &&
} setShowSettings(true)} onLogout={handleLogout} />
{/* ── Mobile: horizontal tab nav ── */} {isMobile && ( )} {/* ── Body (sidebar + content) ── */}
{/* ── Left sidebar (desktop only) ── */} {!isMobile && ( )} {/* ── Main content area ── */}
{children}
{showSettings && setShowSettings(false)} />}
); }