Checkpoint React frontend migration

frontend/src/pages/admin/tryouts/TryoutLayout.tsx

@@ -0,0 +1,49 @@
+import { Link, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
+export default function TryoutLayout() {
+  const { id } = useParams<{ id: string }>()
+  const location = useLocation()
+  const navigate = useNavigate()
+  
+  let currentTab = 'questions'
+  if (location.pathname.includes('/questions')) currentTab = 'questions'
+  if (location.pathname.includes('/attempts')) currentTab = 'attempts'
+  if (location.pathname.includes('/normalization')) currentTab = 'normalization'
+  if (location.pathname.includes('/settings')) currentTab = 'settings'
+
+  const handleTabChange = (value: string) => {
+    navigate(`/admin/tryouts/${id}/${value}`)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Button variant="outline" size="icon" asChild>
+          <Link to="/admin/dashboard">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Tryout Workspace</h1>
+          <p className="text-muted-foreground mt-1">ID: {id}</p>
+        </div>
+      </div>
+
+      <Tabs value={currentTab} onValueChange={handleTabChange} className="w-full">
+        <TabsList className="grid w-full grid-cols-4 md:w-[560px]">
+          <TabsTrigger value="questions">Questions</TabsTrigger>
+          <TabsTrigger value="attempts">Attempts</TabsTrigger>
+          <TabsTrigger value="normalization">Normalization</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <div className="mt-6 bg-card border rounded-xl p-6 shadow-sm min-h-[500px]">
+        <Outlet />
+      </div>
+    </div>
+  )
+}