feat(panel): migrate to React Router, role-based layout and routing

Replace useState-based page switching with react-router-dom Routes.
Layout now renders admin or player nav items based on user.role.
Add stub pages for PlayerDashboard, GameLobby, and GameRoom.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

panel/src/App.tsx

@@ -1,91 +1,114 @@
-import { useState } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { useAuth } from "./lib/useAuth";
 import { Loader2 } from "lucide-react";
-import Layout, { type Page } from "./components/Layout";
+import Layout from "./components/Layout";
 import Dashboard from "./pages/Dashboard";
 import Settings from "./pages/Settings";
 import Users from "./pages/Users";
 import Items from "./pages/Items";
 import PlaceholderPage from "./pages/PlaceholderPage";
+import NotEnrolled from "./pages/NotEnrolled";
+import PlayerDashboard from "./pages/PlayerDashboard";
+import { GameLobby } from "./games/GameLobby";
+import { GameRoom } from "./games/GameRoom";
 
 const placeholders: Record<string, { title: string; description: string }> = {
-  users: {
-    title: "Users",
-    description: "Search, view, and manage user accounts, balances, XP, levels, and inventories.",
-  },
-  items: {
-    title: "Items",
-    description: "Create, edit, and manage game items with icons, rarities, and pricing.",
-  },
-  classes: {
-    title: "Classes",
-    description: "Manage academy classes, assign Discord roles, and track class balances.",
-  },
-  quests: {
-    title: "Quests",
-    description: "Configure quests with trigger events, targets, and XP/balance rewards.",
-  },
-  lootdrops: {
-    title: "Lootdrops",
-    description: "View active lootdrops, spawn new drops, and manage lootdrop history.",
-  },
-  moderation: {
-    title: "Moderation",
-    description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.",
-  },
-  transactions: {
-    title: "Transactions",
-    description: "Browse the economy transaction log with filtering by user, type, and date.",
-  },
-  settings: {
-    title: "Settings",
-    description: "Configure bot settings for economy, leveling, commands, and guild preferences.",
-  },
+    classes: {
+        title: "Classes",
+        description: "Manage academy classes, assign Discord roles, and track class balances.",
+    },
+    quests: {
+        title: "Quests",
+        description: "Configure quests with trigger events, targets, and XP/balance rewards.",
+    },
+    lootdrops: {
+        title: "Lootdrops",
+        description: "View active lootdrops, spawn new drops, and manage lootdrop history.",
+    },
+    moderation: {
+        title: "Moderation",
+        description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.",
+    },
+    transactions: {
+        title: "Transactions",
+        description: "Browse the economy transaction log with filtering by user, type, and date.",
+    },
+    leaderboards: {
+        title: "Leaderboards",
+        description: "View top players by level, wealth, and net worth.",
+    },
 };
 
-export default function App() {
-  const { loading, user, logout } = useAuth();
-  const [page, setPage] = useState<Page>("dashboard");
+function AppRoutes() {
+    const { loading, user, enrolled, logout } = useAuth();
+
+    if (loading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+            </div>
+        );
+    }
+
+    if (!user && !enrolled) {
+        return <NotEnrolled />;
+    }
+
+    if (!user) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="text-center max-w-xs">
+                    <div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
+                    <p className="text-sm text-muted-foreground mb-8">Welcome to Aurora</p>
+                    <a
+                        href={`/auth/discord?return_to=${encodeURIComponent(window.location.pathname)}`}
+                        className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
+                    >
+                        Sign in with Discord
+                    </a>
+                </div>
+            </div>
+        );
+    }
 
-  if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
+        <Layout user={user} logout={logout}>
+            <Routes>
+                <Route path="/" element={<Navigate to={user.role === "admin" ? "/admin" : "/dashboard"} replace />} />
 
