'use client';
import {
BarChart3,
Bookmark,
Bot,
CreditCard,
FileText,
Gem,
Home,
List,
LogOut,
Menu,
MessageSquare,
Moon,
Plus,
Sun,
Target,
User,
X,
type LucideIcon,
} from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { useRouter } from '@/i18n/navigation';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { useTheme } from '@/components/providers/theme-provider';
import { Button } from '@/components/ui/button';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
import { Link } from '@/i18n/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { cn } from '@/lib/utils';
interface NavItem {
href: string;
label: string;
icon: LucideIcon;
}
interface NavGroup {
label: string;
items: NavItem[];
}
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const router = useRouter();
const { user, isAuthenticated, isInitialized, logout } = useAuthStore();
const { theme, toggleTheme } = useTheme();
const t = useTranslations();
const [sidebarOpen, setSidebarOpen] = useState(false);
// Auth guard — redirect unauthenticated users to /login once the auth store
// has finished its cookie→profile probe. Without this, protected queries
// inside the dashboard fire against the API and flood the console with
// 401 ApiErrors before the user even sees the sign-in screen.
useEffect(() => {
if (isInitialized && !isAuthenticated) {
const next = encodeURIComponent(pathname);
router.replace(`/login?next=${next}`);
}
}, [isInitialized, isAuthenticated, pathname, router]);
// While the auth store initialises, OR right after we've decided to redirect,
// render a lightweight skeleton rather than the full dashboard so no queries
// mount and fire.
if (!isInitialized || !isAuthenticated) {
return (