elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/index.css

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-input-background: var(--input-background);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    /* Brand: #e77d22 warm orange */
+    --background: oklch(0.995 0.002 54.732);
+    --foreground: oklch(0.175 0.012 54.732);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.175 0.012 54.732);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.175 0.012 54.732);
+    --primary: oklch(0.695 0.161 54.732);
+    --primary-foreground: oklch(0.995 0 0);
+    --secondary: oklch(0.955 0.020 54.732);
+    --secondary-foreground: oklch(0.383 0.129 54.732);
+    --muted: oklch(0.965 0.008 54.732);
+    --muted-foreground: oklch(0.500 0.020 54.732);
+    --accent: oklch(0.950 0.024 54.732);
+    --accent-foreground: oklch(0.383 0.129 54.732);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.915 0.010 54.732);
+    --input: oklch(0.880 0.012 54.732);
+    --input-background: oklch(1 0 0);
+    --ring: oklch(0.695 0.161 54.732);
+    --chart-1: oklch(0.695 0.161 54.732);
+    --chart-2: oklch(0.591 0.169 54.732);
+    --chart-3: oklch(0.487 0.153 54.732);
+    --chart-4: oklch(0.820 0.081 54.732);
+    --chart-5: oklch(0.383 0.129 54.732);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0.005 54.732);
+    --sidebar-foreground: oklch(0.175 0.012 54.732);
+    --sidebar-primary: oklch(0.695 0.161 54.732);
+    --sidebar-primary-foreground: oklch(0.995 0 0);
+    --sidebar-accent: oklch(0.950 0.024 54.732);
+    --sidebar-accent-foreground: oklch(0.383 0.129 54.732);
+    --sidebar-border: oklch(0.915 0.010 54.732);
+    --sidebar-ring: oklch(0.695 0.161 54.732);
+}
+
+.dark {
+    --background: oklch(0.145 0.008 54.732);
+    --foreground: oklch(0.965 0.008 54.732);
+    --card: oklch(0.190 0.012 54.732);
+    --card-foreground: oklch(0.965 0.008 54.732);
+    --popover: oklch(0.190 0.012 54.732);
+    --popover-foreground: oklch(0.965 0.008 54.732);
+    --primary: oklch(0.695 0.161 54.732);
+    --primary-foreground: oklch(0.145 0.008 54.732);
+    --secondary: oklch(0.250 0.025 54.732);
+    --secondary-foreground: oklch(0.965 0.008 54.732);
+    --muted: oklch(0.250 0.025 54.732);
+    --muted-foreground: oklch(0.650 0.030 54.732);
+    --accent: oklch(0.280 0.035 54.732);
+    --accent-foreground: oklch(0.965 0.008 54.732);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(0.280 0.020 54.732);
+    --input: oklch(0.320 0.020 54.732);
+    --input-background: oklch(0.210 0.015 54.732);
+    --ring: oklch(0.695 0.161 54.732);
+    --chart-1: oklch(0.695 0.161 54.732);
+    --chart-2: oklch(0.820 0.081 54.732);
+    --chart-3: oklch(0.591 0.169 54.732);
+    --chart-4: oklch(0.487 0.153 54.732);
+    --chart-5: oklch(0.900 0.048 54.732);
+    --sidebar: oklch(0.170 0.012 54.732);
+    --sidebar-foreground: oklch(0.965 0.008 54.732);
+    --sidebar-primary: oklch(0.695 0.161 54.732);
+    --sidebar-primary-foreground: oklch(0.145 0.008 54.732);
+    --sidebar-accent: oklch(0.250 0.025 54.732);
+    --sidebar-accent-foreground: oklch(0.965 0.008 54.732);
+    --sidebar-border: oklch(0.280 0.020 54.732);
+    --sidebar-ring: oklch(0.695 0.161 54.732);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/frontend/src/layouts/admin-layout.tsx

@@ -0,0 +1,111 @@
+import { Navigate, NavLink, Outlet, useNavigate } from "react-router-dom"
+import {
+  Bot,
+  Sparkles,
+  ArrowLeft,
+  ShieldCheck,
+  Globe,
+  type LucideIcon,
+} from "lucide-react"
+
+import { useAuthStore } from "@/stores/auth.store"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface AdminNavItem {
+  icon: LucideIcon
+  label: string
+  to: string
+}
+
+const adminNav: AdminNavItem[] = [
+  { icon: Bot, label: "Agents", to: "/admin/agents" },
+  { icon: Sparkles, label: "AI Playground", to: "/admin/ai-playground" },
+]
+
+export function AdminLayout() {
+  const user = useAuthStore((s) => s.user)
+  const navigate = useNavigate()
+
+  // Guard: only superadmins
+  if (user && user.role !== "superadmin") {
+    return <Navigate to="/" replace />
+  }
+
+  return (
+    <div className="h-[100dvh] flex flex-col bg-background overflow-hidden">
+      {/* Top bar */}
+      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+        <div className="flex items-center justify-between h-14 px-4">
+          {/* Left: brand */}
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shadow-sm">
+                <ShieldCheck className="w-4 h-4 text-primary-foreground" />
+              </div>
+              <div>
+                <p className="text-sm font-semibold tracking-tight leading-none">
+                  Superadmin
+                </p>
+                <p className="text-[10px] text-muted-foreground leading-none mt-0.5">
+                  Platform tools
+                </p>
+              </div>
+            </div>
+
+            {/* Cross-tenant indicator */}
+            <div className="ml-3 hidden sm:flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-2.5 py-1">
+              <Globe className="w-3 h-3 text-muted-foreground" />
+              <span className="text-[10px] font-medium text-muted-foreground">
+                Cross-tenant
+              </span>
+            </div>
+          </div>
+
+          {/* Right: exit panel */}
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8"
+            onClick={() => navigate("/")}
+          >
+            <ArrowLeft className="w-3.5 h-3.5 mr-1.5" />
+            Exit panel
+          </Button>
+        </div>
+      </header>
+
+      {/* Body: sidebar + content */}
+      <div className="flex flex-1 min-h-0">
+        <aside className="hidden md:flex flex-col border-r border-border bg-card shrink-0 w-[200px] h-[calc(100dvh-3.5rem)] sticky top-14">
+          <nav className="flex-1 overflow-y-auto py-3 px-3 space-y-1">
+            {adminNav.map((item) => {
+              const Icon = item.icon
+              return (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  className={({ isActive }) =>
+                    cn(
+                      "w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                      isActive
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    )
+                  }
+                >
+                  <Icon className="w-4 h-4 shrink-0" />
+                  <span className="truncate">{item.label}</span>
+                </NavLink>
+              )
+            })}
+          </nav>
+        </aside>
+
+        <main className="flex-1 min-w-0 p-4 sm:p-6 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

package/frontend/src/layouts/app-header.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import {
+  Heart,
+  Moon,
+  Sun,
+  Menu,
+  LogOut,
+  Settings,
+  Stethoscope,
+} from "lucide-react"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { NotificationDropdown, LanguageSwitcher } from "@/components/shared"
+import { useAuthStore } from "@/stores/auth.store"
+import { useUIStore } from "@/stores/ui.store"
+import type { Notification as NotificationType } from "@/components/shared"
+
+export function AppHeader() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const user = useAuthStore((s) => s.user)
+  const tenant = useAuthStore((s) => s.tenant)
+  const logout = useAuthStore((s) => s.logout)
+  const darkMode = useUIStore((s) => s.darkMode)
+  const toggleDarkMode = useUIStore((s) => s.toggleDarkMode)
+  const toggleSidebar = useUIStore((s) => s.toggleSidebar)
+
+  // TODO: Replace with real notifications from WebSocket
+  const [notifications, setNotifications] = useState<NotificationType[]>([])
+
+  const initials = user
+    ? `${user.firstName?.[0] ?? ""}${user.lastName?.[0] ?? ""}`.toUpperCase()
+    : "?"
+
+  const handleLogout = async () => {
+    await logout()
+    navigate("/login")
+  }
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
+      <div className="flex items-center justify-between h-14 px-3 sm:px-4">
+        {/* Left */}
+        <div className="flex items-center gap-2">
+          {/* Mobile menu toggle */}
+          <Button variant="ghost" size="icon" className="md:hidden" onClick={toggleSidebar}>
+            <Menu className="w-5 h-5" />
+          </Button>
+
+          {/* Logo */}
+          <div className="flex items-center gap-2.5 cursor-pointer" onClick={() => navigate("/")}>
+            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shadow-sm">
+              <Heart className="w-4 h-4 text-primary-foreground" />
+            </div>
+            <div className="hidden sm:block">
+              <p className="text-sm font-semibold tracking-tight leading-none">{tenant?.name || t("common.appName")}</p>
+              <p className="text-[10px] text-muted-foreground leading-none mt-0.5">{t("common.tagline")}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Right */}
+        <div className="flex items-center gap-1.5 sm:gap-2">
+          <LanguageSwitcher />
+
+          <Button variant="ghost" size="icon" onClick={toggleDarkMode}>
+            {darkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          </Button>
+
+          <NotificationDropdown
+            notifications={notifications}
+            onMarkRead={(id) => setNotifications(notifications.map((n) => n.id === id ? { ...n, read: true } : n))}
+            onMarkAllRead={() => setNotifications(notifications.map((n) => ({ ...n, read: true })))}
+            onClear={() => setNotifications([])}
+          />
+
+          <Separator orientation="vertical" className="h-6 mx-1 hidden sm:block" />
+
+          {/* User dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted cursor-pointer transition-colors">
+              <Avatar className="w-7 h-7">
+                <AvatarFallback className="bg-primary text-primary-foreground text-[10px] font-medium">{initials}</AvatarFallback>
+              </Avatar>
+              <div className="hidden sm:block text-left">
+                <p className="text-xs font-medium leading-none">{user?.firstName} {user?.lastName}</p>
+                <p className="text-[10px] text-muted-foreground leading-none mt-0.5">{user?.role ? t(`users.roles.${user.role}`) : ""}</p>
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>
+                  <div>
+                    <p className="text-sm font-medium">{user?.firstName} {user?.lastName}</p>
+                    <p className="text-xs text-muted-foreground font-normal">{user?.email}</p>
+                  </div>
+                </DropdownMenuLabel>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              {user?.role === "doctor" && (
+                <DropdownMenuItem onClick={() => navigate("/my-schedule")}>
+                  <Stethoscope className="w-4 h-4 mr-2" />{t("users.mySchedule")}
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={() => navigate("/settings")}>
+                <Settings className="w-4 h-4 mr-2" />{t("common.settings")}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleLogout} className="text-destructive">
+                <LogOut className="w-4 h-4 mr-2" />{t("auth.signOut")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  )
+}

package/frontend/src/layouts/app-layout.tsx

@@ -0,0 +1,19 @@
+import { Outlet } from "react-router-dom"
+import { AppHeader } from "./app-header"
+import { AppSidebar } from "./app-sidebar"
+import { MobileSidebar } from "./mobile-sidebar"
+
+export function AppLayout() {
+  return (
+    <div className="h-[100dvh] flex flex-col bg-background overflow-hidden">
+      <AppHeader />
+      <div className="flex flex-1 min-h-0">
+        <AppSidebar />
+        <MobileSidebar />
+        <main className="flex-1 min-w-0 p-4 sm:p-6 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

package/frontend/src/layouts/app-sidebar.tsx

@@ -0,0 +1,212 @@
+import { useLocation, useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { cn } from "@/lib/utils"
+import {
+  LayoutDashboard,
+  Users,
+  Calendar,
+  CalendarDays,
+  Stethoscope,
+  MessageSquare,
+  Phone,
+  TrendingUp,
+  Megaphone,
+  ClipboardCheck,
+  CreditCard,
+  UserCog,
+  Building2,
+  PhoneCall,
+  Settings,
+  Shield,
+  ShieldCheck,
+  FileText,
+  ChevronLeft,
+  Link2,
+  type LucideIcon,
+} from "lucide-react"
+import { Separator } from "@/components/ui/separator"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { useUIStore } from "@/stores/ui.store"
+import { useAuthStore } from "@/stores/auth.store"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface NavItem {
+  icon: LucideIcon
+  labelKey: string
+  path: string
+  permission?: string  // required permission (any match)
+  role?: string        // required role (exact match)
+}
+
+interface NavGroup {
+  titleKey: string
+  items: NavItem[]
+}
+
+const navGroups: NavGroup[] = [
+  {
+    titleKey: "",
+    items: [
+      { icon: LayoutDashboard, labelKey: "nav.dashboard", path: "/" },
+    ],
+  },
+  {
+    titleKey: "nav.patients",
+    items: [
+      { icon: Users, labelKey: "nav.patients", path: "/patients", permission: "patients:read" },
+      { icon: Calendar, labelKey: "nav.appointments", path: "/appointments", permission: "appointments:read" },
+      { icon: CalendarDays, labelKey: "nav.calendar", path: "/calendar", permission: "appointments:read" },
+      { icon: Stethoscope, labelKey: "nav.treatments", path: "/treatments", permission: "treatments:read" },
+    ],
+  },
+  {
+    titleKey: "nav.chats",
+    items: [
+      { icon: MessageSquare, labelKey: "nav.chats", path: "/chats", permission: "chats:read,chats:read_own" },
+      { icon: Phone, labelKey: "nav.calls", path: "/calls", permission: "calls:read" },
+      { icon: TrendingUp, labelKey: "nav.leads", path: "/leads", permission: "leads:read" },
+    ],
+  },
+  {
+    titleKey: "nav.campaigns",
+    items: [
+      { icon: Megaphone, labelKey: "nav.campaigns", path: "/campaigns", permission: "campaigns:read" },
+      { icon: ClipboardCheck, labelKey: "nav.validation", path: "/validation", permission: "validation:read" },
+    ],
+  },
+  {
+    titleKey: "common.settings",
+    items: [
+      { icon: CreditCard, labelKey: "nav.billing", path: "/billing", permission: "billing:read" },
+      { icon: UserCog, labelKey: "nav.users", path: "/users", permission: "users:read" },
+      { icon: Building2, labelKey: "nav.clinics", path: "/clinics", permission: "clinics:read" },
+      { icon: PhoneCall, labelKey: "nav.phoneNumbers", path: "/phone-numbers", permission: "phone_numbers:read" },
+      { icon: Link2, labelKey: "nav.connections", path: "/connections", permission: "phone_numbers:read" },
+      { icon: CalendarDays, labelKey: "nav.calendarConnections", path: "/calendar-connections", permission: "calendar:manage" },
+      { icon: Settings, labelKey: "nav.settings", path: "/settings" },
+    ],
+  },
+  {
+    titleKey: "nav.audit",
+    items: [
+      { icon: Shield, labelKey: "nav.audit", path: "/audit", permission: "audit:read" },
+      { icon: FileText, labelKey: "nav.logs", path: "/logs", permission: "audit:read" },
+      { icon: Building2, labelKey: "nav.platform", path: "/platform", role: "superadmin" },
+      { icon: ShieldCheck, labelKey: "nav.adminPanel", path: "/admin", role: "superadmin" },
+    ],
+  },
+]
+
+function NavItemButton({
+  item,
+  active,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  active: boolean
+  collapsed: boolean
+  onClick: () => void
+}) {
+  const { t } = useTranslation()
+  const Icon = item.icon
+  const label = t(item.labelKey)
+
+  const button = (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors cursor-pointer",
+        collapsed && "justify-center px-0",
+        active
+          ? "bg-primary/10 text-primary"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted",
+      )}
+    >
+      <Icon className={cn("shrink-0", collapsed ? "w-5 h-5" : "w-4 h-4")} />
+      {!collapsed && <span className="truncate">{label}</span>}
+    </button>
+  )
+
+  if (collapsed) {
+    return (
+      <Tooltip>
+        <TooltipTrigger className="w-full">{button}</TooltipTrigger>
+        <TooltipContent side="right">{label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return button
+}
+
+export function AppSidebar() {
+  const { t } = useTranslation()
+  const location = useLocation()
+  const navigate = useNavigate()
+  const collapsed = useUIStore((s) => s.sidebarCollapsed)
+  const toggleCollapsed = useUIStore((s) => s.toggleSidebarCollapsed)
+  const user = useAuthStore((s) => s.user)
+
+  const userPerms = user?.permissions ?? []
+  const userRole = user?.role ?? ""
+  const isSuperadmin = userRole === "superadmin"
+
+  // Filter nav items by permission/role
+  const filteredGroups = navGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => {
+        if (isSuperadmin) return true
+        if (item.role) return userRole === item.role
+        if (item.permission) return item.permission.split(",").some((p) => userPerms.includes(p))
+        return true // no restriction
+      }),
+    }))
+    .filter((group) => group.items.length > 0)
+
+  return (
+    <aside
+      className={cn(
+        "hidden md:flex flex-col border-r border-border bg-card shrink-0 transition-all duration-200 h-[calc(100dvh-3.5rem)] sticky top-14",
+        collapsed ? "w-[60px]" : "w-[220px]",
+      )}
+    >
+      {/* Collapse toggle at top */}
+      <div className={cn("border-b border-border p-2", collapsed ? "flex justify-center" : "px-3")}>
+        <button
+          onClick={toggleCollapsed}
+          className="flex items-center gap-2 text-muted-foreground hover:text-foreground text-xs cursor-pointer p-1.5 rounded-md hover:bg-muted transition-colors w-full justify-center"
+        >
+          <ChevronLeft className={cn("w-4 h-4 transition-transform", collapsed && "rotate-180")} />
+          {!collapsed && <span>{t("common.close")}</span>}
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto min-h-0 py-3">
+        <div className={cn("space-y-1", collapsed ? "px-2" : "px-3")}>
+          {filteredGroups.map((group, gi) => (
+            <div key={gi}>
+              {gi > 0 && <Separator className="my-2" />}
+              {group.titleKey && !collapsed && (
+                <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest px-3 mb-1 mt-1">
+                  {t(group.titleKey)}
+                </p>
+              )}
+              {group.items.map((item) => (
+                <NavItemButton
+                  key={item.path}
+                  item={item}
+                  active={location.pathname === item.path || (item.path !== "/" && location.pathname.startsWith(item.path))}
+                  collapsed={collapsed}
+                  onClick={() => navigate(item.path)}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+
+    </aside>
+  )
+}

package/frontend/src/layouts/auth-guard.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react"
+import { Navigate, Outlet } from "react-router-dom"
+import { useAuthStore } from "@/stores/auth.store"
+import { Loader2 } from "lucide-react"
+
+export function AuthGuard() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const isLoading = useAuthStore((s) => s.isLoading)
+  const user = useAuthStore((s) => s.user)
+  const fetchMe = useAuthStore((s) => s.fetchMe)
+
+  useEffect(() => {
+    if (isAuthenticated && !user) {
+      fetchMe()
+    }
+  }, [isAuthenticated, user, fetchMe])
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <Loader2 className="w-6 h-6 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <Outlet />
+}