-  if (!user) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center max-w-xs">
-          <div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
-          <p className="text-sm text-muted-foreground mb-8">Admin Panel</p>
-          <a
-            href={`/auth/discord?return_to=${encodeURIComponent(window.location.origin + '/')}`}
-            className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
-          >
-            Sign in with Discord
-          </a>
-          <p className="text-xs text-muted-foreground/40 mt-6">Authorized administrators only</p>
-        </div>
-      </div>
-    );
-  }
+                {/* Player routes */}
+                <Route path="/dashboard" element={<PlayerDashboard userId={user.discordId} />} />
+                <Route path="/leaderboards" element={<PlaceholderPage {...placeholders.leaderboards} />} />
 
-  return (
-    <Layout user={user} logout={logout} currentPage={page} onNavigate={setPage}>
-      {page === "dashboard" ? (
-        <Dashboard />
-      ) : page === "users" ? (
-        <Users />
-      ) : page === "items" ? (
-        <Items />
-      ) : page === "settings" ? (
-        <Settings />
-      ) : (
-        <PlaceholderPage {...placeholders[page]!} />
-      )}
-    </Layout>
-  );
+                {/* Game routes (both roles) */}
+                <Route path="/games" element={<GameLobby />} />
+                <Route path="/:gameSlug/:roomId" element={<GameRoom userId={user.discordId} />} />
+
+                {/* Admin routes */}
+                {user.role === "admin" && (
+                    <>
+                        <Route path="/admin" element={<Dashboard />} />
+                        <Route path="/admin/users" element={<Users />} />
+                        <Route path="/admin/items" element={<Items />} />
+                        <Route path="/admin/classes" element={<PlaceholderPage {...placeholders.classes} />} />
+                        <Route path="/admin/quests" element={<PlaceholderPage {...placeholders.quests} />} />
+                        <Route path="/admin/lootdrops" element={<PlaceholderPage {...placeholders.lootdrops} />} />
+                        <Route path="/admin/moderation" element={<PlaceholderPage {...placeholders.moderation} />} />
+                        <Route path="/admin/transactions" element={<PlaceholderPage {...placeholders.transactions} />} />
+                        <Route path="/admin/settings" element={<Settings />} />
+                    </>
+                )}
+
+                <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+        </Layout>
+    );
+}
+
+export default function App() {
+    return (
+        <BrowserRouter>
+            <AppRoutes />
+        </BrowserRouter>
+    );
 }

panel/src/components/Layout.tsx

@@ -1,140 +1,147 @@
 import {
-  LayoutDashboard,
-  Users,
-  Package,
-  Shield,
-  Scroll,
-  Gift,
-  ArrowLeftRight,
-  GraduationCap,
-  Settings,
-  LogOut,
-  ChevronLeft,
-  ChevronRight,
+    LayoutDashboard,
+    Users,
+    Package,
+    Shield,
+    Scroll,
+    Gift,
+    ArrowLeftRight,
+    GraduationCap,
+    Settings,
+    LogOut,
+    ChevronLeft,
+    ChevronRight,
+    Gamepad2,
+    Trophy,
 } from "lucide-react";
 import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { cn } from "../lib/utils";
 import type { AuthUser } from "../lib/useAuth";
 
-export type Page =
-  | "dashboard"
-  | "users"
-  | "items"
-  | "classes"
-  | "quests"
-  | "lootdrops"
-  | "moderation"
-  | "transactions"
-  | "settings";
+interface NavItem {
+    path: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+}
 
