Initial commit: WrestleDesk full project

- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
2026-03-26 13:24:57 +01:00
commit 3fefc550fe
256 changed files with 38295 additions and 0 deletions
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
@@ -0,0 +1 @@
+@AGENTS.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
@@ -0,0 +1,21 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  {
+    rules: {
+      "react-hooks/set-state-in-effect": "off",
+    },
+  },
+  globalIgnores([
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
@@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.577.0",
+    "next": "16.2.1",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-big-calendar": "^1.19.4",
+    "react-dom": "19.2.4",
+    "shadcn": "^4.1.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-big-calendar": "^1.16.3",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
@@ -0,0 +1,16 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// Playwright configuration for WrestleDesk e2e tests
+export default defineConfig({
+  testDir: './tests/playwright',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: true,
+  /* Do not auto-run web server; rely on local dev servers.
+     You can run with: npx playwright test */
+  use: {
+    baseURL: 'http://localhost:3000',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  timeout: 30000,
+})
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
@@ -0,0 +1 @@
+{"componentLib":"radix","style":"default","baseColor":"zinc","cssVariables":true,"tailwindConfigFile":"tailwind.config.ts","usingCssVars":true}
@@ -0,0 +1,394 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/lib/auth"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { motion, AnimatePresence } from "framer-motion"
+import { Loader2, User, Lock, AlertCircle } from "lucide-react"
+import { toast } from "sonner"
+
+function WrestlingIcon({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="shieldGrad" x1="32" y1="4" x2="32" y2="60" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#1B1A55" />
+          <stop offset="100%" stopColor="#535C91" />
+        </linearGradient>
+        <linearGradient id="trophyGrad" x1="32" y1="18" x2="32" y2="46" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#FFD700" />
+          <stop offset="100%" stopColor="#FFA500" />
+        </linearGradient>
+      </defs>
+      
+      <path
+        d="M32 4L56 14V32C56 46 44 56 32 60C20 56 8 46 8 32V14L32 4Z"
+        fill="url(#shieldGrad)"
+        stroke="#1B1A55"
+        strokeWidth="2"
+      />
+      
+      <path
+        d="M32 18C28 18 25 21 25 25V28H22L32 34L42 28H39V25C39 21 36 18 32 18Z"
+        fill="url(#trophyGrad)"
+      />
+      <path
+        d="M32 18V24"
+        stroke="#FFD700"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <path
+        d="M22 28L32 34L42 28"
+        stroke="#FFA500"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      
+      <circle cx="32" cy="42" r="6" fill="url(#trophyGrad)" />
+      <path
+        d="M32 36V48M28 42H36"
+        stroke="#FFA500"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export default function LoginPage() {
+  const router = useRouter()
+  const { login, isLoading, error: authError } = useAuth()
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [focusedField, setFocusedField] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [loginSuccess, setLoginSuccess] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (authError) {
+      toast.error(authError, {
+        icon: <AlertCircle className="w-5 h-5" />,
+        duration: 4000,
+      })
+    }
+  }, [authError])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!username || !password || isSubmitting) return
+
+    setIsSubmitting(true)
+    try {
+      await login(username, password)
+      setLoginSuccess(true)
+      toast.success("Willkommen zurück!", {
+        duration: 2000,
+      })
+      setTimeout(() => {
+        router.push("/dashboard")
+      }, 800)
+    } catch {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter" && !isSubmitting && username && password) {
+      handleSubmit(e as unknown as React.FormEvent)
+    }
+  }
+
+  return (
+    <div 
+      className="min-h-screen relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-white to-blue-50" 
+      onKeyDown={handleKeyDown}
+    >
+      <div className="absolute inset-0 overflow-hidden">
+        <motion.div
+          className="absolute top-0 left-0 w-full h-full"
+          style={{
+            backgroundImage: `radial-gradient(circle at 20% 20%, rgba(27, 26, 85, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(83, 92, 145, 0.05) 0%, transparent 50%)`,
+          }}
+        />
+        
+        <motion.div
+          className="absolute -top-20 -right-20 w-96 h-96 rounded-full"
+          style={{
+            background: "radial-gradient(circle, rgba(27, 26, 85, 0.08) 0%, transparent 70%)",
+          }}
+          animate={{ scale: [1, 1.1, 1], opacity: [0.5, 0.8, 0.5] }}
+          transition={{ duration: 8, repeat: Infinity }}
+        />
+        
+        <motion.div
+          className="absolute -bottom-40 -left-40 w-[500px] h-[500px] rounded-full"
+          style={{
+            background: "radial-gradient(circle, rgba(83, 92, 145, 0.06) 0%, transparent 70%)",
+          }}
+          animate={{ scale: [1.1, 1, 1.1], opacity: [0.4, 0.6, 0.4] }}
+          transition={{ duration: 10, repeat: Infinity }}
+        />
+
+        <div 
+          className="absolute inset-0 opacity-[0.015]" 
+          style={{
+            backgroundImage: `linear-gradient(rgba(27, 26, 85, 1px), transparent 1px), linear-gradient(90deg, rgba(27, 26, 85, 1px), transparent 1px)`,
+            backgroundSize: '60px 60px'
+          }} 
+        />
+
+        <motion.div
+          className="absolute top-20 left-20 w-24 h-24 border border-[#1B1A55]/10 rounded-2xl rotate-12"
+          animate={{ y: [0, -15, 0], rotate: [12, 6, 12] }}
+          transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+        />
+        <motion.div
+          className="absolute bottom-32 right-20 w-16 h-16 border border-[#535C91]/10 rounded-full"
+          animate={{ y: [0, 10, 0] }}
+          transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
+        />
+        <motion.div
+          className="absolute top-1/3 right-32 w-12 h-12 bg-[#1B1A55]/5 rounded-lg rotate-[15deg]"
+          animate={{ rotate: [15, 25, 15] }}
+          transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
+        />
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 30, scale: 0.95 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="relative z-10 w-full max-w-md px-6"
+      >
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="text-center mb-12"
+        >
+          <div className="inline-flex items-center justify-center w-28 h-28 mb-8 relative">
+            <motion.div
+              className="absolute inset-0"
+              animate={{ boxShadow: ["0 0 40px rgba(27, 26, 85, 0.15)", "0 0 60px rgba(27, 26, 85, 0.25)", "0 0 40px rgba(27, 26, 85, 0.15)"] }}
+              transition={{ duration: 3, repeat: Infinity }}
+            >
+              <WrestlingIcon className="w-full h-full" />
+            </motion.div>
+          </div>
+          
+          <motion.h1 
+            className="text-5xl font-black tracking-tight text-[#1B1A55] mb-3" 
+            style={{ fontFamily: 'var(--font-heading)' }}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            WrestleDesk
+          </motion.h1>
+          <motion.p 
+            className="text-lg text-[#535C91] font-medium"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+          >
+            Ringerclub Management
+          </motion.p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="relative bg-white/80 backdrop-blur-xl border border-slate-200/60 rounded-3xl p-10 shadow-xl shadow-slate-200/50"
+        >
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-2/3 h-px bg-gradient-to-r from-transparent via-[#1B1A55]/20 to-transparent" />
+          
+          <AnimatePresence mode="wait">
+            {loginSuccess ? (
+              <motion.div
+                key="success"
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="flex flex-col items-center justify-center py-12"
+              >
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", stiffness: 200, damping: 15 }}
+                  className="w-20 h-20 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center mb-4 shadow-lg shadow-green-500/30"
+                >
+                  <motion.svg
+                    initial={{ pathLength: 0 }}
+                    animate={{ pathLength: 1 }}
+                    className="w-10 h-10 text-white"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <motion.path
+                      d="M20 6L9 17L4 12"
+                      initial={{ pathLength: 0 }}
+                      animate={{ pathLength: 1 }}
+                      transition={{ delay: 0.2, duration: 0.5 }}
+                    />
+                  </motion.svg>
+                </motion.div>
+                <p className="text-lg font-semibold text-[#1B1A55]">Anmeldung erfolgreich!</p>
+              </motion.div>
+            ) : (
+              <motion.form
+                key="form"
+                initial={{ opacity: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                onSubmit={handleSubmit}
+                className="space-y-6"
+              >
+                <motion.div
+                  className="space-y-3"
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.25 }}
+                >
+                  <Label htmlFor="username" className="text-sm font-semibold text-[#1B1A55]">
+                    Username
+                  </Label>
+                  <div className="relative">
+                    <div className={`absolute left-4 top-1/2 -translate-y-1/2 transition-colors duration-300 ${focusedField === "username" ? "text-[#1B1A55]" : "text-slate-400"}`}>
+                      <User className="w-5 h-5" />
+                    </div>
+                    <Input
+                      ref={inputRef}
+                      id="username"
+                      type="text"
+                      placeholder="Username eingeben"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      onFocus={() => setFocusedField("username")}
+                      onBlur={() => setFocusedField(null)}
+                      required
+                      disabled={isSubmitting}
+                      className={`h-14 pl-12 pr-4 text-base bg-white border-2 rounded-xl transition-all duration-300 placeholder:text-slate-400 text-slate-800
+                        ${focusedField === "username" 
+                          ? "border-[#1B1A55] shadow-[0_0_20px_rgba(27,26,85,0.15)]" 
+                          : "border-slate-200 hover:border-slate-300"
+                        }
+                        focus:ring-0 focus:shadow-none`}
+                    />
+                  </div>
+                </motion.div>
+                
+                <motion.div
+                  className="space-y-3"
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  <Label htmlFor="password" className="text-sm font-semibold text-[#1B1A55]">
+                    Passwort
+                  </Label>
+                  <div className="relative">
+                    <div className={`absolute left-4 top-1/2 -translate-y-1/2 transition-colors duration-300 ${focusedField === "password" ? "text-[#1B1A55]" : "text-slate-400"}`}>
+                      <Lock className="w-5 h-5" />
+                    </div>
+                    <Input
+                      id="password"
+                      type="password"
+                      placeholder="Passwort eingeben"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      onFocus={() => setFocusedField("password")}
+                      onBlur={() => setFocusedField(null)}
+                      required
+                      disabled={isSubmitting}
+                      className={`h-14 pl-12 pr-4 text-base bg-white border-2 rounded-xl transition-all duration-300 placeholder:text-slate-400 text-slate-800
+                        ${focusedField === "password" 
+                          ? "border-[#1B1A55] shadow-[0_0_20px_rgba(27,26,85,0.15)]" 
+                          : "border-slate-200 hover:border-slate-300"
+                        }
+                        focus:ring-0 focus:shadow-none`}
+                    />
+                  </div>
+                </motion.div>
+
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.35 }}
+                >
+                  <Button 
+                    type="submit" 
+                    disabled={isSubmitting || !username || !password}
+                    className={`relative w-full h-14 text-base font-bold rounded-xl transition-all duration-300 overflow-hidden
+                      ${isSubmitting 
+                        ? "bg-gradient-to-r from-[#1B1A55] to-[#535C91] cursor-not-allowed" 
+                        : "bg-gradient-to-r from-[#1B1A55] via-[#535C91] to-[#1B1A55] hover:shadow-xl hover:shadow-[#1B1A55]/20 hover:-translate-y-0.5 active:translate-y-0"
+                      }
+                      disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:shadow-none text-white border-0`}
+                  >
+                    {isSubmitting ? (
+                      <span className="flex items-center justify-center">
+                        <motion.div
+                          animate={{ rotate: 360 }}
+                          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                        >
+                          <Loader2 className="w-5 h-5 mr-2" />
+                        </motion.div>
+                        Anmeldung...
+                      </span>
+                    ) : (
+                      <span className="relative z-10">Anmelden</span>
+                    )}
+                    {!isSubmitting && (
+                      <motion.div
+                        className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/30 to-transparent"
+                        animate={{ x: ["-100%", "100%"] }}
+                        transition={{ duration: 2.5, repeat: Infinity, repeatDelay: 4 }}
+                      />
+                    )}
+                  </Button>
+                </motion.div>
+              </motion.form>
+            )}
+          </AnimatePresence>
+          
+          <div className="absolute bottom-6 left-1/2 -translate-x-1/2 w-1/2 h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent" />
+        </motion.div>
+        
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.5 }}
+          className="text-center mt-8 text-sm text-slate-500"
+        >
+          Professionelles Training Management
+        </motion.p>
+
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.6 }}
+          className="text-center mt-3 text-xs text-slate-400"
+        >
+          Drücke Enter zum Anmelden
+        </motion.p>
+      </motion.div>
+    </div>
+  )
+}
@@ -0,0 +1,378 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn, CardHover } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Plus, Search, Pencil, Trash2, Loader2, Users } from "lucide-react"
+import { toast } from "sonner"
+
+interface IClub {
+  id: number
+  name: string
+  short_name: string
+  logo: string | null
+  is_active: boolean
+  wrestler_count?: number
+  created_at: string
+  updated_at: string
+}
+
+export default function ClubsPage() {
+  const { token } = useAuth()
+  const [clubs, setClubs] = useState<IClub[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingClub, setEditingClub] = useState<IClub | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [logoPreview, setLogoPreview] = useState<string | null>(null)
+  const [logoFile, setLogoFile] = useState<File | null>(null)
+
+  const [formData, setFormData] = useState({
+    name: "",
+    short_name: "",
+    is_active: true,
+  })
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    fetchClubs()
+  }, [token])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const fetchClubs = async () => {
+    try {
+      const data = await apiFetch<PaginatedResponse<IClub>>("/clubs/", { token: token! })
+      setClubs(data.results || [])
+    } catch {
+      toast.error("Fehler beim Laden der Clubs")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    try {
+      const payload = new FormData()
+      payload.append("name", formData.name)
+      payload.append("short_name", formData.short_name)
+      payload.append("is_active", String(formData.is_active))
+      if (logoFile) {
+        payload.append("logo", logoFile)
+      }
+
+      if (editingClub) {
+        await apiFetch(`/clubs/${editingClub.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: payload,
+          headers: {},
+        })
+        toast.success("Club aktualisiert")
+      } else {
+        await apiFetch("/clubs/", {
+          method: "POST",
+          token: token!,
+          body: payload,
+          headers: {},
+        })
+        toast.success("Club erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingClub(null)
+      setLogoPreview(null)
+      setLogoFile(null)
+      setFormData({ name: "", short_name: "", is_active: true })
+      fetchClubs()
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      toast.error(`Fehler beim Speichern: ${errorMessage}`)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = (club: IClub) => {
+    setEditingClub(club)
+    setFormData({
+      name: club.name,
+      short_name: club.short_name,
+      is_active: club.is_active,
+    })
+    setLogoPreview(club.logo)
+    setLogoFile(null)
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteId) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/clubs/${deleteId}/`, { method: "DELETE", token: token! })
+      toast.success("Club gelöscht")
+      setDeleteId(null)
+      fetchClubs()
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const filteredClubs = clubs.filter(
+    (c) =>
+      c.name.toLowerCase().includes(search.toLowerCase()) ||
+      c.short_name.toLowerCase().includes(search.toLowerCase())
+  )
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Clubs</h1>
+            <p className="text-sm text-muted-foreground">
+              {clubs.length} {clubs.length === 1 ? "Club" : "Clubs"} insgesamt
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              setEditingClub(null)
+              setFormData({ name: "", short_name: "", is_active: true })
+              setLogoPreview(null)
+              setLogoFile(null)
+              setIsModalOpen(true)
+            }}
+            className="transition-all duration-200 hover:shadow-md"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Club hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Club suchen..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 max-w-sm transition-all duration-200 focus:shadow-sm"
+          />
+        </div>
+      </FadeIn>
+
+      {filteredClubs.length === 0 ? (
+        <FadeIn delay={0.1}>
+          <EmptyState
+            icon={Users}
+            title="Keine Clubs gefunden"
+            description={search ? "Versuche einen anderen Suchbegriff" : "Füge deinen ersten Club hinzu"}
+            action={
+              !search
+                ? {
+                    label: "Club hinzufügen",
+                    onClick: () => {
+                      setEditingClub(null)
+                      setFormData({ name: "", short_name: "", is_active: true })
+                      setLogoPreview(null)
+                      setLogoFile(null)
+                      setIsModalOpen(true)
+                    },
+                  }
+                : undefined
+            }
+          />
+        </FadeIn>
+      ) : (
+        <FadeIn delay={0.1}>
+          <CardHover>
+            <div className="border rounded-xl overflow-hidden">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-muted/50">
+                    <TableHead className="font-medium w-16">Logo</TableHead>
+                    <TableHead className="font-medium">Name</TableHead>
+                    <TableHead className="font-medium">Kürzel</TableHead>
+                    <TableHead className="font-medium">Ringer</TableHead>
+                    <TableHead className="font-medium">Status</TableHead>
+                    <TableHead className="text-right font-medium">Aktionen</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredClubs.map((club, index) => (
+                    <motion.tr
+                      key={club.id}
+                      className="border-t"
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                      whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+                    >
+                      <TableCell>
+                        {club.logo ? (
+                          <img src={club.logo} alt={club.name} className="w-10 h-10 rounded-lg object-cover" />
+                        ) : (
+                          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary text-sm font-bold">
+                            {club.short_name?.[0] || club.name[0]}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="font-medium">{club.name}</TableCell>
+                      <TableCell>{club.short_name}</TableCell>
+                      <TableCell className="text-muted-foreground">{club.wrestler_count || 0}</TableCell>
+                      <TableCell>
+                        <Badge variant={club.is_active ? "default" : "outline"}>
+                          {club.is_active ? "Aktiv" : "Inaktiv"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleEdit(club)}
+                            className="hover:bg-muted transition-colors"
+                          >
+                            <Pencil className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setDeleteId(club.id)}
+                            className="hover:bg-destructive/10 hover:text-destructive transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </motion.tr>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardHover>
+        </FadeIn>
+      )}
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingClub ? "Club bearbeiten" : "Neuen Club erstellen"}
+        description={editingClub ? "Bearbeite die Daten des Clubs" : "Fülle alle erforderlichen Felder aus"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingClub ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="short_name">Kürzel</Label>
+            <Input
+              id="short_name"
+              value={formData.short_name}
+              onChange={(e) => setFormData({ ...formData, short_name: e.target.value })}
+              required
+              maxLength={10}
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="logo">Logo</Label>
+            <Input
+              id="logo"
+              type="file"
+              accept="image/*"
+              onChange={(e) => {
+                const file = e.target.files?.[0]
+                if (file) {
+                  setLogoFile(file)
+                  setLogoPreview(URL.createObjectURL(file))
+                }
+              }}
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+            {logoPreview && (
+              <img src={logoPreview} alt="Logo Preview" className="mt-2 w-20 h-20 object-cover rounded-lg" />
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="is_active" className="flex items-center gap-2">
+              <input
+                id="is_active"
+                type="checkbox"
+                checked={formData.is_active}
+                onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+                className="w-4 h-4 rounded border-input"
+              />
+              Aktiv
+            </Label>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Club löschen"
+        description="Bist du sicher, dass du diesen Club löschen möchtest? Dies kann nicht rückgängig gemacht werden."
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,306 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, IDashboardStats } from "@/lib/api"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { DashboardSkeleton } from "@/components/ui/skeletons"
+import { FadeIn, StaggeredList, listItemVariants, CardHover } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Users, UserCog, CalendarDays, BookOpen, TrendingUp, Trophy } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+const groupConfig = {
+  kids: { label: "Kinder", color: "bg-blue-500", bgColor: "bg-blue-500/10", textColor: "text-blue-500" },
+  youth: { label: "Jugend", color: "bg-purple-500", bgColor: "bg-purple-500/10", textColor: "text-purple-500" },
+  adults: { label: "Erwachsene", color: "bg-orange-500", bgColor: "bg-orange-500/10", textColor: "text-orange-500" },
+  inactive: { label: "Inaktiv", color: "bg-gray-400", bgColor: "bg-gray-400/10", textColor: "text-gray-500" },
+}
+
+const groupOrder = ["kids", "youth", "adults", "inactive"] as const
+
+export default function DashboardPage() {
+  const { token, user } = useAuth()
+  const [stats, setStats] = useState<IDashboardStats | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    if (!token) return
+
+    const fetchStats = async () => {
+      setIsLoading(true)
+      try {
+        const data = await apiFetch<IDashboardStats>('/stats/dashboard/', { token })
+        setStats(data)
+      } catch (error) {
+        console.error("Failed to fetch stats:", error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchStats()
+  }, [token])
+
+  if (isLoading) {
+    return <DashboardSkeleton />
+  }
+
+  const maxActivity = stats?.activity ? Math.max(...stats.activity.map(a => a.count), 1) : 1
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="space-y-1">
+          <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground">Willkommen zurück, {user?.username}</p>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <StaggeredList staggerDelay={0.08} className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          <CardHover>
+            <Card className="cursor-pointer">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Ringer</CardTitle>
+                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
+                  <Users className="h-5 w-5 text-primary" />
+                </motion.div>
+              </CardHeader>
+              <CardContent className="pb-4">
+                <div className="text-3xl font-bold">{stats?.wrestlers.total || 0}</div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  +{stats?.wrestlers.this_week || 0} diese Woche
+                </p>
+              </CardContent>
+            </Card>
+          </CardHover>
+
+          <CardHover>
+            <Card className="cursor-pointer">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Trainer</CardTitle>
+                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
+                  <UserCog className="h-5 w-5 text-secondary" />
+                </motion.div>
+              </CardHeader>
+              <CardContent className="pb-4">
+                <div className="text-3xl font-bold">{stats?.trainers.total || 0}</div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Aktiv: {stats?.trainers.active || 0}
+                </p>
+              </CardContent>
+            </Card>
+          </CardHover>
+
+          <CardHover>
+            <Card className="cursor-pointer">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Trainings</CardTitle>
+                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
+                  <CalendarDays className="h-5 w-5 text-accent" />
+                </motion.div>
+              </CardHeader>
+              <CardContent className="pb-4">
+                <div className="text-3xl font-bold">{stats?.trainings.total || 0}</div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  +{stats?.trainings.this_week || 0} diese Woche
+                </p>
+              </CardContent>
+            </Card>
+          </CardHover>
+
+          <CardHover>
+            <Card className="cursor-pointer">
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">Hausaufgaben</CardTitle>
+                <motion.div whileHover={{ rotate: 10, scale: 1.1 }} transition={{ duration: 0.2 }}>
+                  <BookOpen className="h-5 w-5 text-primary" />
+                </motion.div>
+              </CardHeader>
+              <CardContent className="pb-4">
+                <div className="text-3xl font-bold">{stats?.homework.open || 0}</div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  offen
+                </p>
+              </CardContent>
+            </Card>
+          </CardHover>
+        </StaggeredList>
+      </FadeIn>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <FadeIn delay={0.1}>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Users className="h-4 w-4 text-secondary" />
+                Teilnahme diese Woche
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {groupOrder.filter(g => g !== "inactive").map((group) => {
+                const data = stats?.attendance.this_week[group]
+                const config = groupConfig[group]
+                return (
+                  <div key={group} className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-2">
+                        <div className={`w-2 h-2 rounded-full ${config.color}`} />
+                        <span>{config.label}</span>
+                      </div>
+                      <span className="font-medium">
+                        {data?.attended || 0}/{data?.total || 0}
+                      </span>
+                    </div>
+                    <div className="h-2 bg-muted rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${config.color} transition-all duration-500 rounded-full`}
+                        style={{ width: `${data?.percent || 0}%` }}
+                      />
+                    </div>
+                  </div>
+                )
+              })}
+              <div className="pt-2 border-t">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Ø Teilnehmer</span>
+                  <span className="font-medium">
+                    {stats?.attendance.average || 0}/{stats?.attendance.expected || 0}
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </FadeIn>
+
+        <FadeIn delay={0.15}>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base flex items-center gap-2">
+                <TrendingUp className="h-4 w-4 text-primary" />
+                Training Aktivität
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-end gap-1 h-24">
+                {stats?.activity.map((day, i) => (
+                  <div key={i} className="flex-1 flex flex-col items-center gap-1">
+                    <div
+                      className="w-full bg-primary/20 hover:bg-primary/30 transition-colors rounded-t"
+                      style={{ height: `${Math.max((day.count / maxActivity) * 100, 4)}%` }}
+                    />
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground mt-2 text-center">
+                Letzte 14 Tage
+              </p>
+            </CardContent>
+          </Card>
+        </FadeIn>
+      </div>
+
+      <FadeIn delay={0.2}>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <BookOpen className="h-4 w-4 text-green-500" />
+              Hausaufgaben Erledigung
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <div className="h-4 bg-muted rounded-full overflow-hidden flex">
+                  <div
+                    className="h-full bg-green-500 transition-all duration-500"
+                    style={{
+                      width: `${stats?.homework.completed ? 
+                        (stats.homework.completed / (stats.homework.open + stats.homework.completed) * 100) : 0}%`
+                    }}
+                  />
+                </div>
+              </div>
+              <span className="text-sm font-medium whitespace-nowrap">
+                {stats?.homework.completed || 0} ({stats?.homework.completed ? 
+                  Math.round(stats.homework.completed / (stats.homework.open + stats.homework.completed) * 100) : 0}%)
+              </span>
+            </div>
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>Offen: {stats?.homework.open || 0}</span>
+              <span>Erledigt: {stats?.homework.completed || 0}</span>
+            </div>
+          </CardContent>
+        </Card>
+      </FadeIn>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <FadeIn delay={0.25}>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Users className="h-4 w-4 text-accent" />
+                Ringer nach Gruppe
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {groupOrder.map((group) => {
+                const count = stats?.wrestlers_by_group[group] || 0
+                const config = groupConfig[group]
+                const total = stats?.wrestlers.total || 1
+                return (
+                  <div key={group} className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-2">
+                        <div className={`w-2 h-2 rounded-full ${config.color}`} />
+                        <span>{config.label}</span>
+                      </div>
+                      <span className="font-medium">{count}</span>
+                    </div>
+                    <div className="h-2 bg-muted rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${config.color} transition-all duration-500 rounded-full`}
+                        style={{ width: `${(count / total) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                )
+              })}
+            </CardContent>
+          </Card>
+        </FadeIn>
+
+        <FadeIn delay={0.3}>
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base flex items-center gap-2">
+                <Trophy className="h-4 w-4 text-yellow-500" />
+                Top Trainer
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {stats?.top_trainers && stats.top_trainers.length > 0 ? (
+                stats.top_trainers.map((trainer, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
+                      i === 0 ? "bg-yellow-100 text-yellow-700" :
+                      i === 1 ? "bg-gray-100 text-gray-700" :
+                      i === 2 ? "bg-orange-100 text-orange-700" :
+                      "bg-muted text-muted-foreground"
+                    }`}>
+                      {i + 1}
+                    </div>
+                    <span className="flex-1 font-medium">{trainer.name}</span>
+                    <Badge variant="secondary">{trainer.training_count} Training</Badge>
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground">Keine Trainer vorhanden</p>
+              )}
+            </CardContent>
+          </Card>
+        </FadeIn>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,543 @@
+"use client"
+
+import { useEffect, useState, useCallback, useRef } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, IExercise, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Pagination } from "@/components/ui/pagination"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Plus, Pencil, Trash2, Loader2, Dumbbell, RotateCcw, Filter } from "lucide-react"
+import { toast } from "sonner"
+
+const categoryConfig = {
+  warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
+  kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
+  technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
+  ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
+  spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
+  cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
+}
+
+const PAGE_SIZE = 20
+
+const DEFAULT_FILTERS = {
+  search: "",
+  category: "all",
+}
+
+
+function ExerciseTable({
+  exercises,
+  totalCount,
+  isTableLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  onEdit,
+  onDelete,
+}: {
+  exercises: IExercise[]
+  totalCount: number
+  isTableLoading: boolean
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+  onEdit: (exercise: IExercise) => void
+  onDelete: (id: number) => void
+}) {
+  if (isTableLoading) {
+    return (
+      <div className="border rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="font-medium">Name</TableHead>
+              <TableHead className="font-medium">Kategorie</TableHead>
+              <TableHead className="font-medium">Dauer/Wdh</TableHead>
+              <TableHead className="text-right font-medium">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: 5 }).map((_, i) => (
+              <TableRow key={i} className="animate-pulse">
+                <TableCell><div className="h-4 bg-muted rounded w-32" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-20" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-16" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-16 ml-auto" /></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+
+  if (exercises.length === 0) {
+    return (
+      <EmptyState
+        icon={Dumbbell}
+        title="Keine Übungen gefunden"
+        description="Versuche einen anderen Suchbegriff"
+        action={{
+          label: "Übung hinzufügen",
+          onClick: () => {},
+        }}
+      />
+    )
+  }
+
+  return (
+    <>
+      <div className="border rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="font-medium">Name</TableHead>
+              <TableHead className="font-medium">Kategorie</TableHead>
+              <TableHead className="font-medium">Dauer/Wdh</TableHead>
+              <TableHead className="text-right font-medium">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {exercises.map((exercise, index) => (
+              <motion.tr
+                key={exercise.id}
+                className="border-t"
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+              >
+                <TableCell className="font-medium">{exercise.name}</TableCell>
+                <TableCell>
+                  <Badge className={categoryConfig[exercise.category]?.class} variant="secondary">
+                    {categoryConfig[exercise.category]?.label}
+                  </Badge>
+                </TableCell>
+                <TableCell>{exercise.default_value || "-"}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onEdit(exercise)}
+                      className="hover:bg-muted transition-colors"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onDelete(exercise.id)}
+                      className="hover:bg-destructive/10 hover:text-destructive transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </motion.tr>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={PAGE_SIZE}
+          onPageChange={onPageChange}
+        />
+      )}
+    </>
+  )
+}
+
+
+export default function ExercisesPage() {
+  const { token } = useAuth()
+  const [exercises, setExercises] = useState<IExercise[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isTableLoading, setIsTableLoading] = useState(false)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingExercise, setEditingExercise] = useState<IExercise | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [nameError, setNameError] = useState<string | null>(null)
+  const nameCheckTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
+
+  const [filters, setFilters] = useState(DEFAULT_FILTERS)
+  const hasActiveFilters = Object.values(filters).some(v => v && v !== "all")
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE)
+
+  const [formData, setFormData] = useState({
+    name: "",
+    category: "technik" as IExercise["category"],
+    description: "",
+    default_value: "",
+  })
+
+  const fetchPreferences = useCallback(async () => {
+    if (!token) return
+    try {
+      const prefs = await apiFetch<{ exercises_filters: { search: string; category: string } }>(`/auth/preferences/`, { token })
+      const savedFilters = prefs.exercises_filters || {}
+      setFilters({ search: savedFilters.search ?? "", category: savedFilters.category ?? "all" })
+    } catch (err) {
+      console.error("Failed to fetch preferences:", err)
+    }
+  }, [token])
+
+  const savePreferences = useCallback(async (newFilters: typeof filters) => {
+    if (!token) return
+    try {
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify({ exercises_filters: newFilters }),
+      })
+    } catch {
+      console.error("Failed to save preferences")
+    }
+  }, [token])
+
+  const fetchExercises = useCallback(async (f: typeof filters, page: number, isInitial: boolean) => {
+    if (!token) return
+    if (isInitial) {
+      setIsLoading(true)
+    } else {
+      setIsTableLoading(true)
+    }
+    try {
+      const params = new URLSearchParams()
+      params.set("page", page.toString())
+      params.set("page_size", PAGE_SIZE.toString())
+      if (f.search) params.set("search", f.search)
+      if (f.category !== "all") params.set("category", f.category)
+
+      const data = await apiFetch<PaginatedResponse<IExercise>>(`/exercises/?${params.toString()}`, { token: token! })
+      setExercises(data.results || [])
+      setTotalCount(data.count || 0)
+    } catch {
+      toast.error("Fehler beim Laden der Übungen")
+    } finally {
+      setIsLoading(false)
+      setIsTableLoading(false)
+    }
+  }, [token])
+
+  useEffect(() => {
+    fetchPreferences()
+  }, [fetchPreferences])
+
+  useEffect(() => {
+    fetchExercises(filters, currentPage, true)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleFilterChange = (key: keyof typeof filters, value: string) => {
+    const newFilters = { ...filters, [key]: value }
+    setFilters(newFilters)
+    savePreferences(newFilters)
+    fetchExercises(newFilters, 1, false)
+  }
+
+  const handleResetFilters = () => {
+    const resetFilters = { search: "", category: "all" }
+    setFilters(resetFilters)
+    savePreferences(resetFilters)
+    fetchExercises(resetFilters, 1, false)
+  }
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+    fetchExercises(filters, page, false)
+  }
+
+  const checkNameExists = (name: string) => {
+    if (nameCheckTimeout.current) clearTimeout(nameCheckTimeout.current)
+    if (!name.trim()) {
+      setNameError(null)
+      return
+    }
+    nameCheckTimeout.current = setTimeout(async () => {
+      try {
+        const data = await apiFetch<PaginatedResponse<IExercise>>(
+          `/exercises/?search=${encodeURIComponent(name)}&page_size=1`,
+          { token: token || undefined }
+        )
+        const exists = data.results.some(
+          (e) => e.name.toLowerCase() === name.toLowerCase() && (!editingExercise || e.id !== editingExercise.id)
+        )
+        setNameError(exists ? "Eine Übung mit diesem Namen existiert bereits." : null)
+      } catch {
+        setNameError(null)
+      }
+    }, 300)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    try {
+      const payload = {
+        name: formData.name,
+        category: formData.category,
+        description: formData.description || "",
+        default_value: formData.default_value || "",
+      }
+
+      if (editingExercise) {
+        await apiFetch(`/exercises/${editingExercise.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Übung aktualisiert")
+      } else {
+        await apiFetch("/exercises/", {
+          method: "POST",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Übung erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingExercise(null)
+      setFormData({ name: "", category: "technik", description: "", default_value: "" })
+      fetchExercises(filters, 1, false)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Fehler beim Speichern"
+      toast.error(message)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = (exercise: IExercise) => {
+    setEditingExercise(exercise)
+    setFormData({
+      name: exercise.name,
+      category: exercise.category,
+      description: exercise.description || "",
+      default_value: (exercise as IExercise).default_value || "",
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async (id: number) => {
+    setDeleteId(id)
+  }
+
+  const confirmDelete = async () => {
+    if (!deleteId) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/exercises/${deleteId}/`, { method: "DELETE", token: token! })
+      toast.success("Übung gelöscht")
+      setDeleteId(null)
+      fetchExercises(filters, 1, false)
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Übungen</h1>
+            <p className="text-sm text-muted-foreground">
+              {totalCount} {totalCount === 1 ? "Übung" : "Übungen"} insgesamt
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              setEditingExercise(null)
+setFormData({ name: "", category: "technik", description: "", default_value: "" })
+              setIsModalOpen(true)
+            }}
+            className="transition-all duration-200 hover:shadow-md"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Übung hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Filter className="w-4 h-4" />
+            <span>Filter:</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Input
+              type="text"
+              placeholder="Suchen..."
+              value={filters.search}
+              onChange={(e) => handleFilterChange("search", e.target.value)}
+              className="h-9 w-[180px] text-sm"
+            />
+          </div>
+
+          <Select value={filters.category} onValueChange={(v) => handleFilterChange("category", v || "all")}>
+            <SelectTrigger className="h-9 w-[160px]">
+              <SelectValue placeholder="Kategorie" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              <SelectItem value="warmup">Aufwärmen</SelectItem>
+              <SelectItem value="kraft">Kraft</SelectItem>
+              <SelectItem value="technik">Technik</SelectItem>
+              <SelectItem value="ausdauer">Ausdauer</SelectItem>
+              <SelectItem value="spiele">Spiele</SelectItem>
+              <SelectItem value="cool_down">Abkühlung</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {hasActiveFilters && (
+            <Button variant="ghost" size="sm" onClick={handleResetFilters} className="h-9 text-muted-foreground hover:text-foreground">
+              <RotateCcw className="w-4 h-4 mr-1" />
+              Zurücksetzen
+            </Button>
+          )}
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.1}>
+        <ExerciseTable
+          exercises={exercises}
+          totalCount={totalCount}
+          isTableLoading={isTableLoading}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+      </FadeIn>
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open)
+          if (!open) setNameError(null)
+        }}
+        title={editingExercise ? "Übung bearbeiten" : "Neue Übung erstellen"}
+        description={editingExercise ? "Bearbeite die Daten der Übung" : "Fülle alle erforderlichen Felder aus"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving || !!nameError}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingExercise ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => {
+                setFormData({ ...formData, name: e.target.value })
+                checkNameExists(e.target.value)
+              }}
+              required
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+            {nameError && (
+              <p className="text-sm text-destructive mt-1">{nameError}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="category">Kategorie</Label>
+            <select
+              id="category"
+              value={formData.category}
+              onChange={(e) => setFormData({ ...formData, category: e.target.value as IExercise["category"] })}
+              className="w-full h-10 px-3 border rounded-lg bg-background transition-all duration-200 focus:ring-2 focus:ring-ring"
+            >
+              <option value="warmup">Aufwärmen</option>
+              <option value="kraft">Kraft</option>
+              <option value="technik">Technik</option>
+              <option value="ausdauer">Ausdauer</option>
+              <option value="spiele">Spiele</option>
+              <option value="cool_down">Abkühlung</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="default_value">Dauer/Wiederholungen</Label>
+            <Input
+              id="default_value"
+              value={formData.default_value}
+              onChange={(e) => setFormData({ ...formData, default_value: e.target.value })}
+              placeholder="z.B. 3x10"
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description">Beschreibung</Label>
+            <textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full h-24 px-3 py-2 border rounded-lg bg-background resize-none transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Übung löschen"
+        description="Bist du sicher, dass du diese Übung löschen möchtest?"
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,204 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITrainingHomeworkAssignment, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { FadeIn } from "@/components/ui/animations"
+import { Search, Dumbbell, LayoutGrid, List, BookOpen, Calendar } from "lucide-react"
+import { toast } from "sonner"
+import { WrestlerCentricView } from "@/components/homework-views/wrestler-centric-view"
+import { TimelineView } from "@/components/homework-views/timeline-view"
+import { BoardView } from "@/components/homework-views/board-view"
+import { TableView } from "@/components/homework-views/table-view"
+
+type ViewType = "wrestler" | "timeline" | "board" | "table"
+type FilterStatus = "all" | "open" | "completed"
+
+export default function HomeworkPage() {
+  const { token } = useAuth()
+  const [assignments, setAssignments] = useState<ITrainingHomeworkAssignment[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [filterStatus, setFilterStatus] = useState<FilterStatus>("all")
+  const [viewMode, setViewMode] = useState<ViewType>("wrestler")
+  const [togglingId, setTogglingId] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (token) {
+      fetchAssignments()
+    }
+  }, [token])
+
+  const fetchAssignments = async () => {
+    try {
+      const data = await apiFetch<PaginatedResponse<ITrainingHomeworkAssignment>>(
+        "/training-assignments/?page_size=1000",
+        { token: token! }
+      )
+      setAssignments(data.results || [])
+    } catch {
+      toast.error("Fehler beim Laden der Hausaufgaben")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleToggleComplete = async (assignmentId: number, currentStatus: boolean) => {
+    setTogglingId(assignmentId)
+    try {
+      const endpoint = currentStatus
+        ? `/training-assignments/${assignmentId}/uncomplete/`
+        : `/training-assignments/${assignmentId}/complete/`
+      await apiFetch(endpoint, { method: "POST", token: token! })
+      toast.success(currentStatus ? "Als unerledigt markiert" : "Als erledigt markiert")
+      fetchAssignments()
+    } catch {
+      toast.error("Fehler beim Aktualisieren")
+    } finally {
+      setTogglingId(null)
+    }
+  }
+
+  const filteredAssignments = assignments.filter(a => {
+    const matchesSearch = a.wrestler_name.toLowerCase().includes(search.toLowerCase())
+    const matchesStatus = filterStatus === "all" ||
+      (filterStatus === "open" && !a.is_completed) ||
+      (filterStatus === "completed" && a.is_completed)
+    return matchesSearch && matchesStatus
+  })
+
+  const openCount = assignments.filter(a => !a.is_completed).length
+  const completedCount = assignments.filter(a => a.is_completed).length
+
+  const viewOptions: { value: ViewType; label: string; icon: React.ReactNode }[] = [
+    { value: "wrestler", label: "Ringer", icon: <BookOpen className="w-4 h-4" /> },
+    { value: "timeline", label: "Zeitstrahl", icon: <Calendar className="w-4 h-4" /> },
+    { value: "board", label: "Board", icon: <LayoutGrid className="w-4 h-4" /> },
+    { value: "table", label: "Tabelle", icon: <List className="w-4 h-4" /> },
+  ]
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center gap-4">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Hausaufgaben</h1>
+            <p className="text-sm text-muted-foreground">
+              {openCount} offen, {completedCount} erledigt
+            </p>
+          </div>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+          <div className="flex gap-2">
+            <Button
+              variant={filterStatus === "all" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setFilterStatus("all")}
+            >
+              Alle ({assignments.length})
+            </Button>
+            <Button
+              variant={filterStatus === "open" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setFilterStatus("open")}
+            >
+              Offen ({openCount})
+            </Button>
+            <Button
+              variant={filterStatus === "completed" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setFilterStatus("completed")}
+            >
+              Erledigt ({completedCount})
+            </Button>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <div className="relative w-full sm:w-64">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="Ringer suchen..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            
+            <div className="flex border rounded-lg">
+              {viewOptions.map(option => (
+                <button
+                  key={option.value}
+                  onClick={() => setViewMode(option.value)}
+                  className={`p-2 ${viewMode === option.value ? "bg-muted" : "hover:bg-muted/50"} first:rounded-l-lg last:rounded-r-lg transition-colors`}
+                  title={option.label}
+                >
+                  {option.icon}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </FadeIn>
+
+      {filteredAssignments.length === 0 ? (
+        <FadeIn delay={0.1}>
+          <Card>
+            <CardContent className="py-12">
+              <div className="text-center text-muted-foreground">
+                <Dumbbell className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                <p className="text-lg font-medium">Keine Hausaufgaben</p>
+                <p className="text-sm mt-1">
+                  {search || filterStatus !== "all"
+                    ? "Versuche einen anderen Filter oder Suchbegriff"
+                    : "Hausaufgaben werden von der Training-Seite aus zugewiesen"}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </FadeIn>
+      ) : (
+        <FadeIn delay={0.1}>
+          {viewMode === "wrestler" && (
+            <WrestlerCentricView 
+              assignments={filteredAssignments}
+              onToggleComplete={handleToggleComplete}
+              togglingId={togglingId}
+            />
+          )}
+          {viewMode === "timeline" && (
+            <TimelineView 
+              assignments={filteredAssignments}
+              onToggleComplete={handleToggleComplete}
+              togglingId={togglingId}
+            />
+          )}
+          {viewMode === "board" && (
+            <BoardView 
+              assignments={filteredAssignments}
+              onToggleComplete={handleToggleComplete}
+              togglingId={togglingId}
+            />
+          )}
+          {viewMode === "table" && (
+            <TableView 
+              assignments={filteredAssignments}
+              onToggleComplete={handleToggleComplete}
+              togglingId={togglingId}
+            />
+          )}
+        </FadeIn>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,51 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter, usePathname } from "next/navigation"
+import { useAuth } from "@/lib/auth"
+import { Loader2 } from "lucide-react"
+import { Sidebar } from "@/components/layout/Sidebar"
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const { token, isHydrated } = useAuth()
+  const [checked, setChecked] = useState(false)
+
+  useEffect(() => {
+    if (!isHydrated) return
+    
+    if (!token) {
+      router.push("/login")
+    } else {
+      setChecked(true)
+    }
+  }, [isHydrated, token, router])
+
+  if (!isHydrated || !checked) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <Loader2 className="w-8 h-8 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (!token) {
+    return null
+  }
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      <Sidebar />
+      <main className="flex-1 min-h-screen">
+        <div className="p-8 h-full">
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}
@@ -0,0 +1,286 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ILocation, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn } from "@/components/ui/animations"
+import { Plus, Search, Pencil, Trash2, Loader2, MapPin } from "lucide-react"
+import { toast } from "sonner"
+
+export default function LocationsPage() {
+  const { token } = useAuth()
+  const [locations, setLocations] = useState<ILocation[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingLocation, setEditingLocation] = useState<ILocation | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const [formData, setFormData] = useState({
+    name: "",
+    address: "",
+    is_active: true,
+  })
+
+  useEffect(() => {
+    if (token) {
+      fetchLocations()
+    }
+  }, [token])
+
+  const fetchLocations = async () => {
+    try {
+      const data = await apiFetch<PaginatedResponse<ILocation>>("/locations/", { token: token! })
+      setLocations(data.results || [])
+    } catch {
+      toast.error("Fehler beim Laden der Orte")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!token) return
+    setIsSaving(true)
+    try {
+      const payload = {
+        name: formData.name,
+        address: formData.address || "",
+        is_active: formData.is_active,
+      }
+
+      if (editingLocation) {
+        await apiFetch(`/locations/${editingLocation.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Ort aktualisiert")
+      } else {
+        await apiFetch("/locations/", {
+          method: "POST",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Ort erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingLocation(null)
+      setFormData({ name: "", address: "", is_active: true })
+      fetchLocations()
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = (location: ILocation) => {
+    setEditingLocation(location)
+    setFormData({
+      name: location.name,
+      address: location.address || "",
+      is_active: location.is_active,
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async (id: number) => {
+    setDeleteId(id)
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/locations/${id}/`, { method: "DELETE", token: token! })
+      toast.success("Ort gelöscht")
+      fetchLocations()
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+      setDeleteId(null)
+    }
+  }
+
+  const filteredLocations = locations.filter(l =>
+    l.name.toLowerCase().includes(search.toLowerCase()) ||
+    (l.address && l.address.toLowerCase().includes(search.toLowerCase()))
+  )
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Orte</h1>
+            <p className="text-sm text-muted-foreground">
+              {locations.length} Orte insgesamt
+            </p>
+          </div>
+          <Button onClick={() => {
+            setEditingLocation(null)
+            setFormData({ name: "", address: "", is_active: true })
+            setIsModalOpen(true)
+          }}>
+            <Plus className="w-4 h-4 mr-2" />
+            Ort hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Orte suchen..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.1}>
+        {filteredLocations.length === 0 ? (
+          <EmptyState
+            icon={MapPin}
+            title="Keine Orte gefunden"
+            description={search ? "Versuche einen anderen Suchbegriff" : "Erstelle deinen ersten Ort"}
+            action={{
+              label: "Ort hinzufügen",
+              onClick: () => {
+                setEditingLocation(null)
+                setFormData({ name: "", address: "", is_active: true })
+                setIsModalOpen(true)
+              }
+            }}
+          />
+        ) : (
+          <div className="border rounded-lg">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Adresse</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="w-[100px]">Aktionen</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredLocations.map((location) => (
+                  <TableRow key={location.id}>
+                    <TableCell className="font-medium">{location.name}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {location.address || "—"}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={location.is_active ? "default" : "secondary"}>
+                        {location.is_active ? "Aktiv" : "Inaktiv"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleEdit(location)}
+                        >
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive"
+                          onClick={() => handleDelete(location.id)}
+                          disabled={isDeleting && deleteId === location.id}
+                        >
+                          {isDeleting && deleteId === location.id ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                          ) : (
+                            <Trash2 className="w-4 h-4" />
+                          )}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </FadeIn>
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingLocation ? "Ort bearbeiten" : "Ort hinzufügen"}
+        description={editingLocation ? "Aktualisiere die Ortsdaten" : "Erstelle einen neuen Ort"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving || !formData.name}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingLocation ? "Aktualisieren" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name *</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="z.B. Sporthalle Mitte"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="address">Adresse</Label>
+            <Input
+              id="address"
+              value={formData.address}
+              onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+              placeholder="z.B. Musterstraße 123, 12345 Berlin"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="is_active"
+              checked={formData.is_active}
+              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              className="rounded border-gray-300"
+            />
+            <Label htmlFor="is_active" className="cursor-pointer">Aktiv</Label>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,169 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, IUser } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { FadeIn } from "@/components/ui/animations"
+import { User, Mail, Save, Loader2 } from "lucide-react"
+import { toast } from "sonner"
+
+export default function SettingsPage() {
+  const { token, user, setAuth } = useAuth()
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSaving, setIsSaving] = useState(false)
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    email: "",
+  })
+
+  useEffect(() => {
+    if (token && user) {
+      fetchUserData()
+    }
+  }, [token, user])
+
+  const fetchUserData = async () => {
+    try {
+      const data = await apiFetch<IUser>("/auth/me/", { token: token! })
+      setFormData({
+        first_name: data.first_name || "",
+        last_name: data.last_name || "",
+        email: data.email || "",
+      })
+    } catch {
+      toast.error("Fehler beim Laden der Benutzerdaten")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!token) return
+    setIsSaving(true)
+    try {
+      await apiFetch("/auth/me/", {
+        method: "PATCH",
+        token: token!,
+        body: JSON.stringify(formData),
+      })
+      toast.success("Profil aktualisiert")
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="space-y-1">
+          <h1 className="text-2xl font-bold tracking-tight">Einstellungen</h1>
+          <p className="text-muted-foreground">
+            Verwalte dein Profil und Kontoeinstellungen
+          </p>
+        </div>
+      </FadeIn>
+
+      <div className="grid gap-6 max-w-2xl">
+        <FadeIn delay={0.05}>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <User className="w-5 h-5" />
+                Profil
+              </CardTitle>
+              <CardDescription>
+                Aktualisiere deine persönlichen Daten
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor="first_name">Vorname</Label>
+                    <Input
+                      id="first_name"
+                      value={formData.first_name}
+                      onChange={(e) =>
+                        setFormData({ ...formData, first_name: e.target.value })
+                      }
+                      placeholder="Max"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="last_name">Nachname</Label>
+                    <Input
+                      id="last_name"
+                      value={formData.last_name}
+                      onChange={(e) =>
+                        setFormData({ ...formData, last_name: e.target.value })
+                      }
+                      placeholder="Mustermann"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="flex items-center gap-2">
+                    <Mail className="w-4 h-4" />
+                    E-Mail
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) =>
+                      setFormData({ ...formData, email: e.target.value })
+                    }
+                    placeholder="max@example.com"
+                  />
+                </div>
+
+                <div className="pt-4">
+                  <Button type="submit" disabled={isSaving}>
+                    {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+                    <Save className="w-4 h-4 mr-2" />
+                    Speichern
+                  </Button>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+        </FadeIn>
+
+        <FadeIn delay={0.1}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Kontoinformationen</CardTitle>
+              <CardDescription>
+                Übersicht über dein Konto
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex justify-between items-center py-2 border-b">
+                <span className="text-muted-foreground">Benutzername</span>
+                <span className="font-medium">{user?.username}</span>
+              </div>
+              <div className="flex justify-between items-center py-2">
+                <span className="text-muted-foreground">Club</span>
+                <span className="font-medium">{user?.club_name || "—"}</span>
+              </div>
+            </CardContent>
+          </Card>
+        </FadeIn>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,296 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITemplate, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn, CardHover } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Plus, Search, Pencil, Trash2, Loader2, FileText } from "lucide-react"
+import { toast } from "sonner"
+
+export default function TemplatesPage() {
+  const { token } = useAuth()
+  const [templates, setTemplates] = useState<ITemplate[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [search, setSearch] = useState("")
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingTemplate, setEditingTemplate] = useState<ITemplate | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+  })
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    fetchTemplates()
+  }, [token])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const fetchTemplates = async () => {
+    try {
+      const data = await apiFetch<PaginatedResponse<ITemplate>>("/templates/", { token: token! })
+      setTemplates(data.results || [])
+    } catch {
+      toast.error("Fehler beim Laden der Vorlagen")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    try {
+      const payload = {
+        name: formData.name,
+        description: formData.description || "",
+        exercises: [],
+      }
+
+      if (editingTemplate) {
+        await apiFetch(`/templates/${editingTemplate.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Vorlage aktualisiert")
+      } else {
+        await apiFetch("/templates/", {
+          method: "POST",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        toast.success("Vorlage erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingTemplate(null)
+      setFormData({ name: "", description: "" })
+      fetchTemplates()
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = (template: ITemplate) => {
+    setEditingTemplate(template)
+    setFormData({
+      name: template.name || "",
+      description: template.description || "",
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteId) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/templates/${deleteId}/`, { method: "DELETE", token: token! })
+      toast.success("Vorlage gelöscht")
+      setDeleteId(null)
+      fetchTemplates()
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const filteredTemplates = templates.filter((t) =>
+    (t.name || "").toLowerCase().includes(search.toLowerCase())
+  )
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Vorlagen</h1>
+            <p className="text-sm text-muted-foreground">
+              {templates.length} {templates.length === 1 ? "Vorlage" : "Vorlagen"}
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              setEditingTemplate(null)
+              setFormData({ name: "", description: "" })
+              setIsModalOpen(true)
+            }}
+            className="transition-all duration-200 hover:shadow-md"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Vorlage hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Vorlagen suchen..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 max-w-sm transition-all duration-200 focus:shadow-sm"
+          />
+        </div>
+      </FadeIn>
+
+      {filteredTemplates.length === 0 ? (
+        <FadeIn delay={0.1}>
+          <EmptyState
+            icon={FileText}
+            title="Keine Vorlagen gefunden"
+            description={search ? "Versuche einen anderen Suchbegriff" : "Erstelle deine erste Vorlage"}
+            action={
+              !search
+                ? {
+                    label: "Vorlage hinzufügen",
+                    onClick: () => {
+                      setEditingTemplate(null)
+                      setFormData({ name: "", description: "" })
+                      setIsModalOpen(true)
+                    },
+                  }
+                : undefined
+            }
+          />
+        </FadeIn>
+      ) : (
+        <FadeIn delay={0.1}>
+          <CardHover>
+            <div className="border rounded-xl overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead className="font-medium">Name</TableHead>
+                  <TableHead className="font-medium">Beschreibung</TableHead>
+                  <TableHead className="text-right font-medium">Aktionen</TableHead>
+                </TableRow>
+              </TableHeader>
+                <TableBody>
+                  {filteredTemplates.map((template, index) => (
+                    <motion.tr
+                      key={template.id}
+                      className="border-t"
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                      whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+                    >
+                      <TableCell className="font-medium">{template.name || "-"}</TableCell>
+                      <TableCell>{template.description || "-"}</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleEdit(template)}
+                            className="hover:bg-muted transition-colors"
+                          >
+                            <Pencil className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setDeleteId(template.id)}
+                            className="hover:bg-destructive/10 hover:text-destructive transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </motion.tr>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardHover>
+        </FadeIn>
+      )}
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingTemplate ? "Vorlage bearbeiten" : "Neue Vorlage erstellen"}
+        description={editingTemplate ? "Bearbeite die Daten der Vorlage" : "Fülle alle erforderlichen Felder aus"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingTemplate ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description">Beschreibung</Label>
+            <textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full h-24 px-3 py-2 border rounded-lg bg-background resize-none transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Vorlage löschen"
+        description="Bist du sicher, dass du diese Vorlage löschen möchtest?"
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,633 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITrainer, IClub, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Plus, Pencil, Trash2, Loader2, UserCog, RotateCcw, Filter } from "lucide-react"
+import { toast } from "sonner"
+import { Pagination } from "@/components/ui/pagination"
+
+const PAGE_SIZE = 15
+
+const DEFAULT_FILTERS = {
+  search: "",
+  club: "all",
+  status: "all",
+}
+
+function TrainerTable({
+  filters,
+  token,
+  onEdit,
+  onDelete,
+  refreshTrigger,
+}: {
+  filters: typeof DEFAULT_FILTERS
+  token: string | null
+  onEdit: (trainer: ITrainer) => void
+  onDelete: (id: number) => void
+  refreshTrigger?: number
+}) {
+  const [trainers, setTrainers] = useState<ITrainer[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isTableLoading, setIsTableLoading] = useState(false)
+  const [currentPage, setCurrentPage] = useState(1)
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE)
+
+  const fetchTrainers = useCallback(async (f: typeof DEFAULT_FILTERS, page: number) => {
+    if (!token) return
+    setIsTableLoading(true)
+    try {
+      const params = new URLSearchParams()
+      params.set("page", page.toString())
+      params.set("page_size", PAGE_SIZE.toString())
+      if (f.search) params.set("search", f.search)
+      if (f.club !== "all") params.set("club", f.club)
+      if (f.status === "active") params.set("is_active", "true")
+      else if (f.status === "inactive") params.set("is_active", "false")
+
+      const data = await apiFetch<PaginatedResponse<ITrainer>>(`/trainers/?${params.toString()}`, { token })
+      setTrainers(data.results || [])
+      setTotalCount(data.count || 0)
+    } catch {
+      toast.error("Fehler beim Laden der Trainer")
+    } finally {
+      setIsTableLoading(false)
+    }
+  }, [token])
+
+  useEffect(() => {
+    fetchTrainers(filters, 1)
+  }, [filters, fetchTrainers])
+
+  useEffect(() => {
+    if (refreshTrigger && refreshTrigger > 0) {
+      fetchTrainers(filters, currentPage)
+    }
+  }, [refreshTrigger])
+
+  if (isTableLoading) {
+    return (
+      <div className="border rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="font-medium w-12">Foto</TableHead>
+              <TableHead className="font-medium">Name</TableHead>
+              <TableHead className="font-medium">Club</TableHead>
+              <TableHead className="font-medium">E-Mail</TableHead>
+              <TableHead className="font-medium">Status</TableHead>
+              <TableHead className="text-right font-medium">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: 5 }).map((_, i) => (
+              <TableRow key={i} className="animate-pulse">
+                <TableCell><div className="w-8 h-8 bg-muted rounded-full" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-32" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-24" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-32" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-16" /></TableCell>
+                <TableCell><div className="h-4 bg-muted rounded w-16 ml-auto" /></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+
+  if (trainers.length === 0) {
+    return (
+      <EmptyState
+        icon={UserCog}
+        title="Keine Trainer gefunden"
+        description={filters.search ? "Versuche einen anderen Suchbegriff" : "Füge deinen ersten Trainer hinzu"}
+        action={{
+          label: "Trainer hinzufügen",
+          onClick: () => {},
+        }}
+      />
+    )
+  }
+
+  return (
+    <>
+      <div className="border rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="font-medium w-12">Foto</TableHead>
+              <TableHead className="font-medium">Name</TableHead>
+              <TableHead className="font-medium">Club</TableHead>
+              <TableHead className="font-medium">E-Mail</TableHead>
+              <TableHead className="font-medium">Status</TableHead>
+              <TableHead className="text-right font-medium">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {trainers.map((trainer, index) => (
+              <motion.tr
+                key={trainer.id}
+                className="border-t"
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+              >
+                <TableCell>
+                  <Avatar size="sm">
+                    {trainer.photo ? (
+                      <AvatarImage src={trainer.photo} alt={`${trainer.first_name} ${trainer.last_name}`} />
+                    ) : (
+                      <AvatarFallback className="bg-secondary text-secondary-foreground">
+                        {trainer.first_name?.[0]}{trainer.last_name?.[0]}
+                      </AvatarFallback>
+                    )}
+                  </Avatar>
+                </TableCell>
+                <TableCell className="font-medium">
+                  {trainer.first_name} {trainer.last_name}
+                </TableCell>
+                <TableCell className="text-muted-foreground text-sm">{trainer.club_name || "-"}</TableCell>
+                <TableCell>{trainer.email || "-"}</TableCell>
+                <TableCell>
+                  <span className={`text-xs px-2 py-1 rounded-full ${trainer.is_active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}>
+                    {trainer.is_active ? "Aktiv" : "Inaktiv"}
+                  </span>
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onEdit(trainer)}
+                      className="hover:bg-muted transition-colors"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onDelete(trainer.id)}
+                      className="hover:bg-destructive/10 hover:text-destructive transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </motion.tr>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={PAGE_SIZE}
+          onPageChange={(page) => {
+            setCurrentPage(page)
+            fetchTrainers(filters, page)
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default function TrainersPage() {
+  const { token } = useAuth()
+  const [clubs, setClubs] = useState<IClub[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingTrainer, setEditingTrainer] = useState<ITrainer | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [photoPreview, setPhotoPreview] = useState<string | null>(null)
+  const [photoFile, setPhotoFile] = useState<File | null>(null)
+
+  const [filters, setFilters] = useState(DEFAULT_FILTERS)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [trainerRefresh, setTrainerRefresh] = useState(0)
+  const hasActiveFilters = filters.search !== "" || filters.club !== "all" || filters.status !== "all"
+
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    club: null as number | null,
+    email: "",
+    phone: "",
+    is_active: true,
+  })
+
+  const fetchClubs = useCallback(async () => {
+    if (!token) return
+    try {
+      const data = await apiFetch<PaginatedResponse<IClub>>("/clubs/", { token })
+      setClubs(data.results || [])
+    } catch {
+      console.error("Failed to fetch clubs")
+    }
+  }, [token])
+
+  const fetchPreferences = useCallback(async () => {
+    if (!token) return
+    try {
+      const prefs = await apiFetch<{trainers_filters: Record<string, string>}>(`/auth/preferences/`, { token })
+      const savedFilters = prefs.trainers_filters || {}
+      setFilters({
+        search: savedFilters.search || "",
+        club: savedFilters.club || "all",
+        status: savedFilters.status || "all",
+      })
+    } catch {
+      console.error("Failed to fetch preferences")
+    }
+  }, [token])
+
+  const savePreferences = useCallback(async (newFilters: typeof DEFAULT_FILTERS) => {
+    if (!token) return
+    try {
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify({ trainers_filters: newFilters }),
+      })
+    } catch {
+      console.error("Failed to save preferences")
+    }
+  }, [token])
+
+  const fetchTotalCount = useCallback(async (f: typeof DEFAULT_FILTERS) => {
+    if (!token) return
+    try {
+      const params = new URLSearchParams()
+      params.set("page", "1")
+      params.set("page_size", "1")
+      if (f.search) params.set("search", f.search)
+      if (f.club !== "all") params.set("club", f.club)
+      if (f.status === "active") params.set("is_active", "true")
+      else if (f.status === "inactive") params.set("is_active", "false")
+
+      const data = await apiFetch<PaginatedResponse<ITrainer>>(`/trainers/?${params.toString()}`, { token })
+      setTotalCount(data.count || 0)
+    } catch {
+    }
+  }, [token])
+
+  useEffect(() => {
+    fetchClubs()
+    fetchPreferences()
+  }, [fetchClubs, fetchPreferences])
+
+  useEffect(() => {
+    fetchTotalCount(filters)
+  }, [filters, fetchTotalCount])
+
+  useEffect(() => {
+    if (clubs.length > 0 || !token) {
+      setIsLoading(false)
+    }
+  }, [clubs, token])
+
+  const handleFilterChange = (key: keyof typeof DEFAULT_FILTERS, value: string) => {
+    const newFilters = { ...filters, [key]: value }
+    setFilters(newFilters)
+    savePreferences(newFilters)
+    fetchTotalCount(newFilters)
+  }
+
+  const handleResetFilters = () => {
+    const resetFilters = { search: "", club: "all", status: "all" }
+    setFilters(resetFilters)
+    savePreferences(resetFilters)
+    fetchTotalCount(resetFilters)
+  }
+
+  const handleEdit = (trainer: ITrainer) => {
+    setEditingTrainer(trainer)
+    setFormData({
+      first_name: trainer.first_name,
+      last_name: trainer.last_name,
+      club: trainer.club,
+      email: trainer.email || "",
+      phone: trainer.phone || "",
+      is_active: trainer.is_active,
+    })
+    setPhotoPreview(trainer.photo || null)
+    setPhotoFile(null)
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = (id: number) => {
+    setDeleteId(id)
+  }
+
+  const confirmDelete = async () => {
+    if (!deleteId) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/trainers/${deleteId}/`, { method: "DELETE", token: token! })
+      toast.success("Trainer gelöscht")
+      setDeleteId(null)
+      fetchTotalCount(filters)
+      setTrainerRefresh(prev => prev + 1)
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    try {
+      const payload = new FormData()
+      payload.append("first_name", formData.first_name)
+      payload.append("last_name", formData.last_name)
+      payload.append("email", formData.email)
+      payload.append("phone", formData.phone)
+      payload.append("is_active", String(formData.is_active))
+      if (formData.club) {
+        payload.append("club", String(formData.club))
+      }
+      if (photoFile) {
+        payload.append("photo", photoFile)
+      }
+
+      if (editingTrainer) {
+        await apiFetch(`/trainers/${editingTrainer.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: payload,
+          headers: {},
+        })
+        toast.success("Trainer aktualisiert")
+      } else {
+        await apiFetch("/trainers/", {
+          method: "POST",
+          token: token!,
+          body: payload,
+          headers: {},
+        })
+        toast.success("Trainer erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingTrainer(null)
+      setPhotoPreview(null)
+      setPhotoFile(null)
+      setFormData({ first_name: "", last_name: "", club: null, email: "", phone: "", is_active: true })
+      fetchTotalCount(filters)
+      setTrainerRefresh(prev => prev + 1)
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      toast.error(`Fehler beim Speichern: ${errorMessage}`)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Trainer</h1>
+            <p className="text-sm text-muted-foreground">
+              {totalCount} Trainer insgesamt
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              setEditingTrainer(null)
+              setFormData({ first_name: "", last_name: "", club: clubs[0]?.id || null, email: "", phone: "", is_active: true })
+              setPhotoPreview(null)
+              setPhotoFile(null)
+              setIsModalOpen(true)
+            }}
+            className="transition-all duration-200 hover:shadow-md"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Trainer hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Filter className="w-4 h-4" />
+            <span>Filter:</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Input
+              type="text"
+              placeholder="Suchen..."
+              value={filters.search}
+              onChange={(e) => handleFilterChange("search", e.target.value)}
+              className="h-9 w-[180px] text-sm"
+            />
+          </div>
+
+          <Select value={filters.club} onValueChange={(v) => handleFilterChange("club", v || "all")}>
+            <SelectTrigger className="h-9 w-[160px]">
+              <SelectValue>{clubs.find(c => String(c.id) === filters.club)?.name || "Club"}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              {clubs.map((club) => (
+                <SelectItem key={club.id} value={String(club.id)}>
+                  {club.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select value={filters.status} onValueChange={(v) => handleFilterChange("status", v || "all")}>
+            <SelectTrigger className="h-9 w-[140px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              <SelectItem value="active">Aktiv</SelectItem>
+              <SelectItem value="inactive">Inaktiv</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {hasActiveFilters && (
+            <Button variant="ghost" size="sm" onClick={handleResetFilters} className="h-9 text-muted-foreground hover:text-foreground">
+              <RotateCcw className="w-4 h-4 mr-1" />
+              Zurücksetzen
+            </Button>
+          )}
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.1}>
+        <TrainerTable
+          filters={filters}
+          token={token}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          refreshTrigger={trainerRefresh}
+        />
+      </FadeIn>
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingTrainer ? "Trainer bearbeiten" : "Neuen Trainer erstellen"}
+        description={editingTrainer ? "Bearbeite die Daten des Trainers" : "Fülle alle erforderlichen Felder aus"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingTrainer ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="first_name">Vorname</Label>
+              <Input
+                id="first_name"
+                value={formData.first_name}
+                onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                required
+                className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="last_name">Nachname</Label>
+              <Input
+                id="last_name"
+                value={formData.last_name}
+                onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                required
+                className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="club">Club</Label>
+            <select
+              id="club"
+              value={formData.club || ""}
+              onChange={(e) => setFormData({ ...formData, club: e.target.value ? Number(e.target.value) : null })}
+              required
+              className="w-full h-10 px-3 border rounded-lg bg-background transition-all duration-200 focus:ring-2 focus:ring-ring"
+            >
+              <option value="">Club wählen...</option>
+              {clubs.map((club) => (
+                <option key={club.id} value={club.id}>{club.name}</option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">E-Mail</Label>
+            <Input
+              id="email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="phone">Telefon</Label>
+            <Input
+              id="phone"
+              value={formData.phone}
+              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="photo">Foto</Label>
+            <Input
+              id="photo"
+              type="file"
+              accept="image/*"
+              onChange={(e) => {
+                const file = e.target.files?.[0]
+                if (file) {
+                  setPhotoFile(file)
+                  setPhotoPreview(URL.createObjectURL(file))
+                }
+              }}
+              className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+            {photoPreview && (
+              <img src={photoPreview} alt="Preview" className="mt-2 w-20 h-20 object-cover rounded-lg" />
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="is_active" className="flex items-center gap-2">
+              <input
+                id="is_active"
+                type="checkbox"
+                checked={formData.is_active}
+                onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+                className="w-4 h-4 rounded border-input"
+              />
+              Aktiv
+            </Label>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Trainer löschen"
+        description="Bist du sicher, dass du diesen Trainer löschen möchtest?"
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,450 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITrainingLogEntry, ITrainingLogStats, IWrestler, IExercise, ITraining, PaginatedResponse } from "@/lib/api"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { FadeIn, StaggeredList, listItemVariants, CardHover } from "@/components/ui/animations"
+import { motion, AnimatePresence } from "framer-motion"
+import { ClipboardList, History, BarChart3, Star, Loader2, TrendingUp } from "lucide-react"
+import { toast } from "sonner"
+
+type TabType = "log" | "historie" | "analyse"
+
+export default function TrainingLogPage() {
+  const { token } = useAuth()
+  const [activeTab, setActiveTab] = useState<TabType>("log")
+  const [isLoading, setIsLoading] = useState(true)
+  
+  const [entries, setEntries] = useState<ITrainingLogEntry[]>([])
+  const [stats, setStats] = useState<ITrainingLogStats | null>(null)
+  const [wrestlers, setWrestlers] = useState<IWrestler[]>([])
+  const [exercises, setExercises] = useState<IExercise[]>([])
+  const [trainings, setTrainings] = useState<ITraining[]>([])
+  
+  const [filterWrestler, setFilterWrestler] = useState<string>("")
+  const [filterExercise, setFilterExercise] = useState<string>("")
+  
+  const [formData, setFormData] = useState({
+    wrestler: "",
+    training: "",
+    exercise: "",
+    reps: "",
+    sets: "1",
+    time_minutes: "",
+    weight_kg: "",
+    rating: "3",
+    notes: ""
+  })
+  const [isSaving, setIsSaving] = useState(false)
+
+  useEffect(() => {
+    if (!token) return
+    fetchData()
+  }, [token])
+
+  const fetchData = async () => {
+    setIsLoading(true)
+    try {
+      const [entriesRes, wrestlersRes, exercisesRes, trainingsRes, statsRes] = await Promise.all([
+        apiFetch<PaginatedResponse<ITrainingLogEntry>>("/training-log/", { token: token || undefined }),
+        apiFetch<PaginatedResponse<IWrestler>>("/wrestlers/?page_size=100", { token: token || undefined }),
+        apiFetch<PaginatedResponse<IExercise>>("/exercises/?page_size=100", { token: token || undefined }),
+        apiFetch<PaginatedResponse<ITraining>>("/trainings/?page_size=100", { token: token || undefined }),
+        apiFetch<ITrainingLogStats>("/training-log/stats/", { token: token || undefined }),
+      ])
+      setEntries(entriesRes.results || [])
+      setWrestlers(wrestlersRes.results || [])
+      setExercises(exercisesRes.results || [])
+      setTrainings(trainingsRes.results || [])
+      setStats(statsRes)
+    } catch (err) {
+      console.error("Failed to fetch data:", err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!formData.wrestler || !formData.exercise || !formData.reps) return
+    
+    setIsSaving(true)
+    try {
+      await apiFetch("/training-log/", {
+        method: "POST",
+        token: token!,
+        body: JSON.stringify({
+          wrestler: parseInt(formData.wrestler),
+          training: formData.training ? parseInt(formData.training) : null,
+          exercise: parseInt(formData.exercise),
+          reps: parseInt(formData.reps),
+          sets: parseInt(formData.sets) || 1,
+          time_minutes: formData.time_minutes ? parseInt(formData.time_minutes) : null,
+          weight_kg: formData.weight_kg ? parseFloat(formData.weight_kg) : null,
+          rating: parseInt(formData.rating),
+          notes: formData.notes,
+        }),
+      })
+      toast.success("Eintrag gespeichert")
+      setFormData({ wrestler: "", training: "", exercise: "", reps: "", sets: "1", time_minutes: "", weight_kg: "", rating: "3", notes: "" })
+      fetchData()
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const filteredEntries = entries.filter(e => {
+    if (filterWrestler && e.wrestler !== parseInt(filterWrestler)) return false
+    if (filterExercise && e.exercise !== parseInt(filterExercise)) return false
+    return true
+  })
+
+  const tabs = [
+    { id: "log" as TabType, label: "Log", icon: ClipboardList },
+    { id: "historie" as TabType, label: "Historie", icon: History },
+    { id: "analyse" as TabType, label: "Analyse", icon: BarChart3 },
+  ]
+
+  if (isLoading) return <PageSkeleton />
+
+  return (
+    <div className="space-y-6">
+      <FadeIn>
+        <h1 className="text-2xl font-bold">Training Log</h1>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex gap-1 border-b pb-2 bg-muted/30 p-1 rounded-lg w-fit">
+          {tabs.map(tab => (
+            <motion.button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors relative ${
+                activeTab === tab.id
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+              whileTap={{ scale: 0.98 }}
+            >
+              <tab.icon className="w-4 h-4" />
+              {tab.label}
+              {activeTab === tab.id && (
+                <motion.div
+                  className="absolute inset-0 bg-muted/30 rounded-md -z-10"
+                  layoutId="activeTabBg"
+                  transition={{ duration: 0.2 }}
+                />
+              )}
+            </motion.button>
+          ))}
+        </div>
+      </FadeIn>
+
+      <AnimatePresence mode="wait">
+        {activeTab === "log" && (
+          <motion.div
+            key="log"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+          >
+            <CardHover>
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-base">Neuer Eintrag</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <form onSubmit={handleSubmit} className="grid gap-4 md:grid-cols-2">
+                    <div>
+                      <label className="text-sm font-medium mb-1 block">Ringer *</label>
+                      <Select value={formData.wrestler} onValueChange={v => setFormData({...formData, wrestler: v || ""})}>
+                        <SelectTrigger>
+                          <SelectValue>
+                            {formData.wrestler ? wrestlers.find(w => w.id === parseInt(formData.wrestler))?.first_name + " " + wrestlers.find(w => w.id === parseInt(formData.wrestler))?.last_name || formData.wrestler : "Ringer wählen"}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wrestlers.map(w => (
+                            <SelectItem key={w.id} value={String(w.id)}>{w.first_name} {w.last_name}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-1 block">Training</label>
+                      <Select value={formData.training} onValueChange={v => setFormData({...formData, training: v || ""})}>
+                        <SelectTrigger>
+                          <SelectValue>
+                            {formData.training ? trainings.find(t => t.id === parseInt(formData.training)) ? new Date(trainings.find(t => t.id === parseInt(formData.training))!.date).toLocaleDateString("de-DE") : formData.training : "Training (optional)"}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          {trainings.map(t => (
+                            <SelectItem key={t.id} value={String(t.id)}>
+                              {new Date(t.date).toLocaleDateString("de-DE")}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-1 block">Übung *</label>
+                      <Select value={formData.exercise} onValueChange={v => setFormData({...formData, exercise: v || ""})}>
+                        <SelectTrigger>
+                          <SelectValue>
+                            {formData.exercise ? exercises.find(e => e.id === parseInt(formData.exercise))?.name || formData.exercise : "Übung wählen"}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          {exercises.map(e => (
+                            <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Reps *</label>
+                        <Input type="number" value={formData.reps} onChange={e => setFormData({...formData, reps: e.target.value})} />
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Sets</label>
+                        <Input type="number" value={formData.sets} onChange={e => setFormData({...formData, sets: e.target.value})} />
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Zeit (min)</label>
+                        <Input type="number" value={formData.time_minutes} onChange={e => setFormData({...formData, time_minutes: e.target.value})} />
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-1 block">Gewicht (kg)</label>
+                      <Input type="number" step="0.5" value={formData.weight_kg} onChange={e => setFormData({...formData, weight_kg: e.target.value})} />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-1 block">Bewertung</label>
+                      <div className="flex gap-1">
+                        {[1,2,3,4,5].map(star => (
+                          <motion.button
+                            key={star}
+                            type="button"
+                            onClick={() => setFormData({...formData, rating: String(star)})}
+                            whileHover={{ scale: 1.2 }}
+                            whileTap={{ scale: 0.9 }}
+                          >
+                            <Star className={`w-5 h-5 transition-colors ${star <= parseInt(formData.rating) ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} />
+                          </motion.button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="md:col-span-2">
+                      <label className="text-sm font-medium mb-1 block">Notizen</label>
+                      <Textarea value={formData.notes} onChange={e => setFormData({...formData, notes: e.target.value})} />
+                    </div>
+                    <div className="md:col-span-2">
+                      <motion.button
+                        type="submit"
+                        disabled={isSaving || !formData.wrestler || !formData.exercise || !formData.reps}
+                        className="px-6 py-2 bg-primary text-primary-foreground rounded-md font-medium disabled:opacity-50"
+                        whileHover={{ scale: 1.01 }}
+                        whileTap={{ scale: 0.99 }}
+                      >
+                        {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin inline" />}
+                        Speichern
+                      </motion.button>
+                    </div>
+                  </form>
+                </CardContent>
+              </Card>
+            </CardHover>
+          </motion.div>
+        )}
+
+        {activeTab === "historie" && (
+          <motion.div
+            key="historie"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Eintragsverlauf</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex gap-4 flex-wrap">
+                  <Select value={filterWrestler} onValueChange={v => setFilterWrestler(v || "")}>
+                    <SelectTrigger className="w-[160px]">
+                      <SelectValue>
+                        {filterWrestler ? wrestlers.find(w => w.id === parseInt(filterWrestler))?.first_name + " " + wrestlers.find(w => w.id === parseInt(filterWrestler))?.last_name || filterWrestler : "Ringer"}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">Alle</SelectItem>
+                      {wrestlers.map(w => (
+                        <SelectItem key={w.id} value={String(w.id)}>{w.first_name} {w.last_name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Select value={filterExercise} onValueChange={v => setFilterExercise(v || "")}>
+                    <SelectTrigger className="w-[160px]">
+                      <SelectValue>
+                        {filterExercise ? exercises.find(e => e.id === parseInt(filterExercise))?.name || filterExercise : "Übung"}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">Alle</SelectItem>
+                      {exercises.map(e => (
+                        <SelectItem key={e.id} value={String(e.id)}>{e.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <StaggeredList staggerDelay={0.03} className="border rounded-lg overflow-hidden">
+                  <table className="w-full text-sm">
+                    <thead className="bg-muted/50">
+                      <tr>
+                        <th className="p-3 text-left font-medium">Datum</th>
+                        <th className="p-3 text-left font-medium">Ringer</th>
+                        <th className="p-3 text-left font-medium">Übung</th>
+                        <th className="p-3 text-left font-medium">Reps×Sets</th>
+                        <th className="p-3 text-left font-medium">Zeit</th>
+                        <th className="p-3 text-left font-medium">Gewicht</th>
+                        <th className="p-3 text-left font-medium">Bewertung</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredEntries.length === 0 ? (
+                        <tr>
+                          <td colSpan={7} className="p-4 text-center text-muted-foreground">Keine Einträge vorhanden</td>
+                        </tr>
+                      ) : (
+                        filteredEntries.map((entry, index) => (
+                          <motion.tr
+                            key={entry.id}
+                            className="border-t"
+                            initial={{ opacity: 0, y: 8 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                            whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+                          >
+                            <td className="p-3">{new Date(entry.logged_at).toLocaleDateString("de-DE")}</td>
+                            <td className="p-3">{entry.wrestler_name}</td>
+                            <td className="p-3">{entry.exercise_name}</td>
+                            <td className="p-3">{entry.reps}×{entry.sets}</td>
+                            <td className="p-3">{entry.time_minutes ? `${entry.time_minutes}min` : "-"}</td>
+                            <td className="p-3">{entry.weight_kg ? `${entry.weight_kg}kg` : "-"}</td>
+                            <td className="p-3">
+                              <div className="flex gap-0.5">
+                                {[1,2,3,4,5].map(s => (
+                                  <Star key={s} className={`w-3 h-3 ${s <= entry.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`} />
+                                ))}
+                              </div>
+                            </td>
+                          </motion.tr>
+                        ))
+                      )}
+                    </tbody>
+                  </table>
+                </StaggeredList>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+
+        {activeTab === "analyse" && stats && (
+          <motion.div
+            key="analyse"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="grid gap-6 md:grid-cols-2">
+              <CardHover>
+                <Card>
+                  <CardHeader><CardTitle className="text-base">Zusammenfassung</CardTitle></CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="flex justify-between"><span className="text-muted-foreground">Gesamt:</span><span className="font-medium">{stats.total_entries}</span></div>
+                    <div className="flex justify-between"><span className="text-muted-foreground">Übungen:</span><span className="font-medium">{stats.unique_exercises}</span></div>
+                    <div className="flex justify-between"><span className="text-muted-foreground">Wiederholungen:</span><span className="font-medium">{stats.total_reps}</span></div>
+                    <div className="flex justify-between"><span className="text-muted-foreground">Ø Sätze:</span><span className="font-medium">{stats.avg_sets}</span></div>
+                    <div className="flex justify-between"><span className="text-muted-foreground">Ø Bewertung:</span><span className="font-medium">{stats.avg_rating}/5</span></div>
+                    <div className="flex justify-between"><span className="text-muted-foreground">Diese Woche:</span><span className="font-medium">{stats.this_week}</span></div>
+                  </CardContent>
+                </Card>
+              </CardHover>
+              <CardHover>
+                <Card>
+                  <CardHeader><CardTitle className="text-base">Top Übungen</CardTitle></CardHeader>
+                  <CardContent className="space-y-2">
+                    {stats.top_exercises.length === 0 ? (
+                      <p className="text-sm text-muted-foreground">Keine Daten</p>
+                    ) : (
+                      <StaggeredList staggerDelay={0.05} className="space-y-2">
+                        {stats.top_exercises.map((ex, i) => (
+                          <motion.div key={i} variants={listItemVariants} className="flex items-center gap-2">
+                            <span className="text-sm text-muted-foreground w-4">{i+1}.</span>
+                            <span className="flex-1 text-sm">{ex.name}</span>
+                            <Badge variant="secondary">{ex.count}x</Badge>
+                          </motion.div>
+                        ))}
+                      </StaggeredList>
+                    )}
+                  </CardContent>
+                </Card>
+              </CardHover>
+              {Object.keys(stats.progress).length > 0 && (
+                <CardHover className="md:col-span-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-base flex items-center gap-2">
+                        <TrendingUp className="w-4 h-4" />
+                        Fortschritt
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <StaggeredList staggerDelay={0.05} className="grid gap-4 md:grid-cols-2">
+                        {Object.entries(stats.progress).slice(0, 6).map(([name, data]) => (
+                          <motion.div key={name} variants={listItemVariants} className="space-y-2 p-3 border rounded-lg">
+                            <div className="flex justify-between text-sm">
+                              <span>{name}</span>
+                              <span className={data.change_percent >= 0 ? "text-green-600" : "text-red-600"}>
+                                {data.change_percent >= 0 ? "+" : ""}{data.change_percent}%
+                              </span>
+                            </div>
+                            <div className="h-2 bg-muted rounded-full overflow-hidden">
+                              <motion.div
+                                className={`h-full ${data.change_percent >= 0 ? "bg-green-500" : "bg-red-500"} rounded-full`}
+                                initial={{ width: 0 }}
+                                animate={{ width: `${Math.min(Math.abs(data.change_percent), 100)}%` }}
+                                transition={{ duration: 0.5, delay: 0.2 }}
+                              />
+                            </div>
+                            <div className="flex justify-between text-xs text-muted-foreground">
+                              <span>Vorher: {data.before}</span>
+                              <span>Nachher: {data.after}</span>
+                            </div>
+                          </motion.div>
+                        ))}
+                      </StaggeredList>
+                    </CardContent>
+                  </Card>
+                </CardHover>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
@@ -0,0 +1,724 @@
+"use client"
+
+import { useEffect, useState, useCallback, Suspense } from "react"
+import { useRouter } from "next/navigation"
+import { format } from "date-fns"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITraining, ITrainer, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn } from "@/components/ui/animations"
+import { CalendarView } from "@/components/ui/calendar-view"
+import { Pagination } from "@/components/ui/pagination"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { 
+  Plus, Pencil, Trash2, Loader2, Calendar, Users, Eye, 
+  Clock, MapPin, LayoutGrid, List, RotateCcw
+} from "lucide-react"
+import { toast } from "sonner"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary border-primary/20" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary border-secondary/20" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent border-accent/20" },
+  all: { label: "Alle", class: "bg-muted text-muted-foreground" },
+}
+
+const PAGE_SIZE = 12
+
+const DEFAULT_FILTERS = {
+  group: "all",
+  date_from: "",
+  date_to: "",
+}
+
+function TrainingsContent() {
+  const router = useRouter()
+  const { token } = useAuth()
+  
+  const [trainings, setTrainings] = useState<ITraining[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingTraining, setEditingTraining] = useState<ITraining | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [viewMode, setViewMode] = useState<"grid" | "list" | "calendar">("calendar")
+  const [groupedTrainings, setGroupedTrainings] = useState<{ [key: string]: ITraining[] }>({})
+
+  const [availableTrainers, setAvailableTrainers] = useState<ITrainer[]>([])
+
+  const [formData, setFormData] = useState({
+    date: "",
+    start_time: "",
+    end_time: "",
+    group: "all" as "kids" | "youth" | "adults" | "all",
+    notes: "",
+    selected_trainers: [] as number[],
+  })
+
+  const [filters, setFilters] = useState(DEFAULT_FILTERS)
+  const [currentPage, setCurrentPage] = useState(1)
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE)
+
+  const fetchPreferences = useCallback(async () => {
+    if (!token) return
+    try {
+      const prefs = await apiFetch<{trainings_view?: string; trainings_filters: Record<string, string>}>(`/auth/preferences/`, { token })
+      const savedFilters = prefs.trainings_filters || {}
+      setFilters({
+        group: savedFilters.group || "all",
+        date_from: savedFilters.date_from || "",
+        date_to: savedFilters.date_to || "",
+      })
+      if (prefs.trainings_view) {
+        setViewMode(prefs.trainings_view as "grid" | "list" | "calendar")
+      }
+    } catch {
+      console.error("Failed to fetch preferences")
+    }
+  }, [token])
+
+  const savePreferences = useCallback(async (newFilters: typeof DEFAULT_FILTERS) => {
+    if (!token) return
+    try {
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify({ trainings_filters: newFilters }),
+      })
+    } catch {
+      console.error("Failed to save preferences")
+    }
+  }, [token])
+
+  const saveViewPreference = useCallback(async (view: "grid" | "list" | "calendar") => {
+    if (!token) return
+    try {
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify({ trainings_view: view }),
+      })
+    } catch {
+      console.error("Failed to save view preference")
+    }
+  }, [token])
+
+  const handleFilterChange = (key: keyof typeof DEFAULT_FILTERS, value: string) => {
+    const newFilters = { ...filters, [key]: value }
+    setFilters(newFilters)
+    savePreferences(newFilters)
+    fetchTrainings(newFilters, 1)
+  }
+
+  const handleViewChange = (view: "grid" | "list" | "calendar") => {
+    setViewMode(view)
+    saveViewPreference(view)
+  }
+
+  const handleResetFilters = () => {
+    setFilters(DEFAULT_FILTERS)
+    savePreferences(DEFAULT_FILTERS)
+    fetchTrainings(DEFAULT_FILTERS, 1)
+  }
+
+  const fetchTrainings = async (f: typeof DEFAULT_FILTERS = filters, page: number = 1) => {
+    if (!token) return
+    setIsLoading(true)
+    try {
+      const params = new URLSearchParams()
+      params.set("page", page.toString())
+      params.set("page_size", PAGE_SIZE.toString())
+      
+      if (f.group !== "all") params.set("group", f.group)
+      if (f.date_from) params.set("date_from", f.date_from)
+      if (f.date_to) params.set("date_to", f.date_to)
+      
+      const data = await apiFetch<PaginatedResponse<ITraining>>(`/trainings/?${params.toString()}`, { token: token! })
+      setTrainings(data.results || [])
+      setTotalCount(data.count || 0)
+    } catch {
+      toast.error("Fehler beim Laden der Trainingseinheiten")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    fetchPreferences()
+  }, [token])
+
+  useEffect(() => {
+    fetchTrainings()
+  }, [token])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  // Group trainings by date when in list view
+  useEffect(() => {
+    const grouped: { [key: string]: ITraining[] } = {}
+    trainings.forEach(training => {
+      const dateKey = training.date
+      if (!grouped[dateKey]) grouped[dateKey] = []
+      grouped[dateKey].push(training)
+    })
+    setGroupedTrainings(grouped)
+  }, [trainings])
+
+  const fetchAvailablePeople = async () => {
+    try {
+      const trainersRes = await apiFetch<PaginatedResponse<ITrainer>>("/trainers/available_for_training/", { token: token! })
+      setAvailableTrainers(trainersRes.results || [])
+    } catch (err) {
+      console.error("Failed to fetch trainers:", err)
+    }
+  }
+
+  useEffect(() => {
+    if (isModalOpen) {
+      fetchAvailablePeople()
+    }
+  }, [isModalOpen, token])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    try {
+      const payload = {
+        date: formData.date,
+        start_time: formData.start_time,
+        end_time: formData.end_time,
+        group: formData.group,
+        notes: formData.notes || "",
+        trainers: formData.selected_trainers,
+      }
+
+      let trainingId: number
+
+      if (editingTraining) {
+        await apiFetch<ITraining>(`/trainings/${editingTraining.id}/`, {
+          method: "PATCH",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        trainingId = editingTraining.id
+        toast.success("Training aktualisiert")
+      } else {
+        const res = await apiFetch<ITraining>("/trainings/", {
+          method: "POST",
+          token: token!,
+          body: JSON.stringify(payload),
+        })
+        trainingId = res.id
+        toast.success("Training erstellt")
+      }
+
+      setIsModalOpen(false)
+      setEditingTraining(null)
+      setFormData({
+        date: "",
+        start_time: "",
+        end_time: "",
+        group: "all",
+        notes: "",
+        selected_trainers: [],
+      })
+      fetchTrainings()
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = async (training: ITraining) => {
+    setEditingTraining(training)
+    setFormData({
+      date: training.date || "",
+      start_time: training.start_time || "",
+      end_time: training.end_time || "",
+      group: training.group || "all",
+      notes: "",
+      selected_trainers: training.trainers || [],
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteId) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/trainings/${deleteId}/`, { method: "DELETE", token: token! })
+      toast.success("Training gelöscht")
+      setDeleteId(null)
+      fetchTrainings()
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr)
+    return date.toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long", year: "numeric" })
+  }
+
+  const isToday = (dateStr: string) => {
+    const today = new Date()
+    const date = new Date(dateStr)
+    return date.toDateString() === today.toDateString()
+  }
+
+  const isPast = (dateStr: string) => {
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    const date = new Date(dateStr)
+    return date < today
+  }
+
+  if (isLoading) {
+    return <PageSkeleton />
+  }
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Trainingseinheiten</h1>
+            <p className="text-sm text-muted-foreground">
+              {totalCount} {totalCount === 1 ? "Training" : "Trainingseinheiten"}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex border rounded-lg">
+              <button
+                onClick={() => handleViewChange("grid")}
+                className={`p-2 ${viewMode === "grid" ? "bg-muted" : "hover:bg-muted/50"} rounded-l-lg transition-colors`}
+              >
+                <LayoutGrid className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => handleViewChange("list")}
+                className={`p-2 ${viewMode === "list" ? "bg-muted" : "hover:bg-muted/50"} transition-colors`}
+              >
+                <List className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => handleViewChange("calendar")}
+                className={`p-2 ${viewMode === "calendar" ? "bg-muted" : "hover:bg-muted/50"} rounded-r-lg transition-colors`}
+              >
+                <Calendar className="w-4 h-4" />
+              </button>
+            </div>
+              <Button
+                onClick={() => {
+                  setEditingTraining(null)
+                  setFormData({
+                    date: "",
+                    start_time: "",
+                    end_time: "",
+                    group: "all",
+                    notes: "",
+                    selected_trainers: [],
+                  })
+                  setIsModalOpen(true)
+                }}
+              className="transition-all duration-200 hover:shadow-md"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              Training hinzufügen
+            </Button>
+          </div>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex flex-wrap items-center gap-3">
+          <Select value={filters.group} onValueChange={(v) => handleFilterChange("group", v || "all")}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Gruppe" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle Gruppen</SelectItem>
+              <SelectItem value="kids">Kinder</SelectItem>
+              <SelectItem value="adults">Erwachsene</SelectItem>
+            </SelectContent>
+          </Select>
+          <Input
+            type="date"
+            value={filters.date_from}
+            onChange={(e) => handleFilterChange("date_from", e.target.value)}
+            className="w-[150px] transition-all duration-200 focus:shadow-sm"
+            placeholder="Von Datum"
+          />
+          <Input
+            type="date"
+            value={filters.date_to}
+            onChange={(e) => handleFilterChange("date_to", e.target.value)}
+            className="w-[150px] transition-all duration-200 focus:shadow-sm"
+            placeholder="Bis Datum"
+          />
+          {(filters.group !== "all" || filters.date_from || filters.date_to) && (
+            <Button variant="ghost" size="sm" onClick={handleResetFilters} className="text-muted-foreground">
+              <RotateCcw className="w-4 h-4 mr-1" />
+              Zurücksetzen
+            </Button>
+          )}
+        </div>
+      </FadeIn>
+
+      {trainings.length === 0 ? (
+        <FadeIn delay={0.1}>
+          <EmptyState
+            icon={Calendar}
+            title="Keine Trainingseinheiten gefunden"
+            description="Erstelle deine erste Trainingseinheit"
+            action={{
+              label: "Training hinzufügen",
+              onClick: () => {
+                setEditingTraining(null)
+                setIsModalOpen(true)
+              },
+            }}
+          />
+        </FadeIn>
+      ) : viewMode === "grid" ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {trainings.map((training, idx) => (
+            <FadeIn key={training.id} delay={idx * 0.03}>
+              <div 
+                className={`group relative border rounded-2xl p-5 bg-card hover:shadow-lg transition-all duration-300 hover:-translate-y-1 ${
+                  isPast(training.date) ? "opacity-75" : ""
+                } ${isToday(training.date) ? "ring-2 ring-primary/50" : ""}`}
+              >
+                {isToday(training.date) && (
+                  <div className="absolute -top-2 -right-2 px-2 py-0.5 bg-primary text-primary-foreground text-xs font-bold rounded-full">
+                    HEUTE
+                  </div>
+                )}
+                
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-center gap-3">
+                    <div className={`p-2.5 rounded-xl ${isPast(training.date) ? "bg-muted" : "bg-primary/10"}`}>
+                      <Calendar className={`w-5 h-5 ${isPast(training.date) ? "text-muted-foreground" : "text-primary"}`} />
+                    </div>
+                    <div>
+                      <div className="font-semibold text-lg">
+                        {new Date(training.date).toLocaleDateString("de-DE", { day: "numeric", month: "short" })}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {formatDate(training.date).split(",")[0]}
+                      </div>
+                    </div>
+                  </div>
+                  <Badge className={groupConfig[training.group as keyof typeof groupConfig]?.class} variant="secondary">
+                    {groupConfig[training.group as keyof typeof groupConfig]?.label}
+                  </Badge>
+                </div>
+
+                <div className="space-y-2 mb-4">
+                  <div className="flex items-center gap-2 text-sm">
+                    <Clock className="w-4 h-4 text-muted-foreground" />
+                    <span>{training.start_time} - {training.end_time}</span>
+                  </div>
+                  {training.location_name && (
+                    <div className="flex items-center gap-2 text-sm">
+                      <MapPin className="w-4 h-4 text-muted-foreground" />
+                      <span className="truncate">{training.location_name}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-2 text-sm">
+                    <Users className="w-4 h-4 text-muted-foreground" />
+                    <span>{training.attendance_count || 0} Teilnehmer</span>
+                  </div>
+                </div>
+
+                {(training.trainer_names || []).length > 0 && (
+                  <div className="flex flex-wrap gap-1 mb-4">
+                    {(training.trainer_names || []).slice(0, 2).map((name, i) => (
+                      <span key={i} className="text-xs px-2 py-0.5 bg-muted rounded-full">
+                        {name}
+                      </span>
+                    ))}
+                    {(training.trainer_names || []).length > 2 && (
+                      <span className="text-xs px-2 py-0.5 bg-muted rounded-full">
+                        +{training.trainer_names.length - 2}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex items-center gap-1 pt-3 border-t">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={() => router.push(`/trainings/${training.id}`)}
+                  >
+                    <Eye className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={() => handleEdit(training)}
+                  >
+                    <Pencil className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => setDeleteId(training.id)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      ) : viewMode === "list" ? (
+        <div className="space-y-6">
+          {Object.entries(groupedTrainings).sort().map(([date, dateTrainings]) => (
+            <FadeIn key={date}>
+              <div className="space-y-3">
+                <div className="sticky top-0 z-10 bg-background/95 backdrop-blur py-2 px-4 rounded-lg border">
+                  <div className="flex items-center gap-3">
+                    <Calendar className="w-4 h-4 text-primary" />
+                    <span className="font-semibold">{formatDate(date)}</span>
+                    <Badge variant="secondary" className="ml-auto">
+                      {dateTrainings.length} {dateTrainings.length === 1 ? "Training" : "Trainings"}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                  {dateTrainings.map((training) => (
+                    <div
+                      key={training.id}
+                      className={`group relative border rounded-xl p-4 bg-card hover:shadow-md transition-all ${
+                        isPast(training.date) ? "opacity-75" : ""
+                      }`}
+                    >
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                          <Clock className="w-4 h-4 text-muted-foreground" />
+                          <span className="font-medium">{training.start_time} - {training.end_time}</span>
+                        </div>
+                        <Badge className={groupConfig[training.group as keyof typeof groupConfig]?.class} variant="secondary">
+                          {groupConfig[training.group as keyof typeof groupConfig]?.label}
+                        </Badge>
+                      </div>
+                      
+                      {training.location_name && (
+                        <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+                          <MapPin className="w-4 h-4" />
+                          <span className="truncate">{training.location_name}</span>
+                        </div>
+                      )}
+                      
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2 text-sm">
+                          <Users className="w-4 h-4 text-muted-foreground" />
+                          <span>{training.attendance_count || 0} Teilnehmer</span>
+                        </div>
+                        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => router.push(`/trainings/${training.id}`)}>
+                            <Eye className="w-3 h-3" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleEdit(training)}>
+                            <Pencil className="w-3 h-3" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive" onClick={() => setDeleteId(training.id)}>
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </FadeIn>
+          ))}
+        </div>
+      ) : null}
+
+      {viewMode === "calendar" && (
+        <FadeIn delay={0.1}>
+          <CalendarView
+            onEdit={handleEdit}
+            onDelete={(id) => setDeleteId(id)}
+            onView={(training) => router.push(`/trainings/${training.id}`)}
+            onCreate={(date) => {
+              setEditingTraining(null)
+              setFormData({
+                date: format(date, "yyyy-MM-dd"),
+                start_time: "",
+                end_time: "",
+                group: "all",
+                notes: "",
+                selected_trainers: [],
+              })
+              setIsModalOpen(true)
+            }}
+            filters={filters}
+            refreshTrigger={trainings.length}
+          />
+        </FadeIn>
+      )}
+
+      {totalPages > 1 && viewMode !== "calendar" && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={PAGE_SIZE}
+          onPageChange={(page) => {
+            setCurrentPage(page)
+            fetchTrainings(filters, page)
+          }}
+        />
+      )}
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingTraining ? "Training bearbeiten" : "Neue Trainingseinheit"}
+        description="Fülle alle erforderlichen Felder aus"
+        size="lg"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingTraining ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="date">Datum</Label>
+              <Input
+                id="date"
+                type="date"
+                value={formData.date}
+                onChange={(e) => setFormData({ ...formData, date: e.target.value })}
+                required
+                className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="group">Gruppe</Label>
+              <select
+                id="group"
+                value={formData.group}
+                onChange={(e) => setFormData({ ...formData, group: e.target.value as typeof formData.group })}
+                className="w-full h-10 px-3 border rounded-lg bg-background transition-all duration-200 focus:ring-2 focus:ring-ring"
+              >
+                <option value="kids">Kinder</option>
+                <option value="adults">Erwachsene</option>
+                <option value="all">Alle</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="start_time">Startzeit</Label>
+              <Input
+                id="start_time"
+                type="time"
+                value={formData.start_time}
+                onChange={(e) => setFormData({ ...formData, start_time: e.target.value })}
+                required
+                className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="end_time">Endzeit</Label>
+              <Input
+                id="end_time"
+                type="time"
+                value={formData.end_time}
+                onChange={(e) => setFormData({ ...formData, end_time: e.target.value })}
+                required
+                className="transition-all duration-200 focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="notes">Notizen</Label>
+            <textarea
+              id="notes"
+              value={formData.notes}
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              className="w-full h-20 px-3 py-2 border rounded-lg bg-background resize-none transition-all duration-200 focus:ring-2 focus:ring-ring"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="trainer">Trainer</Label>
+            <select
+              id="trainer"
+              value={formData.selected_trainers[0] || ""}
+              onChange={(e) => setFormData({ 
+                ...formData, 
+                selected_trainers: e.target.value ? [Number(e.target.value)] : [] 
+              })}
+              className="w-full h-10 px-3 border rounded-lg bg-background transition-all duration-200 focus:ring-2 focus:ring-ring"
+            >
+              <option value="">Trainer auswählen...</option>
+              {availableTrainers.map((trainer) => (
+                <option key={trainer.id} value={trainer.id}>
+                  {trainer.first_name} {trainer.last_name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Training löschen"
+        description="Bist du sicher, dass du diese Trainingseinheit löschen möchtest?"
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
+
+export default function TrainingsPage() {
+  return (
+    <Suspense fallback={<PageSkeleton />}>
+      <TrainingsContent />
+    </Suspense>
+  )
+}
@@ -0,0 +1,621 @@
+"use client"
+
+import { useEffect, useState, useCallback } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, IWrestler, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Modal } from "@/components/ui/modal"
+import { PageSkeleton } from "@/components/ui/skeletons"
+import { EmptyState } from "@/components/ui/empty-state"
+import { FadeIn, CardHover } from "@/components/ui/animations"
+import { motion } from "framer-motion"
+import { Pagination } from "@/components/ui/pagination"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Plus, Pencil, Trash2, Loader2, Users, RotateCcw, Filter } from "lucide-react"
+import { toast } from "sonner"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
+}
+
+const PAGE_SIZE = 10
+
+export default function WrestlersPage() {
+  const router = useRouter()
+  const { token } = useAuth()
+  const searchParams = useSearchParams()
+  
+  const [wrestlers, setWrestlers] = useState<IWrestler[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingWrestler, setEditingWrestler] = useState<IWrestler | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteId, setDeleteId] = useState<number | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [clubs, setClubs] = useState<{id: number, name: string}[]>([])
+  
+  const currentPage = parseInt(searchParams.get("page") || "1")
+  
+  const [filters, setFilters] = useState({
+    search: "",
+    group: "all",
+    club: "all",
+    gender: "all",
+    status: "all",
+  })
+
+  const fetchClubs = useCallback(async () => {
+    if (!token) return
+    try {
+      const data = await apiFetch<PaginatedResponse<{id: number, name: string}>>("/clubs/", { token })
+      setClubs(data.results || [])
+    } catch {
+      console.error("Failed to fetch clubs")
+    }
+  }, [token])
+
+  const fetchPreferences = useCallback(async () => {
+    if (!token) return
+    try {
+      const prefs = await apiFetch<{wrestlers_filters: Record<string, string>}>(`/auth/preferences/`, { token })
+      const savedFilters = prefs.wrestlers_filters || {}
+      const newFilters = {
+        search: savedFilters.search || "",
+        group: savedFilters.group || "all",
+        club: savedFilters.club || "all",
+        gender: savedFilters.gender || "all",
+        status: savedFilters.status || "all",
+      }
+      setFilters(newFilters)
+    } catch (err) {
+      console.error("Failed to fetch preferences:", err)
+    }
+  }, [token])
+
+  const savePreferences = useCallback(async (newFilters: typeof filters) => {
+    if (!token) return
+    try {
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify({ wrestlers_filters: newFilters }),
+      })
+    } catch {
+      console.error("Failed to save preferences")
+    }
+  }, [token])
+
+  const fetchWrestlers = useCallback(async (f: typeof filters, page: number) => {
+    if (!token) return
+    setIsLoading(true)
+    try {
+      const params = new URLSearchParams()
+      params.set("page", page.toString())
+      params.set("page_size", PAGE_SIZE.toString())
+      
+      if (f.search) params.set("search", f.search)
+      if (f.group !== "all") params.set("group", f.group)
+      if (f.club !== "all") params.set("club", f.club)
+      if (f.gender !== "all") params.set("gender", f.gender)
+      if (f.status === "active") params.set("is_active", "true")
+      else if (f.status === "inactive") params.set("is_active", "false")
+      
+      const data = await apiFetch<PaginatedResponse<IWrestler>>(`/wrestlers/?${params.toString()}`, { token })
+      setWrestlers(data.results || [])
+      setTotalCount(data.count || 0)
+    } catch {
+      toast.error("Fehler beim Laden der Ringer")
+    } finally {
+      setIsLoading(false)
+    }
+  }, [token])
+
+  useEffect(() => {
+    fetchClubs()
+    fetchPreferences()
+  }, [fetchClubs, fetchPreferences])
+
+  useEffect(() => {
+    fetchWrestlers(filters, currentPage)
+  }, [filters, currentPage, fetchWrestlers])
+
+  const updateURL = useCallback((newFilters: typeof filters, page: number) => {
+    const params = new URLSearchParams()
+    if (page > 1) params.set("page", page.toString())
+    if (newFilters.search) params.set("search", newFilters.search)
+    if (newFilters.group !== "all") params.set("group", newFilters.group)
+    if (newFilters.club !== "all") params.set("club", newFilters.club)
+    if (newFilters.gender !== "all") params.set("gender", newFilters.gender)
+    if (newFilters.status !== "all") params.set("status", newFilters.status)
+    
+    const queryString = params.toString()
+    router.replace(queryString ? `?${queryString}` : window.location.pathname, { scroll: false })
+  }, [router])
+
+  const handleFilterChange = (key: keyof typeof filters, value: string) => {
+    const newFilters = { ...filters, [key]: value }
+    setFilters(newFilters)
+    savePreferences(newFilters)
+    fetchWrestlers(newFilters, 1)
+  }
+
+  const handleResetFilters = () => {
+    const resetFilters = { search: "", group: "all", club: "all", gender: "all", status: "all" }
+    setFilters(resetFilters)
+    savePreferences(resetFilters)
+    fetchWrestlers(resetFilters, 1)
+  }
+
+  const handlePageChange = (page: number) => {
+    updateURL(filters, page)
+    fetchWrestlers(filters, page)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!token) return
+    setIsSaving(true)
+    try {
+      const payload = new FormData()
+      payload.append("first_name", formData.first_name)
+      payload.append("last_name", formData.last_name)
+      payload.append("club", String(formData.club))
+      payload.append("group", formData.group)
+      payload.append("is_active", String(formData.is_active))
+      payload.append("gender", formData.gender)
+      if (formData.date_of_birth) payload.append("date_of_birth", formData.date_of_birth)
+      if (formData.weight_kg) payload.append("weight_kg", formData.weight_kg)
+      if (formData.weight_category) payload.append("weight_category", formData.weight_category)
+      if (formData.license_number) payload.append("license_number", formData.license_number)
+      if (formData.license_expiry) payload.append("license_expiry", formData.license_expiry)
+      if (formData.notes) payload.append("notes", formData.notes)
+      if (formData.photoFile) payload.append("photo", formData.photoFile)
+      if (formData.licenseFile) payload.append("license_scan", formData.licenseFile)
+
+      if (editingWrestler) {
+        await apiFetch(`/wrestlers/${editingWrestler.id}/`, { method: "PATCH", token, body: payload })
+        toast.success("Ringer aktualisiert")
+      } else {
+        await apiFetch("/wrestlers/", { method: "POST", token, body: payload })
+        toast.success("Ringer erstellt")
+      }
+      setIsModalOpen(false)
+      setEditingWrestler(null)
+      setFormData({ first_name: "", last_name: "", club: clubs[0]?.id || null, group: "youth", is_active: true, gender: "m", date_of_birth: "", weight_kg: "", weight_category: "", license_number: "", license_expiry: "", notes: "", photo: null, photoFile: null, license_scan: null, licenseFile: null })
+      fetchWrestlers(filters, currentPage)
+    } catch {
+      toast.error("Fehler beim Speichern")
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleEdit = (wrestler: IWrestler) => {
+    setEditingWrestler(wrestler)
+    setFormData({
+      first_name: wrestler.first_name || "",
+      last_name: wrestler.last_name || "",
+      club: wrestler.club || null,
+      group: wrestler.group || "youth",
+      is_active: wrestler.is_active ?? true,
+      gender: wrestler.gender || "m",
+      date_of_birth: wrestler.date_of_birth || "",
+      weight_kg: wrestler.weight_kg?.toString() || "",
+      weight_category: wrestler.weight_category || "",
+      license_number: wrestler.license_number || "",
+      license_expiry: wrestler.license_expiry || "",
+      notes: wrestler.notes || "",
+      photo: wrestler.photo || null,
+      photoFile: null,
+      license_scan: wrestler.license_scan || null,
+      licenseFile: null,
+    })
+    setIsModalOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteId || !token) return
+    setIsDeleting(true)
+    try {
+      await apiFetch(`/wrestlers/${deleteId}/`, { method: "DELETE", token })
+      toast.success("Ringer gelöscht")
+      setDeleteId(null)
+      fetchWrestlers(filters, currentPage)
+    } catch {
+      toast.error("Fehler beim Löschen")
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const [formData, setFormData] = useState({
+    first_name: "",
+    last_name: "",
+    club: null as number | null,
+    group: "youth" as "kids" | "youth" | "adults",
+    is_active: true,
+    gender: "m" as "m" | "f",
+    date_of_birth: "",
+    weight_kg: "",
+    weight_category: "",
+    license_number: "",
+    license_expiry: "",
+    notes: "",
+    photo: null as string | null,
+    photoFile: null as File | null,
+    license_scan: null as string | null,
+    licenseFile: null as File | null,
+  })
+
+  const hasActiveFilters = Object.values(filters).some(v => v && v !== "all")
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE)
+
+  return (
+    <div className="space-y-8">
+      <FadeIn>
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Ringer</h1>
+            <p className="text-sm text-muted-foreground">
+              {totalCount} Ringer insgesamt
+            </p>
+          </div>
+          <Button
+            onClick={() => {
+              setEditingWrestler(null)
+              setFormData({ first_name: "", last_name: "", club: clubs[0]?.id || null, group: "youth", is_active: true, gender: "m", date_of_birth: "", weight_kg: "", weight_category: "", license_number: "", license_expiry: "", notes: "", photo: null, photoFile: null, license_scan: null, licenseFile: null })
+              setIsModalOpen(true)
+            }}
+            className="transition-all duration-200 hover:shadow-md"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Ringer hinzufügen
+          </Button>
+        </div>
+      </FadeIn>
+
+      <FadeIn delay={0.05}>
+        <div className="flex items-center gap-4 flex-wrap">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Filter className="w-4 h-4" />
+            <span>Filter:</span>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Input
+              type="text"
+              placeholder="Suchen..."
+              value={filters.search}
+              onChange={(e) => handleFilterChange("search", e.target.value)}
+              className="h-9 w-[180px] text-sm"
+            />
+          </div>
+          
+          <Select value={filters.group} onValueChange={(v) => handleFilterChange("group", v || "all")}>
+            <SelectTrigger className="h-9 w-[140px]">
+              <SelectValue placeholder="Gruppe" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              <SelectItem value="kids">Kinder</SelectItem>
+              <SelectItem value="youth">Jugend</SelectItem>
+              <SelectItem value="adults">Erwachsene</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          <Select value={filters.club} onValueChange={(v) => handleFilterChange("club", v || "all")}>
+            <SelectTrigger className="h-9 w-[160px]">
+              <SelectValue>{clubs.find(c => String(c.id) === filters.club)?.name || "Club"}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              {clubs.map(c => (
+                <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          
+          <Select value={filters.gender} onValueChange={(v) => handleFilterChange("gender", v || "all")}>
+            <SelectTrigger className="h-9 w-[140px]">
+              <SelectValue placeholder="Geschlecht" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              <SelectItem value="m">Männlich</SelectItem>
+              <SelectItem value="f">Weiblich</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          <Select value={filters.status} onValueChange={(v) => handleFilterChange("status", v || "all")}>
+            <SelectTrigger className="h-9 w-[120px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle</SelectItem>
+              <SelectItem value="active">Aktiv</SelectItem>
+              <SelectItem value="inactive">Inaktiv</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          {hasActiveFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleResetFilters}
+              className="h-9 text-muted-foreground hover:text-foreground"
+            >
+              <RotateCcw className="w-4 h-4 mr-1" />
+              Zurücksetzen
+            </Button>
+          )}
+        </div>
+      </FadeIn>
+
+      {isLoading ? (
+        <PageSkeleton />
+      ) : wrestlers.length === 0 ? (
+        <FadeIn delay={0.1}>
+          <EmptyState
+            icon={Users}
+            title="Keine Ringer gefunden"
+            description="Füge deinen ersten Ringer hinzu"
+            action={{
+              label: "Ringer hinzufügen",
+              onClick: () => {
+                setEditingWrestler(null)
+                setFormData({ first_name: "", last_name: "", club: clubs[0]?.id || null, group: "youth", is_active: true, gender: "m", date_of_birth: "", weight_kg: "", weight_category: "", license_number: "", license_expiry: "", notes: "", photo: null, photoFile: null, license_scan: null, licenseFile: null })
+                setIsModalOpen(true)
+              },
+            }}
+          />
+        </FadeIn>
+      ) : (
+        <FadeIn delay={0.1}>
+          <CardHover>
+            <div className="border rounded-xl overflow-hidden">
+              <Table>
+                <TableHeader>
+                  <TableRow className="bg-muted/50">
+                    <TableHead className="font-medium w-12">Foto</TableHead>
+                    <TableHead className="font-medium">Name</TableHead>
+                    <TableHead className="font-medium">Club</TableHead>
+                    <TableHead className="font-medium">Gruppe</TableHead>
+                    <TableHead className="font-medium">Status</TableHead>
+                    <TableHead className="text-right font-medium">Aktionen</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {wrestlers.map((wrestler, index) => (
+                    <motion.tr
+                      key={wrestler.id}
+                      className="border-t"
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.2, delay: index * 0.03, ease: "easeOut" }}
+                      whileHover={{ backgroundColor: "rgb(226 232 240)" }}
+                    >
+                      <TableCell>
+                        <Avatar size="sm">
+                          {wrestler.photo ? (
+                            <AvatarImage src={wrestler.photo} alt={`${wrestler.first_name} ${wrestler.last_name}`} />
+                          ) : (
+                            <AvatarFallback className="bg-primary text-primary-foreground">
+                              {wrestler.first_name?.[0]}{wrestler.last_name?.[0]}
+                            </AvatarFallback>
+                          )}
+                        </Avatar>
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {wrestler.first_name} {wrestler.last_name}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground text-sm">
+                        {wrestler.club_name || "-"}
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={ groupConfig[wrestler.group as keyof typeof groupConfig]?.class} variant="secondary">
+                          {groupConfig[wrestler.group as keyof typeof groupConfig]?.label}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={wrestler.is_active ? "default" : "outline"}>
+                          {wrestler.is_active ? "Aktiv" : "Inaktiv"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleEdit(wrestler)}
+                            className="hover:bg-muted transition-colors"
+                          >
+                            <Pencil className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setDeleteId(wrestler.id)}
+                            className="hover:bg-destructive/10 hover:text-destructive transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </motion.tr>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardHover>
+        </FadeIn>
+      )}
+
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={PAGE_SIZE}
+          onPageChange={handlePageChange}
+        />
+      )}
+
+      <Modal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title={editingWrestler ? "Ringer bearbeiten" : "Neuen Ringer erstellen"}
+        description={editingWrestler ? "Bearbeite die Daten des Ringers" : "Fülle alle erforderlichen Felder aus"}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)} disabled={isSaving}>
+              Abbrechen
+            </Button>
+            <Button onClick={handleSubmit} disabled={isSaving}>
+              {isSaving && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+              {editingWrestler ? "Speichern" : "Erstellen"}
+            </Button>
+          </>
+        }
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="first_name">Vorname</Label>
+              <Input
+                id="first_name"
+                value={formData.first_name}
+                onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="last_name">Nachname</Label>
+              <Input
+                id="last_name"
+                value={formData.last_name}
+                onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                required
+              />
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="club">Club</Label>
+              <select
+                id="club"
+                value={formData.club || ""}
+                onChange={(e) => setFormData({ ...formData, club: e.target.value ? parseInt(e.target.value) : null })}
+                className="w-full h-10 px-3 border rounded-lg bg-background"
+                required
+              >
+                <option value="">Club wählen</option>
+                {clubs.map(c => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="group">Gruppe</Label>
+              <select
+                id="group"
+                value={formData.group}
+                onChange={(e) => setFormData({ ...formData, group: e.target.value as typeof formData.group })}
+                className="w-full h-10 px-3 border rounded-lg bg-background"
+              >
+                <option value="kids">Kinder</option>
+                <option value="youth">Jugend</option>
+                <option value="adults">Erwachsene</option>
+              </select>
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="gender">Geschlecht</Label>
+              <select
+                id="gender"
+                value={formData.gender}
+                onChange={(e) => setFormData({ ...formData, gender: e.target.value as typeof formData.gender })}
+                className="w-full h-10 px-3 border rounded-lg bg-background"
+              >
+                <option value="m">Männlich</option>
+                <option value="f">Weiblich</option>
+              </select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="is_active">Status</Label>
+              <select
+                id="is_active"
+                value={formData.is_active ? "true" : "false"}
+                onChange={(e) => setFormData({ ...formData, is_active: e.target.value === "true" })}
+                className="w-full h-10 px-3 border rounded-lg bg-background"
+              >
+                <option value="true">Aktiv</option>
+                <option value="false">Inaktiv</option>
+              </select>
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="date_of_birth">Geburtsdatum</Label>
+              <Input
+                id="date_of_birth"
+                type="date"
+                value={formData.date_of_birth}
+                onChange={(e) => setFormData({ ...formData, date_of_birth: e.target.value })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="weight_kg">Gewicht (kg)</Label>
+              <Input
+                id="weight_kg"
+                type="number"
+                step="0.1"
+                value={formData.weight_kg}
+                onChange={(e) => setFormData({ ...formData, weight_kg: e.target.value })}
+              />
+            </div>
+          </div>
+        </form>
+      </Modal>
+
+      <Modal
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+        title="Ringer löschen"
+        description="Bist du sicher, dass du diesen Ringer löschen möchtest?"
+        size="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteId(null)} disabled={isDeleting}>
+              Abbrechen
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+              {isDeleting ? "..." : "Löschen"}
+            </Button>
+          </>
+        }
+      >
+        <div />
+      </Modal>
+    </div>
+  )
+}
@@ -0,0 +1,148 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-heading: var(--font-heading);
+  --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-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);
+  --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 {
+  --background: oklch(0.979 0.021 119); /* #EDF7BD - light lime */
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.152 0.182 261); /* #1B1A55 - dark navy */
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.435 0.137 261); /* #535C91 - medium blue */
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.93 0.025 120);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.673 0.113 261); /* #9290C3 - light lavender */
+  --accent-foreground: oklch(0.145 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.152 0.182 261);
+  --chart-1: oklch(0.435 0.137 261);
+  --chart-2: oklch(0.673 0.113 261);
+  --chart-3: oklch(0.152 0.182 261);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.068 0.104 261); /* #070F2B - very dark blue */
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.068 0.104 261);
+  --sidebar-accent: oklch(0.152 0.182 261);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.2 0.05 261);
+  --sidebar-ring: oklch(0.152 0.182 261);
+}
+
+.dark {
+  --background: oklch(0.068 0.104 261); /* #070F2B - very dark blue */
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.105 0.12 261); /* #1B1A55 - dark navy */
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.105 0.12 261);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.673 0.113 261); /* #9290C3 - light lavender */
+  --primary-foreground: oklch(0.068 0.104 261);
+  --secondary: oklch(0.435 0.137 261); /* #535C91 - medium blue */
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.2 0.05 261);
+  --muted-foreground: oklch(0.7 0.08 261);
+  --accent: oklch(0.435 0.137 261); /* #535C91 - medium blue */
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.673 0.113 261);
+  --chart-1: oklch(0.673 0.113 261);
+  --chart-2: oklch(0.435 0.137 261);
+  --chart-3: oklch(0.152 0.182 261);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.045 0.08 261); /* even darker */
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.673 0.113 261);
+  --sidebar-primary-foreground: oklch(0.068 0.104 261);
+  --sidebar-accent: oklch(0.152 0.182 261);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.673 0.113 261);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+}
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: oklch(0.5 0 0 / 20%);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: oklch(0.5 0 0 / 35%);
+}
+}
@@ -0,0 +1,35 @@
+import type { Metadata } from "next"
+import { Syne, DM_Sans } from "next/font/google"
+import "./globals.css"
+import { Providers } from "./providers"
+
+const syne = Syne({
+  variable: "--font-heading",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800"],
+})
+
+const dmSans = DM_Sans({
+  variable: "--font-sans",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+})
+
+export const metadata: Metadata = {
+  title: "WrestleDesk",
+  description: "Wrestling Club Management System",
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="de" suppressHydrationWarning>
+      <body className={`${syne.variable} ${dmSans.variable} min-h-screen bg-background font-sans antialiased`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,25 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/lib/auth"
+import { Loader2 } from "lucide-react"
+
+export default function HomePage() {
+  const router = useRouter()
+  const { token } = useAuth()
+
+  useEffect(() => {
+    if (token) {
+      router.push("/dashboard")
+    } else {
+      router.push("/login")
+    }
+  }, [token, router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+    </div>
+  )
+}
@@ -0,0 +1,12 @@
+"use client"
+
+import { Toaster } from "@/components/ui/sonner"
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <Toaster />
+    </>
+  )
+}
@@ -0,0 +1,227 @@
+"use client"
+
+import { useState } from "react"
+import { ITrainingHomeworkAssignment } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { FadeIn } from "@/components/ui/animations"
+import { Check, X, Loader2, Clock, Calendar } from "lucide-react"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
+}
+
+const categoryConfig = {
+  warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
+  kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
+  technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
+  ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
+  spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
+  cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
+}
+
+type Status = "open" | "in_progress" | "completed"
+
+interface BoardViewProps {
+  assignments: ITrainingHomeworkAssignment[]
+  onToggleComplete: (id: number, current: boolean) => void
+  togglingId: number | null
+}
+
+export function BoardView({ assignments, onToggleComplete, togglingId }: BoardViewProps) {
+  const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
+
+  const columns: { status: Status; label: string; color: string; bgColor: string }[] = [
+    { status: "open", label: "Offen", color: "text-orange-600", bgColor: "bg-orange-50 border-orange-200" },
+    { status: "in_progress", label: "In Bearbeitung", color: "text-blue-600", bgColor: "bg-blue-50 border-blue-200" },
+    { status: "completed", label: "Erledigt", color: "text-green-600", bgColor: "bg-green-50 border-green-200" },
+  ]
+
+  const getColumnAssignments = (status: Status) => {
+    return assignments.filter(a => {
+      if (status === "open") return !a.is_completed
+      if (status === "completed") return a.is_completed
+      return false
+    })
+  }
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {columns.map(col => {
+          const colAssignments = getColumnAssignments(col.status)
+          
+          return (
+            <div key={col.status} className="space-y-3">
+              <div className={`flex items-center justify-between p-3 rounded-lg border ${col.bgColor}`}>
+                <div className="flex items-center gap-2">
+                  <div className={`w-2 h-2 rounded-full ${
+                    col.status === "open" ? "bg-orange-500" :
+                    col.status === "in_progress" ? "bg-blue-500" : "bg-green-500"
+                  }`} />
+                  <span className={`font-semibold ${col.color}`}>{col.label}</span>
+                </div>
+                <Badge variant="outline">{colAssignments.length}</Badge>
+              </div>
+
+              <div className="space-y-2 min-h-[200px]">
+                {colAssignments.length === 0 ? (
+                  <div className="text-center py-8 text-muted-foreground text-sm border-2 border-dashed rounded-lg">
+                    Keine Hausaufgaben
+                  </div>
+                ) : (
+                  colAssignments.map(assignment => (
+                    <FadeIn key={assignment.id}>
+                      <Card 
+                        className="cursor-pointer hover:shadow-md transition-all hover:border-primary/50"
+                        onClick={() => setSelectedAssignment(assignment)}
+                      >
+                        <CardContent className="p-3 space-y-2">
+                          <div className="flex items-center gap-2">
+                            <Avatar size="sm">
+                              <AvatarFallback className="bg-primary/10 text-primary text-xs">
+                                {assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="flex-1 min-w-0">
+                              <div className="font-medium text-sm truncate">{assignment.wrestler_name}</div>
+                              <Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
+                                {groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
+                              </Badge>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                            <Calendar className="w-3 h-3" />
+                            {new Date(assignment.training_date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" })}
+                          </div>
+
+                          <div className="flex flex-wrap gap-1">
+                            {assignment.exercises.slice(0, 2).map(ex => (
+                              <Badge key={ex.id} variant="outline" className="text-xs">
+                                {ex.exercise_name}
+                              </Badge>
+                            ))}
+                            {assignment.exercises.length > 2 && (
+                              <Badge variant="outline" className="text-xs">
+                                +{assignment.exercises.length - 2}
+                              </Badge>
+                            )}
+                          </div>
+
+                          <div className="flex items-center justify-between pt-2 border-t">
+                            <span className="text-xs text-muted-foreground">
+                              {assignment.exercises.length} Übung{assignment.exercises.length !== 1 ? 'en' : ''}
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 w-6 p-0"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                onToggleComplete(assignment.id, assignment.is_completed)
+                              }}
+                              disabled={togglingId === assignment.id}
+                            >
+                              {togglingId === assignment.id ? (
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                              ) : assignment.is_completed ? (
+                                <X className="w-3 h-3 text-red-500" />
+                              ) : (
+                                <Check className="w-3 h-3 text-green-500" />
+                              )}
+                            </Button>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </FadeIn>
+                  ))
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      <Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
+        <SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
+          <SheetHeader>
+            <SheetTitle>
+              {selectedAssignment?.wrestler_name}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedAssignment && (
+            <div className="mt-4 space-y-4">
+              <div className="flex items-center gap-2">
+                <Badge className={groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.class}>
+                  {groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.label}
+                </Badge>
+                <Badge
+                  variant={selectedAssignment.is_completed ? "default" : "secondary"}
+                  className={selectedAssignment.is_completed ? "bg-green-600" : ""}
+                >
+                  {selectedAssignment.is_completed ? "Erledigt" : "Offen"}
+                </Badge>
+              </div>
+
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-2">Training</h4>
+                <div className="flex items-center gap-2 text-sm">
+                  <Calendar className="w-4 h-4 text-muted-foreground" />
+                  {new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
+                </div>
+              </div>
+
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-2">Übungen ({selectedAssignment.exercises.length})</h4>
+                <div className="space-y-2">
+                  {selectedAssignment.exercises.map((ex, idx) => (
+                    <div key={ex.id} className="flex items-center gap-3">
+                      <span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
+                      <Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
+                        {categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
+                      </Badge>
+                      <span className="flex-1 text-sm">{ex.exercise_name}</span>
+                      {ex.reps && <span className="text-sm text-muted-foreground">{ex.reps}x</span>}
+                      {ex.time_minutes && <span className="text-sm text-muted-foreground">{ex.time_minutes}s</span>}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {selectedAssignment.notes && (
+                <div className="border rounded-lg p-4">
+                  <h4 className="font-medium mb-2">Notizen</h4>
+                  <p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
+                </div>
+              )}
+
+              <Button
+                onClick={() => {
+                  onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
+                  setSelectedAssignment(null)
+                }}
+                disabled={togglingId === selectedAssignment.id}
+                className="w-full"
+              >
+                {togglingId === selectedAssignment.id ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : selectedAssignment.is_completed ? (
+                  <X className="w-4 h-4 mr-2" />
+                ) : (
+                  <Check className="w-4 h-4 mr-2" />
+                )}
+                {selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
+              </Button>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
@@ -0,0 +1,216 @@
+"use client"
+
+import { useState } from "react"
+import { ITrainingHomeworkAssignment } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { Check, X, Loader2 } from "lucide-react"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
+}
+
+const categoryConfig = {
+  warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
+  kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
+  technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
+  ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
+  spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
+  cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
+}
+
+interface TableViewProps {
+  assignments: ITrainingHomeworkAssignment[]
+  onToggleComplete: (id: number, current: boolean) => void
+  togglingId: number | null
+}
+
+export function TableView({ assignments, onToggleComplete, togglingId }: TableViewProps) {
+  const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
+
+  const sortedAssignments = [...assignments].sort((a, b) => {
+    if (a.is_completed !== b.is_completed) return a.is_completed ? 1 : -1
+    return new Date(b.training_date).getTime() - new Date(a.training_date).getTime()
+  })
+
+  return (
+    <>
+      <div className="border rounded-xl overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="w-12">Status</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>Gruppe</TableHead>
+              <TableHead>Training</TableHead>
+              <TableHead>Übungen</TableHead>
+              <TableHead className="text-right">Aktion</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedAssignments.map(assignment => (
+              <TableRow 
+                key={assignment.id}
+                className={`cursor-pointer hover:bg-muted/50 ${assignment.is_completed ? 'opacity-60' : ''}`}
+                onClick={() => setSelectedAssignment(assignment)}
+              >
+                <TableCell>
+                  <Badge
+                    variant={assignment.is_completed ? "default" : "outline"}
+                    className={`${assignment.is_completed ? 'bg-green-600' : 'border-orange-300 text-orange-600'}`}
+                  >
+                    {assignment.is_completed ? (
+                      <Check className="w-3 h-3 mr-1" />
+                    ) : (
+                      <X className="w-3 h-3 mr-1" />
+                    )}
+                    {assignment.is_completed ? 'Erledigt' : 'Offen'}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Avatar size="sm">
+                      <AvatarFallback className="bg-primary/10 text-primary text-xs">
+                        {assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="font-medium">{assignment.wrestler_name}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
+                    {groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground text-sm">
+                  {new Date(assignment.training_date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" })}
+                </TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1 max-w-[200px]">
+                    {assignment.exercises.slice(0, 2).map(ex => (
+                      <Badge key={ex.id} variant="outline" className="text-xs">
+                        {ex.exercise_name}
+                      </Badge>
+                    ))}
+                    {assignment.exercises.length > 2 && (
+                      <Badge variant="outline" className="text-xs">
+                        +{assignment.exercises.length - 2}
+                      </Badge>
+                    )}
+                    {assignment.exercises.length === 0 && (
+                      <span className="text-xs text-muted-foreground">Keine</span>
+                    )}
+                  </div>
+                </TableCell>
+                <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onToggleComplete(assignment.id, assignment.is_completed)}
+                    disabled={togglingId === assignment.id}
+                  >
+                    {togglingId === assignment.id ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : assignment.is_completed ? (
+                      <X className="w-4 h-4 text-red-500" />
+                    ) : (
+                      <Check className="w-4 h-4 text-green-500" />
+                    )}
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
+        <SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
+          <SheetHeader>
+            <SheetTitle>
+              {selectedAssignment?.wrestler_name}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedAssignment && (
+            <div className="mt-4 space-y-4">
+              <div className="flex items-center gap-2">
+                <Badge className={groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.class}>
+                  {groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.label}
+                </Badge>
+                <Badge
+                  variant={selectedAssignment.is_completed ? "default" : "secondary"}
+                  className={selectedAssignment.is_completed ? "bg-green-600" : ""}
+                >
+                  {selectedAssignment.is_completed ? "Erledigt" : "Offen"}
+                </Badge>
+              </div>
+
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-2">Training</h4>
+                <p className="text-sm text-muted-foreground">
+                  {new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
+                </p>
+              </div>
+
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-2">Übungen ({selectedAssignment.exercises.length})</h4>
+                <div className="space-y-2">
+                  {selectedAssignment.exercises.map((ex, idx) => (
+                    <div key={ex.id} className="flex items-center gap-3 p-2 bg-muted/30 rounded">
+                      <span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
+                      <Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
+                        {categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
+                      </Badge>
+                      <span className="flex-1 text-sm">{ex.exercise_name}</span>
+                      <span className="text-sm font-medium text-muted-foreground">
+                        {ex.reps && `${ex.reps}x`}
+                        {ex.time_minutes && `${ex.time_minutes}s`}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {selectedAssignment.notes && (
+                <div className="border rounded-lg p-4">
+                  <h4 className="font-medium mb-2">Notizen</h4>
+                  <p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
+                </div>
+              )}
+
+              <Button
+                onClick={() => {
+                  onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
+                  setSelectedAssignment(null)
+                }}
+                disabled={togglingId === selectedAssignment.id}
+                className="w-full"
+              >
+                {togglingId === selectedAssignment.id ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : selectedAssignment.is_completed ? (
+                  <X className="w-4 h-4 mr-2" />
+                ) : (
+                  <Check className="w-4 h-4 mr-2" />
+                )}
+                {selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
+              </Button>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
@@ -0,0 +1,229 @@
+"use client"
+
+import { useState } from "react"
+import { ITrainingHomeworkAssignment } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { FadeIn } from "@/components/ui/animations"
+import { Check, X, Loader2, Calendar, ChevronRight, Dumbbell } from "lucide-react"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
+}
+
+const categoryConfig = {
+  warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
+  kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
+  technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
+  ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
+  spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
+  cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
+}
+
+interface GroupedByDate {
+  date: string
+  displayDate: string
+  dayName: string
+  assignments: ITrainingHomeworkAssignment[]
+  completedCount: number
+}
+
+interface TimelineViewProps {
+  assignments: ITrainingHomeworkAssignment[]
+  onToggleComplete: (id: number, current: boolean) => void
+  togglingId: number | null
+}
+
+export function TimelineView({ assignments, onToggleComplete, togglingId }: TimelineViewProps) {
+  const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
+
+  const groupedByDate: GroupedByDate[] = assignments.reduce((acc, assignment) => {
+    const dateKey = assignment.training_date
+    const existing = acc.find(g => g.date === dateKey)
+    if (existing) {
+      existing.assignments.push(assignment)
+      if (assignment.is_completed) existing.completedCount++
+    } else {
+      const dateObj = new Date(dateKey)
+      const dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+      acc.push({
+        date: dateKey,
+        displayDate: dateObj.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }),
+        dayName: dayNames[dateObj.getDay()],
+        assignments: [assignment],
+        completedCount: assignment.is_completed ? 1 : 0,
+      })
+    }
+    return acc
+  }, [] as GroupedByDate[])
+
+  groupedByDate.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+  const today = new Date().toISOString().split("T")[0]
+
+  return (
+    <>
+      <div className="relative">
+        <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border" />
+        
+        <div className="space-y-6">
+          {groupedByDate.map((dayGroup) => {
+            const isToday = dayGroup.date === today
+            const isPast = dayGroup.date < today
+            
+            return (
+              <FadeIn key={dayGroup.date}>
+                <div className="relative pl-14">
+                  <div className={`absolute left-3 w-6 h-6 rounded-full flex items-center justify-center ${
+                    isToday 
+                      ? 'bg-green-500 text-white ring-4 ring-green-100' 
+                      : isPast 
+                        ? 'bg-muted text-muted-foreground' 
+                        : 'bg-primary text-primary-foreground'
+                  }`}>
+                    {isToday ? (
+                      <Calendar className="w-3 h-3" />
+                    ) : (
+                      <div className="w-2 h-2 rounded-full bg-current" />
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className={`font-semibold ${isToday ? 'text-green-600' : ''}`}>
+                      {isToday ? 'Heute' : dayGroup.dayName}
+                    </span>
+                    <span className="text-muted-foreground">{dayGroup.displayDate}</span>
+                    <Badge variant="outline" className="ml-auto">
+                      {dayGroup.completedCount}/{dayGroup.assignments.length}
+                    </Badge>
+                  </div>
+
+                  <div className="space-y-2">
+                    {dayGroup.assignments.map(assignment => (
+                      <Card 
+                        key={assignment.id}
+                        className={`cursor-pointer hover:shadow-md transition-all ${
+                          assignment.is_completed ? 'opacity-75' : ''
+                        } ${isToday ? 'border-green-200' : ''}`}
+                        onClick={() => setSelectedAssignment(assignment)}
+                      >
+                        <CardContent className="p-3">
+                          <div className="flex items-center gap-3">
+                            <Avatar size="sm">
+                              <AvatarFallback className="bg-primary/10 text-primary">
+                                {assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium text-sm truncate">{assignment.wrestler_name}</span>
+                                <Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
+                                  {groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
+                                </Badge>
+                              </div>
+                              <div className="flex items-center gap-1 mt-1">
+                                {assignment.exercises.slice(0, 3).map(ex => (
+                                  <Badge key={ex.id} variant="outline" className="text-xs">
+                                    {ex.exercise_name}
+                                  </Badge>
+                                ))}
+                                {assignment.exercises.length > 3 && (
+                                  <Badge variant="outline" className="text-xs">
+                                    +{assignment.exercises.length - 3}
+                                  </Badge>
+                                )}
+                              </div>
+                            </div>
+                            <Badge
+                              variant={assignment.is_completed ? "default" : "secondary"}
+                              className={assignment.is_completed ? "bg-green-600" : ""}
+                            >
+                              {assignment.is_completed ? "✓" : "○"}
+                            </Badge>
+                            <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </div>
+              </FadeIn>
+            )
+          })}
+        </div>
+      </div>
+
+      <Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
+        <SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
+          <SheetHeader>
+            <SheetTitle>
+              {selectedAssignment?.wrestler_name}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedAssignment && (
+            <div className="mt-4 space-y-4">
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">
+                  {new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long" })}
+                </Badge>
+                <Badge
+                  variant={selectedAssignment.is_completed ? "default" : "secondary"}
+                  className={selectedAssignment.is_completed ? "bg-green-600" : ""}
+                >
+                  {selectedAssignment.is_completed ? "Erledigt" : "Offen"}
+                </Badge>
+              </div>
+
+              <div className="border rounded-lg p-4">
+                <h4 className="font-medium mb-2">Übungen</h4>
+                <div className="space-y-2">
+                  {selectedAssignment.exercises.map((ex, idx) => (
+                    <div key={ex.id} className="flex items-center gap-3">
+                      <span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
+                      <Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
+                        {categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
+                      </Badge>
+                      <span className="flex-1 text-sm">{ex.exercise_name}</span>
+                      {ex.reps && <span className="text-sm text-muted-foreground">{ex.reps}x</span>}
+                      {ex.time_minutes && <span className="text-sm text-muted-foreground">{ex.time_minutes}s</span>}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {selectedAssignment.notes && (
+                <div className="border rounded-lg p-4">
+                  <h4 className="font-medium mb-2">Notizen</h4>
+                  <p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
+                </div>
+              )}
+
+              <Button
+                onClick={() => {
+                  onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
+                  setSelectedAssignment(null)
+                }}
+                disabled={togglingId === selectedAssignment.id}
+                className="w-full"
+              >
+                {togglingId === selectedAssignment.id ? (
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                ) : selectedAssignment.is_completed ? (
+                  <X className="w-4 h-4 mr-2" />
+                ) : (
+                  <Check className="w-4 h-4 mr-2" />
+                )}
+                {selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
+              </Button>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
@@ -0,0 +1,203 @@
+"use client"
+
+import { useState } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, ITrainingHomeworkAssignment, PaginatedResponse } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Progress } from "@/components/ui/progress"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { FadeIn } from "@/components/ui/animations"
+import { Check, X, Loader2, BookOpen, Calendar, Dumbbell } from "lucide-react"
+import { toast } from "sonner"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
+}
+
+const categoryConfig = {
+  warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
+  kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
+  technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
+  ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
+  spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
+  cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
+}
+
+interface GroupedByWrestler {
+  wrestlerId: number
+  wrestlerName: string
+  wrestlerGroup: string
+  assignments: ITrainingHomeworkAssignment[]
+  completedCount: number
+  totalCount: number
+}
+
+interface WrestlerCentricViewProps {
+  assignments: ITrainingHomeworkAssignment[]
+  onToggleComplete: (id: number, current: boolean) => void
+  togglingId: number | null
+}
+
+export function WrestlerCentricView({ assignments, onToggleComplete, togglingId }: WrestlerCentricViewProps) {
+  const [selectedWrestler, setSelectedWrestler] = useState<GroupedByWrestler | null>(null)
+
+  // Group assignments by wrestler
+  const groupedByWrestler: GroupedByWrestler[] = assignments.reduce((acc, assignment) => {
+    const existing = acc.find(g => g.wrestlerId === assignment.wrestler)
+    if (existing) {
+      existing.assignments.push(assignment)
+      if (assignment.is_completed) existing.completedCount++
+      existing.totalCount++
+    } else {
+      acc.push({
+        wrestlerId: assignment.wrestler,
+        wrestlerName: assignment.wrestler_name,
+        wrestlerGroup: assignment.wrestler_group,
+        assignments: [assignment],
+        completedCount: assignment.is_completed ? 1 : 0,
+        totalCount: 1,
+      })
+    }
+    return acc
+  }, [] as GroupedByWrestler[])
+
+  // Sort wrestlers by: those with incomplete homework first, then by name
+  groupedByWrestler.sort((a, b) => {
+    const aIncomplete = a.totalCount - a.completedCount
+    const bIncomplete = b.totalCount - b.completedCount
+    if (aIncomplete !== bIncomplete) return bIncomplete - aIncomplete
+    return a.wrestlerName.localeCompare(b.wrestlerName)
+  })
+
+  const getProgress = (wrestler: GroupedByWrestler) => {
+    if (wrestler.totalCount === 0) return 0
+    return Math.round((wrestler.completedCount / wrestler.totalCount) * 100)
+  }
+
+  return (
+    <>
+      <div className="space-y-4">
+        {groupedByWrestler.map((wrestler) => {
+          const progress = getProgress(wrestler)
+          const isComplete = progress === 100
+
+          return (
+            <FadeIn key={wrestler.wrestlerId}>
+              <Card 
+                className={`cursor-pointer hover:shadow-md transition-all ${isComplete ? 'opacity-75' : ''}`}
+                onClick={() => setSelectedWrestler(wrestler)}
+              >
+                <CardHeader className="pb-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Avatar size="default">
+                        <AvatarFallback className="bg-primary/10 text-primary">
+                          {wrestler.wrestlerName?.split(" ").map(n => n[0]).slice(0,2).join("")}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <CardTitle className="text-base">{wrestler.wrestlerName}</CardTitle>
+                        <Badge className={groupConfig[wrestler.wrestlerGroup as keyof typeof groupConfig]?.class}>
+                          {groupConfig[wrestler.wrestlerGroup as keyof typeof groupConfig]?.label}
+                        </Badge>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className={`text-lg font-bold ${isComplete ? 'text-green-600' : 'text-orange-500'}`}>
+                        {wrestler.completedCount}/{wrestler.totalCount}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {isComplete ? 'Alle erledigt' : 'Offen'}
+                      </div>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-3">
+                    <Progress value={progress} className="flex-1 h-2" />
+                    <span className="text-sm font-medium w-12">{progress}%</span>
+                  </div>
+                  <div className="mt-2 text-xs text-muted-foreground">
+                    Letztes Training: {wrestler.assignments[0]?.training_date 
+                      ? new Date(wrestler.assignments[0].training_date).toLocaleDateString("de-DE")
+                      : "Keine"}
+                  </div>
+                </CardContent>
+              </Card>
+            </FadeIn>
+          )
+        })}
+      </div>
+
+      {/* Detail Sheet */}
+      <Sheet open={!!selectedWrestler} onOpenChange={() => setSelectedWrestler(null)}>
+        <SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
+          <SheetHeader>
+            <SheetTitle>
+              {selectedWrestler?.wrestlerName}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedWrestler && (
+            <div className="mt-4 space-y-4">
+              {selectedWrestler.assignments
+                .sort((a, b) => new Date(b.training_date).getTime() - new Date(a.training_date).getTime())
+                .map(assignment => (
+                  <div key={assignment.id} className="border rounded-lg p-3">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline">
+                          {new Date(assignment.training_date).toLocaleDateString("de-DE")}
+                        </Badge>
+                        <Badge
+                          variant={assignment.is_completed ? "default" : "secondary"}
+                          className={assignment.is_completed ? "bg-green-600" : ""}
+                        >
+                          {assignment.is_completed ? "Erledigt" : "Offen"}
+                        </Badge>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onToggleComplete(assignment.id, assignment.is_completed)}
+                        disabled={togglingId === assignment.id}
+                      >
+                        {togglingId === assignment.id ? (
+                          <Loader2 className="w-4 h-4 animate-spin" />
+                        ) : assignment.is_completed ? (
+                          <X className="w-4 h-4 text-red-500" />
+                        ) : (
+                          <Check className="w-4 h-4 text-green-500" />
+                        )}
+                      </Button>
+                    </div>
+                    <div className="space-y-1">
+                      {assignment.exercises.map(ex => (
+                        <div key={ex.id} className="flex items-center gap-2 text-sm">
+                          <Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
+                            {categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
+                          </Badge>
+                          <span>{ex.exercise_name}</span>
+                          {ex.reps && <span className="text-muted-foreground">{ex.reps}x</span>}
+                          {ex.time_minutes && <span className="text-muted-foreground">{ex.time_minutes}s</span>}
+                        </div>
+                      ))}
+                    </div>
+                    {assignment.notes && (
+                      <p className="mt-2 text-xs text-muted-foreground border-t pt-2">
+                        {assignment.notes}
+                      </p>
+                    )}
+                  </div>
+                ))}
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
@@ -0,0 +1,123 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import {
+  LayoutDashboard,
+  Users,
+  UserCog,
+  Dumbbell,
+  CalendarDays,
+  BookOpen,
+  FileText,
+  Settings,
+  LogOut,
+  Building2,
+  Trophy,
+  MapPin,
+} from "lucide-react"
+import { useAuth } from "@/lib/auth"
+import { motion } from "framer-motion"
+
+const navigation = [
+  { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
+  { name: "Clubs", href: "/clubs", icon: Building2 },
+  { name: "Orte", href: "/locations", icon: MapPin },
+  { name: "Ringer", href: "/wrestlers", icon: Users },
+  { name: "Trainer", href: "/trainers", icon: UserCog },
+  { name: "Übungen", href: "/exercises", icon: Dumbbell },
+  { name: "Training", href: "/trainings", icon: CalendarDays },
+  { name: "Vorlagen", href: "/templates", icon: FileText },
+  { name: "Hausaufgaben", href: "/homework", icon: BookOpen },
+  { name: "Leistungstest", href: "/leistungstest", icon: Trophy },
+]
+
+export function Sidebar() {
+  const pathname = usePathname()
+  const { logout, user } = useAuth()
+
+  return (
+    <div className="flex flex-col w-64 bg-sidebar text-sidebar-foreground min-h-screen border-r border-sidebar-border">
+      <div className="p-6">
+        <motion.h1 
+          className="text-xl font-bold text-sidebar-primary"
+          whileHover={{ scale: 1.02 }}
+          transition={{ duration: 0.15 }}
+        >
+          WrestleDesk
+        </motion.h1>
+      </div>
+
+      <nav className="flex-1 px-4 space-y-1">
+        {navigation.map((item) => {
+          const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
+          return (
+            <Link
+              key={item.name}
+              href={item.href}
+              className="block"
+            >
+              <motion.div
+                className={cn(
+                  "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium",
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                )}
+                whileHover={{ x: 2 }}
+                whileTap={{ scale: 0.98 }}
+                transition={{ duration: 0.15 }}
+              >
+                <motion.div
+                  className="text-sidebar-accent-foreground"
+                >
+                  <item.icon className="w-5 h-5" />
+                </motion.div>
+                <span>{item.name}</span>
+                {isActive && (
+                  <motion.div
+                    className="ml-auto w-1 h-4 rounded-full bg-sidebar-primary"
+                    layoutId="activeIndicator"
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </motion.div>
+            </Link>
+          )
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-sidebar-border">
+        <Link href="/settings" className="block mb-2">
+          <motion.div
+            className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            whileHover={{ x: 2 }}
+            whileTap={{ scale: 0.98 }}
+            transition={{ duration: 0.15 }}
+          >
+            <Settings className="w-5 h-5" />
+            Einstellungen
+          </motion.div>
+        </Link>
+        <div className="flex items-center justify-between px-3 py-2">
+          <motion.span 
+            className="text-sm text-sidebar-foreground"
+            whileHover={{ opacity: 0.8 }}
+          >
+            {user?.username}
+          </motion.span>
+          <motion.button
+            onClick={logout}
+            className="p-1 rounded hover:bg-sidebar-accent transition-colors"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+            transition={{ duration: 0.15 }}
+          >
+            <LogOut className="w-5 h-5 text-sidebar-foreground" />
+          </motion.button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,74 @@
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
@@ -0,0 +1,96 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { usePathname } from "next/navigation"
+
+export function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+
+  return (
+    <motion.div
+      key={pathname}
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      className="h-full"
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function FadeIn({
+  children,
+  className = "",
+  delay = 0,
+}: {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+}) {
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, ease: "easeOut", delay }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function StaggeredList({
+  children,
+  className = "",
+  staggerDelay = 0.05,
+}: {
+  children: React.ReactNode
+  className?: string
+  staggerDelay?: number
+}) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: { opacity: 0 },
+        visible: {
+          opacity: 1,
+          transition: { staggerChildren: staggerDelay }
+        }
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export const listItemVariants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: { duration: 0.2, ease: "easeOut" as const }
+  }
+}
+
+export function CardHover({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <motion.div
+      className={className}
+      whileHover={{ y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.15)" }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  )
+}
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
@@ -0,0 +1,318 @@
+"use client"
+
+import { useEffect, useState, useMemo, useCallback } from "react"
+import { Calendar, dateFnsLocalizer, Views, SlotInfo } from "react-big-calendar"
+import { format, parse, startOfWeek, getDay, startOfMonth, endOfMonth, addMonths, subMonths } from "date-fns"
+import { de } from "date-fns/locale"
+import "react-big-calendar/lib/css/react-big-calendar.css"
+import "./calendar.css"
+
+import { ITraining } from "@/lib/api"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet"
+import { ConfirmModal } from "@/components/ui/modal"
+import { useAuth } from "@/lib/auth"
+import { apiFetch, PaginatedResponse } from "@/lib/api"
+import { toast } from "sonner"
+
+const groupConfig = {
+  kids: { label: "Kinder", class: "bg-primary/10 text-primary border-primary/20" },
+  youth: { label: "Jugend", class: "bg-secondary/10 text-secondary border-secondary/20" },
+  adults: { label: "Erwachsene", class: "bg-accent/10 text-accent border-accent/20" },
+  all: { label: "Alle", class: "bg-muted text-muted-foreground" },
+}
+
+const groupColors = {
+  kids: { bg: "rgba(59, 130, 246, 0.15)", text: "#1E40AF", border: "#3B82F6" },
+  youth: { bg: "rgba(139, 92, 246, 0.15)", text: "#5B21B6", border: "#8B5CF6" },
+  adults: { bg: "rgba(249, 115, 22, 0.15)", text: "#9A3412", border: "#F97316" },
+  all: { bg: "rgba(100, 100, 100, 0.15)", text: "#404040", border: "#666666" },
+}
+
+const locales = { "de": de }
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  startOfWeek: () => startOfWeek(new Date(), { locale: de }),
+  getDay,
+  locales,
+})
+
+interface CalendarViewProps {
+  onEdit: (training: ITraining) => void
+  onDelete: (id: number) => void
+  onView: (training: ITraining) => void
+  onCreate: (date: Date) => void
+  filters: { group: string; date_from: string; date_to: string }
+  refreshTrigger: number
+}
+
+interface CalendarEvent {
+  id: number
+  title: string
+  start: Date
+  end: Date
+  resource: ITraining
+}
+
+export function CalendarView({ onEdit, onDelete, onView, onCreate, filters, refreshTrigger }: CalendarViewProps) {
+  const { token } = useAuth()
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [trainings, setTrainings] = useState<ITraining[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [selectedDayTrainings, setSelectedDayTrainings] = useState<ITraining[]>([])
+  const [selectedDay, setSelectedDay] = useState<Date | null>(null)
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [createPromptOpen, setCreatePromptOpen] = useState(false)
+  const [createPromptDate, setCreatePromptDate] = useState<Date | null>(null)
+
+  const fetchTrainings = useCallback(async (date: Date, groupFilter: string) => {
+    if (!token) return
+    setIsLoading(true)
+    try {
+      const start = startOfMonth(subMonths(date, 1))
+      const end = endOfMonth(addMonths(date, 1))
+      const params = new URLSearchParams()
+      params.set("date_from", format(start, "yyyy-MM-dd"))
+      params.set("date_to", format(end, "yyyy-MM-dd"))
+      params.set("page_size", "100")
+      if (groupFilter && groupFilter !== "all") {
+        params.set("group", groupFilter)
+      }
+
+      const data = await apiFetch<PaginatedResponse<ITraining>>(`/trainings/?${params.toString()}`, { token })
+      setTrainings(data.results || [])
+    } catch {
+      toast.error("Fehler beim Laden der Trainingseinheiten")
+    } finally {
+      setIsLoading(false)
+    }
+  }, [token])
+
+  useEffect(() => {
+    fetchTrainings(currentDate, filters.group)
+  }, [fetchTrainings, currentDate, filters.group, refreshTrigger])
+
+  const events: CalendarEvent[] = useMemo(() => {
+    return trainings
+      .filter(t => t.date)
+      .map(t => ({
+        id: t.id,
+        title: `${t.start_time || ""} - ${t.group ? groupConfig[t.group as keyof typeof groupConfig]?.label : ""}`,
+        start: new Date(`${t.date}T${t.start_time || "00:00"}`),
+        end: new Date(`${t.date}T${t.end_time || "23:59"}`),
+        resource: t,
+      }))
+  }, [trainings])
+
+  const handleSelectEvent = useCallback((event: CalendarEvent) => {
+    onView(event.resource)
+  }, [onView])
+
+  const handleSelectSlot = useCallback((slotInfo: SlotInfo) => {
+    const dayTrainings = trainings.filter(t => {
+      const trainingDate = new Date(t.date)
+      return format(trainingDate, "yyyy-MM-dd") === format(slotInfo.start, "yyyy-MM-dd")
+    })
+    setSelectedDay(slotInfo.start)
+    setSelectedDayTrainings(dayTrainings)
+    setCreatePromptDate(slotInfo.start)
+    setCreatePromptOpen(true)
+  }, [trainings])
+
+  const handleCreatePrompt = () => {
+    if (createPromptDate) {
+      onCreate(createPromptDate)
+    }
+    setCreatePromptOpen(false)
+  }
+
+  const eventStyleGetter = useCallback((event: CalendarEvent) => {
+    const group = (event.resource && event.resource.group) || "all"
+    const colors = groupColors[group as keyof typeof groupColors]
+    return {
+      style: {
+        backgroundColor: colors.bg,
+        borderLeft: `3px solid ${colors.border}`,
+        borderRadius: "0.25rem",
+        border: "none",
+        color: colors.text,
+      }
+    }
+  }, [])
+
+  const CustomEvent = ({ event }: { event: CalendarEvent }) => {
+    const [showTooltip, setShowTooltip] = useState(false)
+    const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
+
+    return (
+      <div
+        className="relative"
+        onMouseEnter={(e) => {
+          const evt: any = e
+          setShowTooltip(true)
+          setTooltipPos({ x: evt.clientX, y: evt.clientY - 10 })
+        }}
+        onMouseLeave={() => setShowTooltip(false)}
+        onMouseMove={(e) => {
+          const evt: any = e
+          setTooltipPos({ x: evt.clientX, y: evt.clientY - 10 })
+        }}
+      >
+        <div className="flex items-center gap-1 text-xs">
+          <span className="font-medium">{event.resource.start_time}</span>
+        </div>
+        {showTooltip && (
+          <div
+            className="fixed z-50 bg-background border rounded-lg shadow-lg p-3 text-sm pointer-events-none"
+            style={{
+              left: tooltipPos.x,
+              top: tooltipPos.y,
+              transform: 'translateY(-100%) translateX(-50%)',
+              minWidth: 180
+            }}
+          >
+            <div className="font-medium mb-1">
+              {event.resource.start_time} - {event.resource.end_time}
+            </div>
+            <Badge
+              className={groupConfig[event.resource.group as keyof typeof groupConfig]?.class}
+            >
+              {groupConfig[event.resource.group as keyof typeof groupConfig]?.label}
+            </Badge>
+            <div className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
+              <span className="h-3 w-3">📍</span>
+              {event.resource.location_name || "Kein Ort"}
+            </div>
+            <div className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
+              <span className="h-3 w-3">👥</span>
+              {event.resource.attendance_count || 0} Teilnehmer
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const CustomToolbar = ({ label, onNavigate }: { label: string, onNavigate: (action: "PREV" | "NEXT" | "TODAY") => void }) => (
+    <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={() => onNavigate("PREV")}>
+          ‹
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => onNavigate("TODAY")}>
+          Heute
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => onNavigate("NEXT")}>
+          ›
+        </Button>
+      </div>
+      <span className="text-lg font-semibold">{label}</span>
+      <div className="w-[100px]" />
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      <style>{`
+        .rbc-calendar { height: calc(100vh - 280px); min-height: 500px; }
+      `}</style>
+
+      <Calendar
+        localizer={localizer}
+        events={events}
+        startAccessor="start"
+        endAccessor="end"
+        view={Views.MONTH}
+        views={[Views.MONTH]}
+        date={currentDate}
+        onNavigate={setCurrentDate}
+        onSelectEvent={handleSelectEvent}
+        onSelectSlot={handleSelectSlot}
+        selectable
+        eventPropGetter={eventStyleGetter}
+        components={{
+          event: CustomEvent,
+          toolbar: CustomToolbar,
+        }}
+        messages={{
+          today: "Heute",
+          month: "Monat",
+          week: "Woche",
+          day: "Tag",
+        }}
+      />
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent side="bottom" className="h-[50vh] sm:max-w-[600px]">
+          <SheetHeader>
+            <SheetTitle>
+              {selectedDay ? format(selectedDay, "EEEE, d. MMMM yyyy", { locale: de }) : ""}
+            </SheetTitle>
+            <SheetDescription>
+              Trainings an diesem Tag
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-4 space-y-3 max-h-[calc(50vh-100px)] overflow-y-auto">
+            {selectedDayTrainings.length === 0 ? (
+              <p className="text-muted-foreground text-center py-8">
+                Keine Trainings an diesem Tag
+              </p>
+            ) : (
+              selectedDayTrainings.map(training => (
+                <div
+                  key={training.id}
+                  className="flex items-center justify-between p-4 rounded-xl border hover:bg-muted/50 transition-all cursor-pointer"
+                  style={{
+                    borderLeftWidth: 4,
+                    borderLeftColor: groupColors[training.group as keyof typeof groupColors]?.border || "#666"
+                  }}
+                  onClick={() => {
+                    onView(training)
+                    setSheetOpen(false)
+                  }}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="text-lg font-semibold">
+                      {training.start_time} - {training.end_time}
+                    </div>
+                    <Badge
+                      className={groupConfig[training.group as keyof typeof groupConfig]?.class}
+                    >
+                      {groupConfig[training.group as keyof typeof groupConfig]?.label}
+                    </Badge>
+                    {training.location_name && (
+                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                        <span className="h-3 w-3">📍</span>
+                        {training.location_name}
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1 text-sm">
+                    <span className="h-3 w-3">👥</span>
+                    <span className="font-medium">{training.attendance_count || 0}</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <ConfirmModal
+        open={createPromptOpen}
+        onOpenChange={setCreatePromptOpen}
+        title="Training erstellen"
+        description={
+          createPromptDate
+            ? `Am ${format(createPromptDate, "EEEE, d. MMMM yyyy", { locale: de })} ist kein Training geplant. Möchtest du ein Training erstellen?`
+            : "Möchtest du ein Training erstellen?"
+        }
+        confirmLabel="Ja, Training erstellen"
+        onConfirm={handleCreatePrompt}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,128 @@
+.rbc-calendar {
+  font-family: inherit;
+  background: transparent;
+}
+
+.rbc-toolbar {
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.rbc-toolbar button {
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  background: transparent;
+  border-radius: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.rbc-toolbar button:hover {
+  background: hsl(var(--muted));
+}
+
+.rbc-toolbar button.rbc-active {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary));
+}
+
+.rbc-toolbar-label {
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+
+.rbc-header {
+  padding: 0.75rem 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.rbc-month-view {
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.rbc-month-row {
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.rbc-month-row:last-child {
+  border-bottom: none;
+}
+
+.rbc-day-bg {
+  transition: background-color 0.2s;
+}
+
+.rbc-day-bg:hover {
+  background: hsl(var(--muted));
+}
+
+.rbc-today {
+  background: hsl(142, 76%, 96%);
+  border: 2px solid hsl(142, 76%, 45%);
+  border-radius: 0.5rem;
+}
+
+.rbc-off-range-bg {
+  background: hsl(var(--muted) / 0.3);
+}
+
+.rbc-date-cell {
+  padding: 0.5rem;
+  text-align: right;
+  font-size: 0.875rem;
+}
+
+.rbc-date-cell > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rbc-today .rbc-date-cell {
+  font-weight: 700;
+  color: hsl(142, 76%, 30%);
+}
+
+.rbc-event {
+  background: transparent;
+  border: none;
+  border-left: 3px solid;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.rbc-event.rbc-selected {
+  background: hsl(var(--primary) / 0.8);
+}
+
+.rbc-show-more {
+  font-size: 0.75rem;
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+.rbc-overlay {
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  padding: 0.5rem;
+  min-width: 200px;
+}
+
+.rbc-overlay-header {
+  border-bottom: 1px solid hsl(var(--border));
+  padding: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
@@ -0,0 +1,29 @@
+"use client"
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
+
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
@@ -0,0 +1,33 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { LucideIcon } from "lucide-react"
+import { FolderOpen, Plus } from "lucide-react"
+
+interface EmptyStateProps {
+  icon?: LucideIcon
+  title: string
+  description: string
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+export function EmptyState({ icon: Icon = FolderOpen, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4 text-center animate-in fade-in duration-300">
+      <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mb-4">
+        <Icon className="w-8 h-8 text-muted-foreground" />
+      </div>
+      <h3 className="text-lg font-semibold mb-1">{title}</h3>
+      <p className="text-sm text-muted-foreground mb-6 max-w-sm">{description}</p>
+      {action && (
+        <Button onClick={action.onClick}>
+          <Plus className="w-4 h-4 mr-2" />
+          {action.label}
+        </Button>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,123 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { RotateCcw, Filter } from "lucide-react"
+
+interface FilterOption {
+  key: string
+  label: string
+  type: "text" | "select" | "date"
+  options?: { value: string; label: string }[]
+}
+
+interface FilterBarProps {
+  filters: FilterOption[]
+  onFilterChange?: (filters: Record<string, string>) => void
+}
+
+export function FilterBar({ filters, onFilterChange }: FilterBarProps) {
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const initial: Record<string, string> = {}
+    filters.forEach(f => {
+      initial[f.key] = params.get(f.key) || ""
+    })
+    setFilterValues(initial)
+  }, [])
+
+  const updateFilter = (key: string, value: string) => {
+    const newValues = { ...filterValues, [key]: value }
+    setFilterValues(newValues)
+    
+    const params = new URLSearchParams(window.location.search)
+    if (value && value !== "all" && value !== "") {
+      params.set(key, value)
+    } else {
+      params.delete(key)
+    }
+    params.delete("page")
+    
+    const newUrl = params.toString() ? `?${params.toString()}` : window.location.pathname
+    window.history.pushState({}, "", newUrl)
+    
+    onFilterChange?.(newValues)
+  }
+
+  const handleReset = () => {
+    setFilterValues({})
+    window.history.pushState({}, "", window.location.pathname)
+    onFilterChange?.({})
+  }
+
+  const hasActiveFilters = Object.values(filterValues).some(v => v && v !== "all")
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4 flex-wrap">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Filter className="w-4 h-4" />
+          <span>Filter:</span>
+        </div>
+        
+        {filters.map((filter) => (
+          <div key={filter.key} className="flex items-center gap-2">
+            <Label className="text-sm text-muted-foreground">{filter.label}:</Label>
+            
+            {filter.type === "text" && (
+              <Input
+                type="text"
+                placeholder="Suchen..."
+                value={filterValues[filter.key] || ""}
+                onChange={(e) => updateFilter(filter.key, e.target.value)}
+                className="h-9 w-[180px] text-sm"
+              />
+            )}
+            
+            {filter.type === "select" && (
+              <Select value={filterValues[filter.key] || "all"} onValueChange={(v) => updateFilter(filter.key, v || "all")}>
+                <SelectTrigger className="h-9 w-[150px]">
+                  <SelectValue placeholder="Alle" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Alle</SelectItem>
+                  {filter.options?.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            
+            {filter.type === "date" && (
+              <Input
+                type="date"
+                value={filterValues[filter.key] || ""}
+                onChange={(e) => updateFilter(filter.key, e.target.value)}
+                className="h-9 w-[150px] text-sm"
+              />
+            )}
+          </div>
+        ))}
+        
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleReset}
+            className="h-9 text-muted-foreground hover:text-foreground"
+          >
+            <RotateCcw className="w-4 h-4 mr-1" />
+            Zurücksetzen
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
@@ -0,0 +1,90 @@
+"use client"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Loader2 } from "lucide-react"
+
+interface ModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+  size?: "sm" | "md" | "lg" | "xl"
+}
+
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+}: ModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <div>{children}</div>
+        {footer && <DialogFooter>{footer}</DialogFooter>}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+interface ConfirmModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  confirmLabel?: string
+  onConfirm: () => void
+  isLoading?: boolean
+  variant?: "default" | "destructive"
+}
+
+export function ConfirmModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Bestätigen",
+  onConfirm,
+  isLoading = false,
+  variant = "default",
+}: ConfirmModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Abbrechen
+          </Button>
+          <Button
+            variant={variant === "destructive" ? "destructive" : "default"}
+            onClick={onConfirm}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -0,0 +1,92 @@
+"use client"
+
+import { useRouter, useSearchParams } from "next/navigation"
+import { useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  totalCount: number
+  pageSize: number
+  onPageChange?: (page: number) => void
+}
+
+export function Pagination({ currentPage, totalPages, totalCount, pageSize, onPageChange }: PaginationProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const goToPage = useCallback((page: number) => {
+    if (page < 1 || page > totalPages) return
+    if (onPageChange) {
+      onPageChange(page)
+    } else {
+      const params = new URLSearchParams(searchParams.toString())
+      params.set("page", page.toString())
+      router.replace(`?${params.toString()}`, { scroll: false })
+    }
+  }, [router, searchParams, totalPages, onPageChange])
+
+  const startItem = (currentPage - 1) * pageSize + 1
+  const endItem = Math.min(currentPage * pageSize, totalCount)
+
+  if (totalPages <= 1) return null
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-t">
+      <div className="text-sm text-muted-foreground">
+        Zeige {startItem} bis {endItem} von {totalCount}
+      </div>
+      
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => goToPage(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        
+        <div className="flex items-center gap-1">
+          {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+            let pageNum: number
+            if (totalPages <= 5) {
+              pageNum = i + 1
+            } else if (currentPage <= 3) {
+              pageNum = i + 1
+            } else if (currentPage >= totalPages - 2) {
+              pageNum = totalPages - 4 + i
+            } else {
+              pageNum = currentPage - 2 + i
+            }
+            
+            return (
+              <Button
+                key={pageNum}
+                variant={currentPage === pageNum ? "default" : "outline"}
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => goToPage(pageNum)}
+              >
+                {pageNum}
+              </Button>
+            )
+          })}
+        </div>
+        
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => goToPage(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,83 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
@@ -0,0 +1,79 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 p-4 border rounded-xl">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+          <div className="ml-auto flex gap-2">
+            <Skeleton className="h-8 w-8 rounded-lg" />
+            <Skeleton className="h-8 w-8 rounded-lg" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="p-6 border rounded-xl space-y-4">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-4 rounded-full" />
+      </div>
+      <Skeleton className="h-8 w-16" />
+      <Skeleton className="h-3 w-20" />
+    </div>
+  )
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="p-6 border rounded-xl space-y-4">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-8 w-8 rounded-lg" />
+      </div>
+      <Skeleton className="h-8 w-16" />
+      <Skeleton className="h-3 w-24" />
+    </div>
+  )
+}
+
+export function PageSkeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-40" />
+      </div>
+      <TableSkeleton rows={5} />
+    </div>
+  )
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <StatCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
@@ -0,0 +1,32 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
@@ -0,0 +1,66 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import { useAuth } from "@/lib/auth"
+import { apiFetch } from "@/lib/api"
+
+export interface FilterState {
+  [key: string]: string
+}
+
+export function useFilterPreferences(pageKey: string, defaultFilters: FilterState) {
+  const { token } = useAuth()
+  const [filters, setFilters] = useState<FilterState>(defaultFilters)
+
+  const fetchPreferences = useCallback(async () => {
+    if (!token) return
+    try {
+      const prefs = await apiFetch<Record<string, FilterState>>(`/auth/preferences/`, { token })
+      const key = `${pageKey}_filters`
+      const savedFilters = prefs[key] || {}
+      const mergedFilters = { ...defaultFilters, ...savedFilters }
+      setFilters(mergedFilters)
+      return mergedFilters
+    } catch (err) {
+      console.error(`Failed to fetch ${pageKey} preferences:`, err)
+      return defaultFilters
+    }
+  }, [token, pageKey, defaultFilters])
+
+  const savePreferences = useCallback(async (newFilters: FilterState) => {
+    if (!token) return
+    try {
+      const payload: Record<string, FilterState> = {}
+      payload[`${pageKey}_filters`] = newFilters
+      await apiFetch(`/auth/preferences/`, {
+        method: "PATCH",
+        token,
+        body: JSON.stringify(payload),
+      })
+    } catch (err) {
+      console.error(`Failed to save ${pageKey} preferences:`, err)
+    }
+  }, [token, pageKey])
+
+  const updateFilter = useCallback((key: string, value: string, onUpdate?: () => void) => {
+    const newFilters = { ...filters, [key]: value }
+    setFilters(newFilters)
+    savePreferences(newFilters)
+    onUpdate?.()
+  }, [filters, savePreferences])
+
+  const resetFilters = useCallback((onReset?: () => void) => {
+    setFilters(defaultFilters)
+    savePreferences(defaultFilters)
+    onReset?.()
+  }, [defaultFilters, savePreferences])
+
+  return {
+    filters,
+    setFilters,
+    fetchPreferences,
+    savePreferences,
+    updateFilter,
+    resetFilters,
+  }
+}
@@ -0,0 +1,30 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+import { useCallback, useMemo } from "react"
+
+export function useFilters() {
+  const searchParams = useSearchParams()
+
+  const getParam = useCallback((key: string): string => {
+    return searchParams.get(key) || ""
+  }, [searchParams])
+
+  const getParamArray = useCallback((key: string): string[] => {
+    const val = searchParams.get(key)
+    return val ? val.split(",") : []
+  }, [searchParams])
+
+  const hasActiveFilters = useMemo(() => {
+    return Array.from(searchParams.keys()).some(
+      key => key !== "page" && searchParams.get(key)
+    )
+  }, [searchParams])
+
+  return {
+    getParam,
+    getParamArray,
+    hasActiveFilters,
+    allParams: searchParams,
+  }
+}
@@ -0,0 +1,58 @@
+export const transitions = {
+  fast: "150ms",
+  normal: "250ms",
+  slow: "400ms",
+}
+
+export const easing = {
+  default: [0.4, 0, 0.2, 1] as const,
+  smooth: [0.4, 0, 0.2, 1] as const,
+  bounce: [0.68, -0.55, 0.265, 1.55] as const,
+}
+
+export const stagger = {
+  fast: 0.05,
+  normal: 0.1,
+  slow: 0.15,
+}
+
+export const fadeInUp = {
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -10 },
+}
+
+export const fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+}
+
+export const slideInRight = {
+  initial: { opacity: 0, x: 20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -20 },
+}
+
+export const scaleIn = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+}
+
+export const pageVariants = {
+  initial: { opacity: 0, y: 8 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -8 },
+}
+
+export const cardHover = {
+  rest: { y: 0, boxShadow: "0 1px 3px 0px rgba(0,0,0,0.1)" },
+  hover: { y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.15)" },
+}
+
+export const buttonTap = {
+  rest: { scale: 1 },
+  tap: { scale: 0.97 },
+  hover: { scale: 1.02 },
+}
@@ -0,0 +1,422 @@
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1"
+
+interface FetchOptions extends RequestInit {
+  token?: string
+}
+
+export async function apiFetch<T>(
+  endpoint: string,
+  options: FetchOptions = {}
+): Promise<T> {
+  const { token, ...fetchOptions } = options
+
+  const isFormData = options.body instanceof FormData
+
+  const headers: HeadersInit = isFormData ? {
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    ...options.headers,
+  } : {
+    "Content-Type": "application/json",
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    ...options.headers,
+  }
+
+  const response = await fetch(`${API_URL}${endpoint}`, {
+    ...fetchOptions,
+    headers,
+  })
+
+  if (response.status === 401) {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("auth-storage")
+      window.location.href = "/login"
+    }
+    throw new Error("Session expired")
+  }
+
+  if (!response.ok) {
+    const contentType = response.headers.get("content-type")
+    let error: { detail?: string; message?: string; error?: string }
+    if (contentType && contentType.includes("application/json")) {
+      error = await response.json().catch(() => ({}))
+    } else {
+      error = { detail: await response.text().catch(() => `HTTP ${response.status}`) }
+    }
+    throw new Error(error.detail || error.message || error.error || `API Error: ${response.status}`)
+  }
+
+  if (response.status === 204) {
+    return {} as T
+  }
+
+  return response.json()
+}
+
+export interface PaginatedResponse<T> {
+  count: number
+  next: string | null
+  previous: string | null
+  results: T[]
+}
+
+export interface IWrestler {
+  id: number
+  first_name: string
+  last_name: string
+  club: number
+  club_name?: string
+  group: "kids" | "youth" | "adults"
+  gender?: "m" | "f"
+  is_active: boolean
+  photo?: string | null
+  date_of_birth?: string | null
+  weight_kg?: string | null
+  weight_category?: string | null
+  license_number?: string | null
+  license_expiry?: string | null
+  license_scan?: string | null
+  notes?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface ITrainer {
+  id: number
+  first_name: string
+  last_name: string
+  club: number
+  club_name?: string
+  is_active: boolean
+  photo?: string | null
+  email?: string | null
+  phone?: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface IExercise {
+  id: number
+  name: string
+  category: "warmup" | "kraft" | "technik" | "ausdauer" | "spiele" | "cool_down"
+  description?: string | null
+  default_value?: string | null
+  media?: string | null
+  club: number
+  created_at: string
+  updated_at: string
+}
+
+export interface ITraining {
+  id: number
+  date: string
+  start_time: string
+  end_time: string
+  club?: number | null
+  location?: number | null
+  location_name?: string | null
+  trainers: number[]
+  trainer_names: string[]
+  attendance_count: number
+  group: "kids" | "youth" | "adults" | "all"
+  notes?: string | null
+  is_completed: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface ITrainingDetail extends ITraining {
+  attendances: IAttendance[]
+  training_exercises: ITrainingExercise[]
+}
+
+export interface IAttendance {
+  id: number
+  training: number
+  wrestler: number
+  wrestler_name: string
+  wrestler_first_name: string
+  wrestler_last_name: string
+  wrestler_group: string
+  wrestler_club_name: string
+  created_at: string
+}
+
+export interface ITrainingExercise {
+  id: number
+  training: number
+  exercise: number
+  exercise_name: string
+  reps?: number | null
+  time_minutes?: number | null
+  order: number
+}
+
+export interface ITemplate {
+  id: number
+  name: string
+  description?: string | null
+  exercises: { exercise: number; order: number; sets?: string; reps?: string }[]
+  club: number
+  created_at: string
+  updated_at: string
+}
+
+export interface IHomeworkExerciseItem {
+  id: number
+  exercise: number
+  exercise_name: string
+  reps: number | null
+  time_minutes: number | null
+  order: number
+}
+
+export interface IHomework {
+  id: number
+  title: string
+  description: string | null
+  club: number
+  club_name: string
+  due_date: string | null
+  is_active: boolean
+  exercise_items: IHomeworkExerciseItem[]
+  exercise_count: number
+  created_at: string
+  updated_at: string
+}
+
+export interface IHomeworkAssignmentItem {
+  id: number
+  exercise: number
+  exercise_name: string
+  is_completed: boolean
+  completion_date: string | null
+}
+
+export interface IHomeworkAssignment {
+  id: number
+  homework: number
+  homework_title: string
+  wrestler: number
+  wrestler_name: string
+  club: number
+  club_name: string
+  due_date: string | null
+  notes: string
+  is_completed: boolean
+  completion_date: string | null
+  completed_items: number
+  total_items: number
+  items: IHomeworkAssignmentItem[]
+  created_at: string
+}
+
+export interface ITrainingHomeworkExercise {
+  id: number
+  exercise: number
+  exercise_name: string
+  exercise_category: string
+  reps: number | null
+  time_minutes: number | null
+  order: number
+  is_completed: boolean
+}
+
+export interface ITrainingHomeworkAssignment {
+  id: number
+  training: number
+  training_date: string
+  training_group: string
+  wrestler: number
+  wrestler_name: string
+  wrestler_group: string
+  notes: string
+  is_completed: boolean
+  completion_date: string | null
+  exercises: ITrainingHomeworkExercise[]
+  created_at: string
+}
+
+export interface ILocation {
+  id: number
+  name: string
+  address?: string | null
+  is_active: boolean
+  club: number
+  created_at: string
+  updated_at: string
+}
+
+export interface IClub {
+  id: number
+  name: string
+  short_name: string
+  logo?: string | null
+  is_active: boolean
+  wrestler_count?: number
+  created_at: string
+  updated_at: string
+}
+
+export interface IUser {
+  id: number
+  username: string
+  email: string
+  first_name?: string
+  last_name?: string
+  club_id?: number | null
+  club_name?: string | null
+}
+
+export interface IAuthResponse {
+  access: string
+  refresh: string
+  user: IUser
+}
+
+export interface IDashboardStats {
+  wrestlers: { total: number; this_week: number }
+  trainers: { total: number; active: number }
+  trainings: { total: number; this_week: number }
+  homework: { open: number; completed: number }
+  attendance: {
+    this_week: {
+      kids: { attended: number; total: number; percent: number }
+      youth: { attended: number; total: number; percent: number }
+      adults: { attended: number; total: number; percent: number }
+    }
+    average: number
+    expected: number
+  }
+  activity: { date: string; count: number }[]
+  wrestlers_by_group: {
+    kids: number
+    youth: number
+    adults: number
+    inactive: number
+  }
+  top_trainers: { name: string; training_count: number }[]
+}
+
+export interface ITrainingLogEntry {
+  id: number
+  wrestler: number
+  wrestler_name: string
+  training: number | null
+  training_date: string | null
+  exercise: number
+  exercise_name: string
+  reps: number
+  sets: number
+  time_minutes: number | null
+  weight_kg: number | null
+  rating: number
+  notes: string
+  logged_at: string
+  created_at: string
+}
+
+export interface ITrainingLogStats {
+  total_entries: number
+  unique_exercises: number
+  total_reps: number
+  avg_sets: number
+  avg_rating: number
+  this_week: number
+  top_exercises: { name: string; count: number }[]
+  progress: Record<string, { before: number; after: number; change_percent: number }>
+}
+
+export interface ITrainingLogCompare {
+  wrestler1: { id: number; name: string }
+  wrestler2: { id: number; name: string }
+  exercises: { exercise: string; wrestler1_avg: number; wrestler2_avg: number }[]
+}
+
+export interface ILeistungstestTemplateExercise {
+  id: number
+  exercise: number
+  exercise_name: string
+  target_reps: number
+  order: number
+}
+
+export interface ILeistungstestTemplate {
+  id: number
+  name: string
+  exercises: ILeistungstestTemplateExercise[]
+  usage_count: number
+  created_at: string
+}
+
+export interface ILeistungstestResultItem {
+  id: number
+  exercise: number
+  exercise_name: string
+  target_reps: number
+  actual_reps: number
+  elapsed_seconds: number
+  order: number
+}
+
+export interface ILeistungstestResult {
+  id: number
+  template: number
+  template_name: string
+  wrestler: number
+  wrestler_name: string
+  total_time_seconds: number | null
+  total_time_minutes: number | null
+  rating: number
+  notes: string
+  completed_at: string
+  score_percent: number
+  items: ILeistungstestResultItem[]
+  created_at: string
+}
+
+export interface ILeaderboardEntry {
+  rank: number
+  result_id: number
+  wrestler_id: number
+  wrestler_name: string
+  score_percent: number
+  completed_at: string
+  total_time_seconds: number | null
+  rating: number
+}
+
+export interface ITemplateLeaderboardEntry {
+  rank: number
+  wrestler_id: number
+  wrestler_name: string
+  score_percent: number
+  total_time_seconds: number | null
+  completed_at: string | null
+}
+
+export interface IExerciseLeaderboardEntry {
+  rank: number
+  wrestler_id: number
+  wrestler_name: string
+  best_time_seconds: number
+  completed_at: string | null
+}
+
+export interface ITemplateLeaderboard {
+  template_id: number
+  template_name: string
+  period: string
+  results: ITemplateLeaderboardEntry[]
+}
+
+export interface IExerciseLeaderboard {
+  exercise_id: number
+  exercise_name: string
+  period: string
+  results: IExerciseLeaderboardEntry[]
+}
+
+export interface IExerciseOption {
+  id: number
+  name: string
+}
@@ -0,0 +1,108 @@
+"use client"
+
+import { create } from "zustand"
+import { persist } from "zustand/middleware"
+import { apiFetch, IUser, IAuthResponse } from "./api"
+
+interface AuthState {
+  token: string | null
+  refreshToken: string | null
+  user: IUser | null
+  isLoading: boolean
+  isHydrated: boolean
+  error: string | null
+  setAuth: (token: string, refreshToken: string, user: IUser) => void
+  logout: () => void
+  login: (username: string, password: string) => Promise<void>
+  checkAuth: () => Promise<void>
+}
+
+export const useAuth = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      token: null,
+      refreshToken: null,
+      user: null,
+      isLoading: false,
+      isHydrated: false,
+      error: null,
+
+      setAuth: (token, refreshToken, user) => {
+        set({ token, refreshToken, user, error: null })
+      },
+
+      logout: () => {
+        set({ token: null, refreshToken: null, user: null, error: null })
+      },
+
+      login: async (username, password) => {
+        set({ isLoading: true, error: null })
+        try {
+          const response = await apiFetch<IAuthResponse>("/auth/login/", {
+            method: "POST",
+            body: JSON.stringify({ username, password }),
+          })
+          set({
+            token: response.access,
+            refreshToken: response.refresh,
+            user: response.user,
+            isLoading: false,
+          })
+        } catch (error) {
+          let errorMessage = "Anmeldung fehlgeschlagen"
+          
+          if (error instanceof Error) {
+            const message = error.message.toLowerCase()
+            if (message.includes("401") || message.includes("unauthorized") || message.includes("invalid")) {
+              errorMessage = "Falscher Username oder Passwort"
+            } else if (message.includes("429") || message.includes("rate")) {
+              errorMessage = "Zu viele Versuche. Bitte kurz warten."
+            } else if (message.includes("network") || message.includes("fetch") || message.includes("failed to fetch")) {
+              errorMessage = "Verbindung fehlgeschlagen. Internetverbindung prüfen."
+            } else if (message.includes("timeout")) {
+              errorMessage = "Zeitüberschreitung. Erneut versuchen."
+            } else {
+              errorMessage = error.message
+            }
+          }
+          
+          set({
+            isLoading: false,
+            error: errorMessage,
+          })
+          throw new Error(errorMessage)
+        }
+      },
+
+      checkAuth: async () => {
+        const { token } = get()
+        if (!token) {
+          set({ isLoading: false })
+          return
+        }
+        set({ isLoading: true })
+        try {
+          const user = await apiFetch<IUser>("/auth/me/", {
+            token,
+          })
+          set({ user, isLoading: false })
+        } catch {
+          set({ token: null, refreshToken: null, user: null, isLoading: false })
+        }
+      },
+    }),
+    {
+      name: "auth-storage",
+      partialize: (state) => ({
+        token: state.token,
+        refreshToken: state.refreshToken,
+        user: state.user,
+      }),
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          state.isHydrated = true
+        }
+      },
+    }
+  )
+)
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}
@@ -0,0 +1,137 @@
+import { test, expect, Page } from '@playwright/test'
+
+const adminCredentials = { username: 'admin', password: 'admin123' }
+
+// Helper: ensure user is logged in; if not, perform login flow
+async function ensureLoggedIn(page: Page) {
+  await page.goto('/dashboard', { waitUntil: 'domcontentloaded' })
+  const url = page.url()
+  if (url.includes('/login')) {
+    await page.goto('/login')
+    // Try multiple selectors for username field
+    const userSelectors = [
+      'input[name="username"]',
+      'input[name="email"]',
+      'input#username',
+      'input#email',
+      'input[placeholder="Username"]',
+      'input[placeholder="Email"]',
+    ]
+    let filledUser = false
+    for (const sel of userSelectors) {
+      const el = page.locator(sel)
+      if (await el.count() > 0) {
+        await el.fill(adminCredentials.username)
+        filledUser = true
+        break
+      }
+    }
+    if (!filledUser) {
+      const label = page.locator('label', { hasText: /username|email/i })
+      if (await label.count() > 0) {
+        const input = label.locator('xpath=following-sibling::input[1]')
+        if (await input.count() > 0) await input.fill(adminCredentials.username)
+      }
+    }
+    // Password
+    const passSelectors = [
+      'input[name="password"]',
+      'input#password',
+      'input[placeholder="Password"]',
+      'input[aria-label="Password"]',
+    ]
+    for (const sp of passSelectors) {
+      const el = page.locator(sp)
+      if (await el.count() > 0) {
+        await el.fill(adminCredentials.password)
+        break
+      }
+    }
+    const loginBtn = page.locator('button', { hasText: /log|sign in|anmelden|einloggen/i })
+    if (await loginBtn.count() > 0) {
+      await loginBtn.first().click()
+    } else {
+      await page.keyboard.press('Enter')
+    }
+    await page.waitForURL('**/dashboard', { timeout: 10000 })
+  }
+}
+
+test.describe('WrestleDesk End-to-End (Partial) - Auth and Core Views', () => {
+
+  test('Login page - valid credentials', async ({ page }) => {
+    await page.goto('/login')
+    const userSelectors = [
+      'input[name="username"]',
+      'input[name="email"]',
+      'input#username',
+      'input#email',
+      'input[placeholder="Username"]',
+      'input[placeholder="Email"]',
+    ]
+    let filled = false
+    for (const sel of userSelectors) {
+      const el = page.locator(sel)
+      if (await el.count() > 0) {
+        await el.fill(adminCredentials.username)
+        filled = true
+        break
+      }
+    }
+    if (!filled) {
+      const label = page.locator('label', { hasText: /username|email/i })
+      if (await label.count() > 0) {
+        const input = label.locator('xpath=following-sibling::input[1]')
+        if (await input.count() > 0) await input.fill(adminCredentials.username)
+      }
+    }
+    const passSelectors = [
+      'input[name="password"]',
+      'input#password',
+      'input[placeholder="Password"]',
+      'input[aria-label="Password"]',
+    ]
+    filled = false
+    for (const sp of passSelectors) {
+      const el = page.locator(sp)
+      if (await el.count() > 0) {
+        await el.fill(adminCredentials.password)
+        filled = true
+        break
+      }
+    }
+    if (!filled) {
+      const pwd = page.locator('input[type="password"]')
+      if (await pwd.count() > 0) await pwd.fill(adminCredentials.password)
+    }
+    const loginBtn = page.locator('button', { hasText: /log|sign in|anmelden|einloggen/i })
+    if (await loginBtn.count() > 0) {
+      await loginBtn.first().click()
+    } else {
+      await page.keyboard.press('Enter')
+    }
+    await page.waitForURL('**/dashboard', { timeout: 10000 })
+    await page.screenshot({ path: '/tmp/test-results/login.png', fullPage: true })
+    expect(page.url()).toContain('/dashboard')
+  })
+
+  test('Dashboard loads and navigates to Wrestlers', async ({ page }) => {
+    await ensureLoggedIn(page)
+    await expect(page).toHaveURL(/.*dashboard/)
+    const hasWrestlersCard = await page.locator('text=/Wrestlers|Wrestler(s)?/i').first().count()
+    await page.screenshot({ path: '/tmp/test-results/dashboard.png', fullPage: true })
+    expect(hasWrestlersCard).toBeGreaterThan(0)
+    const wrestlersLink = page.locator('a', { hasText: /Wrestler|Wrestlers/i })
+    if (await wrestlersLink.count() > 0) {
+      await wrestlersLink.first().click()
+      await page.waitForURL(/.*wrestlers/i)
+      await page.screenshot({ path: '/tmp/test-results/dashboard-to-wrestlers.png', fullPage: true })
+    } else {
+      await page.goto('/wrestlers')
+      await page.waitForURL(/.*wrestlers/i)
+      await page.screenshot({ path: '/tmp/test-results/navigate-wrestlers.png', fullPage: true })
+    }
+  })
+
+  // Additional blocks would be added here for Wrestlers CRUD, Trainers CRUD, etc.
+})
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`
				`@@ -0,0 +1 @@`
				`{"componentLib":"radix","style":"default","baseColor":"zinc","cssVariables":true,"tailwindConfigFile":"tailwind.config.ts","usingCssVars":true}`