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
This commit is contained in:
Andrej Spielmann
@@ -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>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user