-const navItems: { page: Page; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
-  { page: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-  { page: "users", label: "Users", icon: Users },
-  { page: "items", label: "Items", icon: Package },
-  { page: "classes", label: "Classes", icon: GraduationCap },
-  { page: "quests", label: "Quests", icon: Scroll },
-  { page: "lootdrops", label: "Lootdrops", icon: Gift },
-  { page: "moderation", label: "Moderation", icon: Shield },
-  { page: "transactions", label: "Transactions", icon: ArrowLeftRight },
-  { page: "settings", label: "Settings", icon: Settings },
+const adminNavItems: NavItem[] = [
+    { path: "/admin", label: "Dashboard", icon: LayoutDashboard },
+    { path: "/admin/users", label: "Users", icon: Users },
+    { path: "/admin/items", label: "Items", icon: Package },
+    { path: "/admin/classes", label: "Classes", icon: GraduationCap },
+    { path: "/admin/quests", label: "Quests", icon: Scroll },
+    { path: "/admin/lootdrops", label: "Lootdrops", icon: Gift },
+    { path: "/admin/moderation", label: "Moderation", icon: Shield },
+    { path: "/admin/transactions", label: "Transactions", icon: ArrowLeftRight },
+    { path: "/admin/settings", label: "Settings", icon: Settings },
+    { path: "/games", label: "Games", icon: Gamepad2 },
+];
+
+const playerNavItems: NavItem[] = [
+    { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+    { path: "/games", label: "Games", icon: Gamepad2 },
+    { path: "/leaderboards", label: "Leaderboards", icon: Trophy },
 ];
 
 export default function Layout({
-  user,
-  logout,
-  currentPage,
-  onNavigate,
-  children,
+    user,
+    logout,
+    children,
 }: {
-  user: AuthUser;
-  logout: () => Promise<void>;
-  currentPage: Page;
-  onNavigate: (page: Page) => void;
-  children: React.ReactNode;
+    user: AuthUser;
+    logout: () => Promise<void>;
+    children: React.ReactNode;
 }) {
-  const [collapsed, setCollapsed] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const location = useLocation();
+    const navigate = useNavigate();
 
-  const avatarUrl = user.avatar
-    ? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
-    : null;
+    const navItems = user.role === "admin" ? adminNavItems : playerNavItems;
 
-  return (
-    <div className="min-h-screen flex">
-      {/* Sidebar */}
-      <aside
-        className={cn(
-          "fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200",
-          collapsed ? "w-16" : "w-60"
-        )}
-      >
-        {/* Logo */}
-        <div className="flex items-center h-16 px-4 border-b border-border">
-          <div className="font-display text-xl font-bold tracking-tight">
-            {collapsed ? "A" : "Aurora"}
-          </div>
-        </div>
+    const avatarUrl = user.avatar
+        ? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
+        : null;
 
-        {/* Nav items */}
-        <nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto">
-          {navItems.map(({ page, label, icon: Icon }) => (
-            <button
-              key={page}
-              onClick={() => onNavigate(page)}
-              className={cn(
-                "w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
-                currentPage === page
-                  ? "bg-primary/15 text-primary border-l-4 border-primary"
-                  : "text-text-tertiary hover:bg-primary/8 hover:text-foreground"
-              )}
+    function isActive(path: string): boolean {
+        if (path === "/admin" && location.pathname === "/admin") return true;
+        if (path === "/dashboard" && location.pathname === "/dashboard") return true;
+        if (path !== "/admin" && path !== "/dashboard" && location.pathname.startsWith(path)) return true;
+        return false;
+    }
+
+    return (
+        <div className="min-h-screen flex">
+            <aside
+                className={cn(
+                    "fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200",
+                    collapsed ? "w-16" : "w-60"
+                )}
             >
-              <Icon className={cn("w-5 h-5 shrink-0", currentPage === page && "text-primary")} />
-              {!collapsed && <span>{label}</span>}
-            </button>
-          ))}
-        </nav>
-
-        {/* User & collapse */}
-        <div className="border-t border-border p-3 space-y-2">
-          {!collapsed && (
-            <div className="flex items-center gap-3 px-2 py-1.5">
-              {avatarUrl ? (
-                <img src={avatarUrl} alt={user.username} className="w-8 h-8 rounded-full" />
-              ) : (
-                <div className="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-xs font-medium">
-                  {user.username[0]?.toUpperCase()}
+                <div className="flex items-center h-16 px-4 border-b border-border">
+                    <div className="font-display text-xl font-bold tracking-tight">
+                        {collapsed ? "A" : "Aurora"}
+                    </div>
                 </div>
-              )}
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-medium truncate">{user.username}</div>
-              </div>
-            </div>
-          )}
-          <div className={cn("flex", collapsed ? "flex-col items-center gap-2" : "items-center justify-between px-2")}>
-            <button
-              onClick={logout}
-              className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
-              title="Sign out"
-            >
-              <LogOut className="w-4 h-4" />
-              {!collapsed && <span>Sign out</span>}
-            </button>
-            <button
-              onClick={() => setCollapsed((c) => !c)}
-              className="p-1.5 rounded-md text-text-tertiary hover:text-foreground hover:bg-primary/10 transition-colors"
-              title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            >
-              {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
-            </button>
-          </div>
-        </div>
-      </aside>
 
-      {/* Main content */}
-      <main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}>
-        <div className="max-w-[1600px] mx-auto px-6 py-8">
-          {children}
+                <nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto">
+                    {navItems.map(({ path, label, icon: Icon }) => (
+                        <button
+                            key={path}
+                            onClick={() => navigate(path)}
+                            className={cn(
+                                "w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
+                                isActive(path)
+                                    ? "bg-primary/15 text-primary border-l-4 border-primary"
+                                    : "text-text-tertiary hover:bg-primary/8 hover:text-foreground"
+                            )}
+                        >
+                            <Icon className={cn("w-5 h-5 shrink-0", isActive(path) && "text-primary")} />
+                            {!collapsed && <span>{label}</span>}
+                        </button>
+                    ))}
+                </nav>
+
+                <div className="border-t border-border p-3 space-y-2">
+                    {!collapsed && (
+                        <div className="flex items-center gap-3 px-2 py-1.5">
+                            {avatarUrl ? (
+                                <img src={avatarUrl} alt={user.username} className="w-8 h-8 rounded-full" />
+                            ) : (
+                                <div className="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-xs font-medium">
+                                    {user.username[0]?.toUpperCase()}
+                                </div>
+                            )}
+                            <div className="flex-1 min-w-0">
+                                <div className="text-sm font-medium truncate">{user.username}</div>
+                            </div>
+                        </div>
+                    )}
+                    <div className={cn("flex", collapsed ? "flex-col items-center gap-2" : "items-center justify-between px-2")}>
+                        <button
+                            onClick={logout}
+                            className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
+                            title="Sign out"
+                        >
+                            <LogOut className="w-4 h-4" />
+                            {!collapsed && <span>Sign out</span>}
+                        </button>
+                        <button
+                            onClick={() => setCollapsed((c) => !c)}
+                            className="p-1.5 rounded-md text-text-tertiary hover:text-foreground hover:bg-primary/10 transition-colors"
+                            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+                        >
+                            {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+                        </button>
+                    </div>
+                </div>
+            </aside>
+
+            <main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}>
+                <div className="max-w-[1600px] mx-auto px-6 py-8">
+                    {children}
+                </div>
+            </main>
         </div>
-      </main>
-    </div>
-  );
+    );
 }

panel/src/games/GameLobby.tsx

@@ -0,0 +1,3 @@
+export function GameLobby() {
+    return <div className="text-text-tertiary">Game Lobby — loading...</div>;
+}

panel/src/games/GameRoom.tsx

@@ -0,0 +1,3 @@
+export function GameRoom({ userId }: { userId: string }) {
+    return <div className="text-text-tertiary">Game Room — loading...</div>;
+}

panel/src/pages/PlayerDashboard.tsx

@@ -0,0 +1,3 @@
+export default function PlayerDashboard({ userId }: { userId: string }) {
+    return <div className="text-text-tertiary">Player Dashboard — loading...</div>;
+}