Checkpoint React frontend migration

frontend/src/layouts/AdminLayout.tsx

@@ -0,0 +1,75 @@
+import { Link, Outlet, useLocation } from 'react-router-dom'
+import { LayoutDashboard, LogOut, BookOpen, GraduationCap, BarChart, Settings } from 'lucide-react'
+import { useAppStore } from '@/store/useAppStore'
+import { WebsiteSelector } from '@/components/WebsiteSelector'
+
+export function AdminLayout() {
+  const { logout } = useAppStore()
+  const location = useLocation()
+
+  const navItems = [
+    { name: 'Dashboard', path: '/admin/dashboard', icon: LayoutDashboard },
+    { name: 'Questions', path: '/admin/questions', icon: BookOpen },
+    { name: 'Tryouts', path: '/admin/tryouts', icon: GraduationCap },
+    { name: 'Reports', path: '/admin/reports', icon: BarChart },
+    { name: 'Settings', path: '/admin/settings', icon: Settings },
+  ]
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-muted/20">
+      {/* Sidebar */}
+      <aside className="w-64 flex-shrink-0 border-r bg-background">
+        <div className="flex h-16 items-center px-6 border-b">
+          <span className="text-lg font-bold">IRT Bank Soal</span>
+        </div>
+        <nav className="p-4 space-y-1">
+          {navItems.map((item) => {
+            const isActive = location.pathname.startsWith(item.path)
+            return (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                  isActive 
+                    ? 'bg-primary text-primary-foreground' 
+                    : 'hover:bg-muted text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.name}
+              </Link>
+            )
+          })}
+        </nav>
+        <div className="absolute bottom-4 left-4 right-4">
+          <button
+            onClick={() => {
+              logout()
+              window.location.href = '/login'
+            }}
+            className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <main className="flex-1 overflow-y-auto">
+        <div className="h-16 flex items-center justify-between px-6 border-b bg-background">
+          <div className="flex items-center gap-4">
+            <WebsiteSelector />
+          </div>
+          <div className="text-sm text-muted-foreground flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-green-500"></span>
+            System Online
+          </div>
+        </div>
+        <div className="p-8">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  )
+}