import { navSections, type NavItem } from '@/Layouts/Admin/nav-config'; import { getRoleColor, getRoleLabel } from '@/Layouts/Admin/role-config'; import { NotificationBell } from '@/components/admin/NotificationBell'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { useAdminTheme } from '@/hooks/useAdminTheme'; import { cn } from '@/lib/utils'; import type { AdminRole, PageProps } from '@/types'; import { Link, router, usePage } from '@inertiajs/react'; import { AnimatePresence, motion } from 'framer-motion'; import { ChevronDown, ChevronRight, HelpCircle, KeyRound, LogOut, Menu, Moon, Search, Sun, UserCircle, X, } from 'lucide-react'; import { PropsWithChildren, useMemo, useState } from 'react'; // ── Sidebar nav item ────────────────────────────────────────────────────────── function SidebarNavItem({ item, collapsed, permissions, isSuperAdmin, }: { item: NavItem; collapsed: boolean; permissions: string[]; isSuperAdmin: boolean; }) { const { url } = usePage(); const active = url.startsWith(item.href); if ( !isSuperAdmin && item.permission && !permissions.includes(item.permission) ) { return null; } const link = ( {!collapsed && {item.label}} {active && !collapsed && ( )} ); if (!collapsed) return link; return ( {link} {item.label} ); } // ── Layout ──────────────────────────────────────────────────────────────────── export interface BreadcrumbEntry { label: string; href?: string; } interface Props extends PropsWithChildren { title?: string; breadcrumbs?: BreadcrumbEntry[]; } export default function AdminLayout({ children, title, breadcrumbs: breadcrumbsProp, }: Props) { const { auth } = usePage().props; const { url } = usePage(); const permissions = auth.adminPermissions ?? []; const role = auth.adminRole as AdminRole | null; const isSuperAdmin = role === 'super_admin'; // Auto-derive breadcrumbs from nav config unless overridden const breadcrumbs = useMemo(() => { if (breadcrumbsProp) return breadcrumbsProp; for (const section of navSections) { for (const item of section.items) { if (url.startsWith(item.href)) { return [ { label: section.label }, { label: item.label, href: item.href }, ]; } } } return title ? [{ label: title }] : []; }, [breadcrumbsProp, url, title]); const { isDark, toggleTheme } = useAdminTheme(); const [sidebarOpen, setSidebarOpen] = useState(false); const [collapsed, setCollapsed] = useState(false); const [search, setSearch] = useState(''); const handleLogout = () => router.post(route('admin.logout')); const filteredSections = useMemo(() => { const q = search.toLowerCase().trim(); if (!q) return navSections; return navSections .map((s) => ({ ...s, items: s.items.filter((i) => i.label.toLowerCase().includes(q)), })) .filter((s) => s.items.length > 0); }, [search]); const Sidebar = ({ mobile = false }: { mobile?: boolean }) => { const isCollapsed = collapsed && !mobile; return ( ); }; return (
{/* Fixed desktop sidebar */} {/* Mobile sidebar overlay */} {sidebarOpen && ( <> setSidebarOpen(false)} /> )} {/* Main content */}
{breadcrumbs.length > 0 && ( {breadcrumbs.map((crumb, i) => { const isLast = i === breadcrumbs.length - 1; return ( {i > 0 && ( )} {isLast ? ( {crumb.label} ) : ( {crumb.href ? ( { crumb.label } ) : ( { crumb.label } )} )} ); })} )}
{isDark ? 'Switch to light mode' : 'Switch to dark mode'}
{auth.admin?.name?.[0] ?? 'A'}
{auth.admin?.name ?? 'Admin'} {role && ( {getRoleLabel(role)} )}
{children}
 ); }