import { PropsWithChildren, useState } from 'react'; import { Head, Link, usePage } from '@inertiajs/react'; import { toast } from 'sonner'; import { Toaster } from '@/components/ui/sonner'; import { TooltipProvider } from '@/components/ui/tooltip'; import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { AppSidebar } from '@/components/Sidebar/AppSidebar'; import { ThemeToggle } from '@/components/ThemeToggle'; import { LanguageSelector } from '@/components/LanguageSelector'; import { NotificationBell } from '@/components/Notifications/NotificationBell'; import { GlobalCredits } from '@/components/Header/GlobalCredits'; import { useNotifications } from '@/hooks/useNotifications'; import { useUserChannel } from '@/hooks/useUserChannel'; import { User, PageProps } from '@/types'; import type { UserCredits, UserNotification } from '@/types/notifications'; import type { BroadcastConfig } from '@/hooks/useBuilderPusher'; import { LogOut } from 'lucide-react'; import { AdminDemoBanner } from '@/Layouts/AdminDemoBanner'; import { DemoResetNotice } from '@/components/DemoResetNotice'; interface AdminLayoutProps extends PropsWithChildren { user: User; title: string; } export default function AdminLayout({ user, title, children }: AdminLayoutProps) { const { broadcastConfig, userCredits, unreadNotificationCount } = usePage().props; // Notification state const { notifications, unreadCount, isLoading: isLoadingNotifications, addNotification, markAsRead, markAllAsRead, } = useNotifications(unreadNotificationCount); // Credits state const [credits, setCredits] = useState(userCredits); // Subscribe to user channel for real-time updates useUserChannel({ userId: user.id, broadcastConfig, enabled: !!broadcastConfig?.key, onNotification: (notification: UserNotification) => { addNotification(notification); // Show toast for important notifications if (notification.type === 'credits_low') { toast(notification.title, { description: notification.message, }); } }, onCreditsUpdated: (updated) => { setCredits({ remaining: updated.remaining, monthlyLimit: updated.monthlyLimit, isUnlimited: updated.isUnlimited, usingOwnKey: updated.usingOwnKey, }); }, }); return ( <>
{/* Header */}
{credits && }
{/* User Profile */}

{user.name}

{user.email}

{user.name.charAt(0).toUpperCase()}

{user.name}

{user.email}

Log out
{user.role === 'admin' && } {/* Main Content */}
{children}
); }