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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ITrainingHomeworkAssignment } from "@/lib/api"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
|
||||
import { FadeIn } from "@/components/ui/animations"
|
||||
import { Check, X, Loader2, Clock, Calendar } from "lucide-react"
|
||||
|
||||
const groupConfig = {
|
||||
kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
|
||||
youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
|
||||
adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
|
||||
}
|
||||
|
||||
const categoryConfig = {
|
||||
warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
|
||||
kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
|
||||
technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
|
||||
ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
|
||||
spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
|
||||
cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
|
||||
}
|
||||
|
||||
type Status = "open" | "in_progress" | "completed"
|
||||
|
||||
interface BoardViewProps {
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
onToggleComplete: (id: number, current: boolean) => void
|
||||
togglingId: number | null
|
||||
}
|
||||
|
||||
export function BoardView({ assignments, onToggleComplete, togglingId }: BoardViewProps) {
|
||||
const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
|
||||
|
||||
const columns: { status: Status; label: string; color: string; bgColor: string }[] = [
|
||||
{ status: "open", label: "Offen", color: "text-orange-600", bgColor: "bg-orange-50 border-orange-200" },
|
||||
{ status: "in_progress", label: "In Bearbeitung", color: "text-blue-600", bgColor: "bg-blue-50 border-blue-200" },
|
||||
{ status: "completed", label: "Erledigt", color: "text-green-600", bgColor: "bg-green-50 border-green-200" },
|
||||
]
|
||||
|
||||
const getColumnAssignments = (status: Status) => {
|
||||
return assignments.filter(a => {
|
||||
if (status === "open") return !a.is_completed
|
||||
if (status === "completed") return a.is_completed
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{columns.map(col => {
|
||||
const colAssignments = getColumnAssignments(col.status)
|
||||
|
||||
return (
|
||||
<div key={col.status} className="space-y-3">
|
||||
<div className={`flex items-center justify-between p-3 rounded-lg border ${col.bgColor}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
col.status === "open" ? "bg-orange-500" :
|
||||
col.status === "in_progress" ? "bg-blue-500" : "bg-green-500"
|
||||
}`} />
|
||||
<span className={`font-semibold ${col.color}`}>{col.label}</span>
|
||||
</div>
|
||||
<Badge variant="outline">{colAssignments.length}</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 min-h-[200px]">
|
||||
{colAssignments.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm border-2 border-dashed rounded-lg">
|
||||
Keine Hausaufgaben
|
||||
</div>
|
||||
) : (
|
||||
colAssignments.map(assignment => (
|
||||
<FadeIn key={assignment.id}>
|
||||
<Card
|
||||
className="cursor-pointer hover:shadow-md transition-all hover:border-primary/50"
|
||||
onClick={() => setSelectedAssignment(assignment)}
|
||||
>
|
||||
<CardContent className="p-3 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar size="sm">
|
||||
<AvatarFallback className="bg-primary/10 text-primary text-xs">
|
||||
{assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm truncate">{assignment.wrestler_name}</div>
|
||||
<Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{new Date(assignment.training_date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" })}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{assignment.exercises.slice(0, 2).map(ex => (
|
||||
<Badge key={ex.id} variant="outline" className="text-xs">
|
||||
{ex.exercise_name}
|
||||
</Badge>
|
||||
))}
|
||||
{assignment.exercises.length > 2 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
+{assignment.exercises.length - 2}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{assignment.exercises.length} Übung{assignment.exercises.length !== 1 ? 'en' : ''}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onToggleComplete(assignment.id, assignment.is_completed)
|
||||
}}
|
||||
disabled={togglingId === assignment.id}
|
||||
>
|
||||
{togglingId === assignment.id ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : assignment.is_completed ? (
|
||||
<X className="w-3 h-3 text-red-500" />
|
||||
) : (
|
||||
<Check className="w-3 h-3 text-green-500" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
|
||||
<SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{selectedAssignment?.wrestler_name}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{selectedAssignment && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className={groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={selectedAssignment.is_completed ? "default" : "secondary"}
|
||||
className={selectedAssignment.is_completed ? "bg-green-600" : ""}
|
||||
>
|
||||
{selectedAssignment.is_completed ? "Erledigt" : "Offen"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Training</h4>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="w-4 h-4 text-muted-foreground" />
|
||||
{new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Übungen ({selectedAssignment.exercises.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedAssignment.exercises.map((ex, idx) => (
|
||||
<div key={ex.id} className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
|
||||
<Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
|
||||
{categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
|
||||
</Badge>
|
||||
<span className="flex-1 text-sm">{ex.exercise_name}</span>
|
||||
{ex.reps && <span className="text-sm text-muted-foreground">{ex.reps}x</span>}
|
||||
{ex.time_minutes && <span className="text-sm text-muted-foreground">{ex.time_minutes}s</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedAssignment.notes && (
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Notizen</h4>
|
||||
<p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
|
||||
setSelectedAssignment(null)
|
||||
}}
|
||||
disabled={togglingId === selectedAssignment.id}
|
||||
className="w-full"
|
||||
>
|
||||
{togglingId === selectedAssignment.id ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : selectedAssignment.is_completed ? (
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ITrainingHomeworkAssignment } from "@/lib/api"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
|
||||
import { Check, X, Loader2 } from "lucide-react"
|
||||
|
||||
const groupConfig = {
|
||||
kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
|
||||
youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
|
||||
adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
|
||||
}
|
||||
|
||||
const categoryConfig = {
|
||||
warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
|
||||
kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
|
||||
technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
|
||||
ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
|
||||
spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
|
||||
cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
|
||||
}
|
||||
|
||||
interface TableViewProps {
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
onToggleComplete: (id: number, current: boolean) => void
|
||||
togglingId: number | null
|
||||
}
|
||||
|
||||
export function TableView({ assignments, onToggleComplete, togglingId }: TableViewProps) {
|
||||
const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
|
||||
|
||||
const sortedAssignments = [...assignments].sort((a, b) => {
|
||||
if (a.is_completed !== b.is_completed) return a.is_completed ? 1 : -1
|
||||
return new Date(b.training_date).getTime() - new Date(a.training_date).getTime()
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border rounded-xl overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="w-12">Status</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Gruppe</TableHead>
|
||||
<TableHead>Training</TableHead>
|
||||
<TableHead>Übungen</TableHead>
|
||||
<TableHead className="text-right">Aktion</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedAssignments.map(assignment => (
|
||||
<TableRow
|
||||
key={assignment.id}
|
||||
className={`cursor-pointer hover:bg-muted/50 ${assignment.is_completed ? 'opacity-60' : ''}`}
|
||||
onClick={() => setSelectedAssignment(assignment)}
|
||||
>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant={assignment.is_completed ? "default" : "outline"}
|
||||
className={`${assignment.is_completed ? 'bg-green-600' : 'border-orange-300 text-orange-600'}`}
|
||||
>
|
||||
{assignment.is_completed ? (
|
||||
<Check className="w-3 h-3 mr-1" />
|
||||
) : (
|
||||
<X className="w-3 h-3 mr-1" />
|
||||
)}
|
||||
{assignment.is_completed ? 'Erledigt' : 'Offen'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar size="sm">
|
||||
<AvatarFallback className="bg-primary/10 text-primary text-xs">
|
||||
{assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="font-medium">{assignment.wrestler_name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-sm">
|
||||
{new Date(assignment.training_date).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" })}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1 max-w-[200px]">
|
||||
{assignment.exercises.slice(0, 2).map(ex => (
|
||||
<Badge key={ex.id} variant="outline" className="text-xs">
|
||||
{ex.exercise_name}
|
||||
</Badge>
|
||||
))}
|
||||
{assignment.exercises.length > 2 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
+{assignment.exercises.length - 2}
|
||||
</Badge>
|
||||
)}
|
||||
{assignment.exercises.length === 0 && (
|
||||
<span className="text-xs text-muted-foreground">Keine</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onToggleComplete(assignment.id, assignment.is_completed)}
|
||||
disabled={togglingId === assignment.id}
|
||||
>
|
||||
{togglingId === assignment.id ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : assignment.is_completed ? (
|
||||
<X className="w-4 h-4 text-red-500" />
|
||||
) : (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
)}
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
|
||||
<SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{selectedAssignment?.wrestler_name}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{selectedAssignment && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge className={groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[selectedAssignment.wrestler_group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={selectedAssignment.is_completed ? "default" : "secondary"}
|
||||
className={selectedAssignment.is_completed ? "bg-green-600" : ""}
|
||||
>
|
||||
{selectedAssignment.is_completed ? "Erledigt" : "Offen"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Training</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Übungen ({selectedAssignment.exercises.length})</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedAssignment.exercises.map((ex, idx) => (
|
||||
<div key={ex.id} className="flex items-center gap-3 p-2 bg-muted/30 rounded">
|
||||
<span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
|
||||
<Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
|
||||
{categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
|
||||
</Badge>
|
||||
<span className="flex-1 text-sm">{ex.exercise_name}</span>
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
{ex.reps && `${ex.reps}x`}
|
||||
{ex.time_minutes && `${ex.time_minutes}s`}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedAssignment.notes && (
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Notizen</h4>
|
||||
<p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
|
||||
setSelectedAssignment(null)
|
||||
}}
|
||||
disabled={togglingId === selectedAssignment.id}
|
||||
className="w-full"
|
||||
>
|
||||
{togglingId === selectedAssignment.id ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : selectedAssignment.is_completed ? (
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ITrainingHomeworkAssignment } from "@/lib/api"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
|
||||
import { FadeIn } from "@/components/ui/animations"
|
||||
import { Check, X, Loader2, Calendar, ChevronRight, Dumbbell } from "lucide-react"
|
||||
|
||||
const groupConfig = {
|
||||
kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
|
||||
youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
|
||||
adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
|
||||
}
|
||||
|
||||
const categoryConfig = {
|
||||
warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
|
||||
kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
|
||||
technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
|
||||
ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
|
||||
spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
|
||||
cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
|
||||
}
|
||||
|
||||
interface GroupedByDate {
|
||||
date: string
|
||||
displayDate: string
|
||||
dayName: string
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
completedCount: number
|
||||
}
|
||||
|
||||
interface TimelineViewProps {
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
onToggleComplete: (id: number, current: boolean) => void
|
||||
togglingId: number | null
|
||||
}
|
||||
|
||||
export function TimelineView({ assignments, onToggleComplete, togglingId }: TimelineViewProps) {
|
||||
const [selectedAssignment, setSelectedAssignment] = useState<ITrainingHomeworkAssignment | null>(null)
|
||||
|
||||
const groupedByDate: GroupedByDate[] = assignments.reduce((acc, assignment) => {
|
||||
const dateKey = assignment.training_date
|
||||
const existing = acc.find(g => g.date === dateKey)
|
||||
if (existing) {
|
||||
existing.assignments.push(assignment)
|
||||
if (assignment.is_completed) existing.completedCount++
|
||||
} else {
|
||||
const dateObj = new Date(dateKey)
|
||||
const dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
|
||||
acc.push({
|
||||
date: dateKey,
|
||||
displayDate: dateObj.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" }),
|
||||
dayName: dayNames[dateObj.getDay()],
|
||||
assignments: [assignment],
|
||||
completedCount: assignment.is_completed ? 1 : 0,
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [] as GroupedByDate[])
|
||||
|
||||
groupedByDate.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
|
||||
const today = new Date().toISOString().split("T")[0]
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border" />
|
||||
|
||||
<div className="space-y-6">
|
||||
{groupedByDate.map((dayGroup) => {
|
||||
const isToday = dayGroup.date === today
|
||||
const isPast = dayGroup.date < today
|
||||
|
||||
return (
|
||||
<FadeIn key={dayGroup.date}>
|
||||
<div className="relative pl-14">
|
||||
<div className={`absolute left-3 w-6 h-6 rounded-full flex items-center justify-center ${
|
||||
isToday
|
||||
? 'bg-green-500 text-white ring-4 ring-green-100'
|
||||
: isPast
|
||||
? 'bg-muted text-muted-foreground'
|
||||
: 'bg-primary text-primary-foreground'
|
||||
}`}>
|
||||
{isToday ? (
|
||||
<Calendar className="w-3 h-3" />
|
||||
) : (
|
||||
<div className="w-2 h-2 rounded-full bg-current" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`font-semibold ${isToday ? 'text-green-600' : ''}`}>
|
||||
{isToday ? 'Heute' : dayGroup.dayName}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{dayGroup.displayDate}</span>
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{dayGroup.completedCount}/{dayGroup.assignments.length}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{dayGroup.assignments.map(assignment => (
|
||||
<Card
|
||||
key={assignment.id}
|
||||
className={`cursor-pointer hover:shadow-md transition-all ${
|
||||
assignment.is_completed ? 'opacity-75' : ''
|
||||
} ${isToday ? 'border-green-200' : ''}`}
|
||||
onClick={() => setSelectedAssignment(assignment)}
|
||||
>
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar size="sm">
|
||||
<AvatarFallback className="bg-primary/10 text-primary">
|
||||
{assignment.wrestler_name?.split(" ").map(n => n[0]).slice(0,2).join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm truncate">{assignment.wrestler_name}</span>
|
||||
<Badge className={groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[assignment.wrestler_group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
{assignment.exercises.slice(0, 3).map(ex => (
|
||||
<Badge key={ex.id} variant="outline" className="text-xs">
|
||||
{ex.exercise_name}
|
||||
</Badge>
|
||||
))}
|
||||
{assignment.exercises.length > 3 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
+{assignment.exercises.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant={assignment.is_completed ? "default" : "secondary"}
|
||||
className={assignment.is_completed ? "bg-green-600" : ""}
|
||||
>
|
||||
{assignment.is_completed ? "✓" : "○"}
|
||||
</Badge>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Sheet open={!!selectedAssignment} onOpenChange={() => setSelectedAssignment(null)}>
|
||||
<SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{selectedAssignment?.wrestler_name}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{selectedAssignment && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{new Date(selectedAssignment.training_date).toLocaleDateString("de-DE", { weekday: "long", day: "numeric", month: "long" })}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={selectedAssignment.is_completed ? "default" : "secondary"}
|
||||
className={selectedAssignment.is_completed ? "bg-green-600" : ""}
|
||||
>
|
||||
{selectedAssignment.is_completed ? "Erledigt" : "Offen"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Übungen</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedAssignment.exercises.map((ex, idx) => (
|
||||
<div key={ex.id} className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground w-6">{idx + 1}.</span>
|
||||
<Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
|
||||
{categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
|
||||
</Badge>
|
||||
<span className="flex-1 text-sm">{ex.exercise_name}</span>
|
||||
{ex.reps && <span className="text-sm text-muted-foreground">{ex.reps}x</span>}
|
||||
{ex.time_minutes && <span className="text-sm text-muted-foreground">{ex.time_minutes}s</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedAssignment.notes && (
|
||||
<div className="border rounded-lg p-4">
|
||||
<h4 className="font-medium mb-2">Notizen</h4>
|
||||
<p className="text-sm text-muted-foreground">{selectedAssignment.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onToggleComplete(selectedAssignment.id, selectedAssignment.is_completed)
|
||||
setSelectedAssignment(null)
|
||||
}}
|
||||
disabled={togglingId === selectedAssignment.id}
|
||||
className="w-full"
|
||||
>
|
||||
{togglingId === selectedAssignment.id ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : selectedAssignment.is_completed ? (
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{selectedAssignment.is_completed ? "Als unerledigt markieren" : "Als erledigt markieren"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useAuth } from "@/lib/auth"
|
||||
import { apiFetch, ITrainingHomeworkAssignment, PaginatedResponse } from "@/lib/api"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
|
||||
import { FadeIn } from "@/components/ui/animations"
|
||||
import { Check, X, Loader2, BookOpen, Calendar, Dumbbell } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
const groupConfig = {
|
||||
kids: { label: "Kinder", class: "bg-primary/10 text-primary" },
|
||||
youth: { label: "Jugend", class: "bg-secondary/10 text-secondary" },
|
||||
adults: { label: "Erwachsene", class: "bg-accent/10 text-accent" },
|
||||
}
|
||||
|
||||
const categoryConfig = {
|
||||
warmup: { label: "Aufwärmen", class: "bg-primary/10 text-primary" },
|
||||
kraft: { label: "Kraft", class: "bg-destructive/10 text-destructive" },
|
||||
technik: { label: "Technik", class: "bg-secondary/10 text-secondary" },
|
||||
ausdauer: { label: "Ausdauer", class: "bg-accent/10 text-accent" },
|
||||
spiele: { label: "Spiele", class: "bg-muted text-muted-foreground" },
|
||||
cool_down: { label: "Abkühlung", class: "bg-primary/5 text-primary" },
|
||||
}
|
||||
|
||||
interface GroupedByWrestler {
|
||||
wrestlerId: number
|
||||
wrestlerName: string
|
||||
wrestlerGroup: string
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
completedCount: number
|
||||
totalCount: number
|
||||
}
|
||||
|
||||
interface WrestlerCentricViewProps {
|
||||
assignments: ITrainingHomeworkAssignment[]
|
||||
onToggleComplete: (id: number, current: boolean) => void
|
||||
togglingId: number | null
|
||||
}
|
||||
|
||||
export function WrestlerCentricView({ assignments, onToggleComplete, togglingId }: WrestlerCentricViewProps) {
|
||||
const [selectedWrestler, setSelectedWrestler] = useState<GroupedByWrestler | null>(null)
|
||||
|
||||
// Group assignments by wrestler
|
||||
const groupedByWrestler: GroupedByWrestler[] = assignments.reduce((acc, assignment) => {
|
||||
const existing = acc.find(g => g.wrestlerId === assignment.wrestler)
|
||||
if (existing) {
|
||||
existing.assignments.push(assignment)
|
||||
if (assignment.is_completed) existing.completedCount++
|
||||
existing.totalCount++
|
||||
} else {
|
||||
acc.push({
|
||||
wrestlerId: assignment.wrestler,
|
||||
wrestlerName: assignment.wrestler_name,
|
||||
wrestlerGroup: assignment.wrestler_group,
|
||||
assignments: [assignment],
|
||||
completedCount: assignment.is_completed ? 1 : 0,
|
||||
totalCount: 1,
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [] as GroupedByWrestler[])
|
||||
|
||||
// Sort wrestlers by: those with incomplete homework first, then by name
|
||||
groupedByWrestler.sort((a, b) => {
|
||||
const aIncomplete = a.totalCount - a.completedCount
|
||||
const bIncomplete = b.totalCount - b.completedCount
|
||||
if (aIncomplete !== bIncomplete) return bIncomplete - aIncomplete
|
||||
return a.wrestlerName.localeCompare(b.wrestlerName)
|
||||
})
|
||||
|
||||
const getProgress = (wrestler: GroupedByWrestler) => {
|
||||
if (wrestler.totalCount === 0) return 0
|
||||
return Math.round((wrestler.completedCount / wrestler.totalCount) * 100)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{groupedByWrestler.map((wrestler) => {
|
||||
const progress = getProgress(wrestler)
|
||||
const isComplete = progress === 100
|
||||
|
||||
return (
|
||||
<FadeIn key={wrestler.wrestlerId}>
|
||||
<Card
|
||||
className={`cursor-pointer hover:shadow-md transition-all ${isComplete ? 'opacity-75' : ''}`}
|
||||
onClick={() => setSelectedWrestler(wrestler)}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar size="default">
|
||||
<AvatarFallback className="bg-primary/10 text-primary">
|
||||
{wrestler.wrestlerName?.split(" ").map(n => n[0]).slice(0,2).join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<CardTitle className="text-base">{wrestler.wrestlerName}</CardTitle>
|
||||
<Badge className={groupConfig[wrestler.wrestlerGroup as keyof typeof groupConfig]?.class}>
|
||||
{groupConfig[wrestler.wrestlerGroup as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className={`text-lg font-bold ${isComplete ? 'text-green-600' : 'text-orange-500'}`}>
|
||||
{wrestler.completedCount}/{wrestler.totalCount}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{isComplete ? 'Alle erledigt' : 'Offen'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-3">
|
||||
<Progress value={progress} className="flex-1 h-2" />
|
||||
<span className="text-sm font-medium w-12">{progress}%</span>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
Letztes Training: {wrestler.assignments[0]?.training_date
|
||||
? new Date(wrestler.assignments[0].training_date).toLocaleDateString("de-DE")
|
||||
: "Keine"}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</FadeIn>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Detail Sheet */}
|
||||
<Sheet open={!!selectedWrestler} onOpenChange={() => setSelectedWrestler(null)}>
|
||||
<SheetContent side="right" className="w-[400px] sm:max-w-[400px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{selectedWrestler?.wrestlerName}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{selectedWrestler && (
|
||||
<div className="mt-4 space-y-4">
|
||||
{selectedWrestler.assignments
|
||||
.sort((a, b) => new Date(b.training_date).getTime() - new Date(a.training_date).getTime())
|
||||
.map(assignment => (
|
||||
<div key={assignment.id} className="border rounded-lg p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{new Date(assignment.training_date).toLocaleDateString("de-DE")}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={assignment.is_completed ? "default" : "secondary"}
|
||||
className={assignment.is_completed ? "bg-green-600" : ""}
|
||||
>
|
||||
{assignment.is_completed ? "Erledigt" : "Offen"}
|
||||
</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onToggleComplete(assignment.id, assignment.is_completed)}
|
||||
disabled={togglingId === assignment.id}
|
||||
>
|
||||
{togglingId === assignment.id ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : assignment.is_completed ? (
|
||||
<X className="w-4 h-4 text-red-500" />
|
||||
) : (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{assignment.exercises.map(ex => (
|
||||
<div key={ex.id} className="flex items-center gap-2 text-sm">
|
||||
<Badge className={categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.class}>
|
||||
{categoryConfig[ex.exercise_category as keyof typeof categoryConfig]?.label}
|
||||
</Badge>
|
||||
<span>{ex.exercise_name}</span>
|
||||
{ex.reps && <span className="text-muted-foreground">{ex.reps}x</span>}
|
||||
{ex.time_minutes && <span className="text-muted-foreground">{ex.time_minutes}s</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{assignment.notes && (
|
||||
<p className="mt-2 text-xs text-muted-foreground border-t pt-2">
|
||||
{assignment.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
UserCog,
|
||||
Dumbbell,
|
||||
CalendarDays,
|
||||
BookOpen,
|
||||
FileText,
|
||||
Settings,
|
||||
LogOut,
|
||||
Building2,
|
||||
Trophy,
|
||||
MapPin,
|
||||
} from "lucide-react"
|
||||
import { useAuth } from "@/lib/auth"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
const navigation = [
|
||||
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Clubs", href: "/clubs", icon: Building2 },
|
||||
{ name: "Orte", href: "/locations", icon: MapPin },
|
||||
{ name: "Ringer", href: "/wrestlers", icon: Users },
|
||||
{ name: "Trainer", href: "/trainers", icon: UserCog },
|
||||
{ name: "Übungen", href: "/exercises", icon: Dumbbell },
|
||||
{ name: "Training", href: "/trainings", icon: CalendarDays },
|
||||
{ name: "Vorlagen", href: "/templates", icon: FileText },
|
||||
{ name: "Hausaufgaben", href: "/homework", icon: BookOpen },
|
||||
{ name: "Leistungstest", href: "/leistungstest", icon: Trophy },
|
||||
]
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname()
|
||||
const { logout, user } = useAuth()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-64 bg-sidebar text-sidebar-foreground min-h-screen border-r border-sidebar-border">
|
||||
<div className="p-6">
|
||||
<motion.h1
|
||||
className="text-xl font-bold text-sidebar-primary"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
WrestleDesk
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 space-y-1">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="block"
|
||||
>
|
||||
<motion.div
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium",
|
||||
isActive
|
||||
? "bg-sidebar-accent text-sidebar-accent-foreground"
|
||||
: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
||||
)}
|
||||
whileHover={{ x: 2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<motion.div
|
||||
className="text-sidebar-accent-foreground"
|
||||
>
|
||||
<item.icon className="w-5 h-5" />
|
||||
</motion.div>
|
||||
<span>{item.name}</span>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="ml-auto w-1 h-4 rounded-full bg-sidebar-primary"
|
||||
layoutId="activeIndicator"
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-sidebar-border">
|
||||
<Link href="/settings" className="block mb-2">
|
||||
<motion.div
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
||||
whileHover={{ x: 2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<Settings className="w-5 h-5" />
|
||||
Einstellungen
|
||||
</motion.div>
|
||||
</Link>
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<motion.span
|
||||
className="text-sm text-sidebar-foreground"
|
||||
whileHover={{ opacity: 0.8 }}
|
||||
>
|
||||
{user?.username}
|
||||
</motion.span>
|
||||
<motion.button
|
||||
onClick={logout}
|
||||
className="p-1 rounded hover:bg-sidebar-accent transition-colors"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<LogOut className="w-5 h-5 text-sidebar-foreground" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client"
|
||||
|
||||
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Root
|
||||
data-slot="accordion"
|
||||
className={cn("flex w-full flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("not-last:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: AccordionPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
|
||||
<ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: AccordionPrimitive.Panel.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Panel
|
||||
data-slot="accordion-content"
|
||||
className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</AccordionPrimitive.Panel>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
@@ -0,0 +1,76 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"font-heading font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-action"
|
||||
className={cn("absolute top-2 right-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription, AlertAction }
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client"
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
export function PageTransition({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={pathname}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="h-full"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export function FadeIn({
|
||||
children,
|
||||
className = "",
|
||||
delay = 0,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
delay?: number
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.25, ease: "easeOut", delay }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export function StaggeredList({
|
||||
children,
|
||||
className = "",
|
||||
staggerDelay = 0.05,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
staggerDelay?: number
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: staggerDelay }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export const listItemVariants = {
|
||||
hidden: { opacity: 0, y: 8 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.2, ease: "easeOut" as const }
|
||||
}
|
||||
}
|
||||
|
||||
export function CardHover({
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
whileHover={{ y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.15)" }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: AvatarPrimitive.Root.Props & {
|
||||
size?: "default" | "sm" | "lg"
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn(
|
||||
"aspect-square size-full rounded-full object-cover",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: AvatarPrimitive.Fallback.Props) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="avatar-badge"
|
||||
className={cn(
|
||||
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
||||
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
||||
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
||||
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group"
|
||||
className={cn(
|
||||
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroupCount({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group-count"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
AvatarGroup,
|
||||
AvatarGroupCount,
|
||||
AvatarBadge,
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return useRender({
|
||||
defaultTagName: "span",
|
||||
props: mergeProps<"span">(
|
||||
{
|
||||
className: cn(badgeVariants({ variant }), className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "badge",
|
||||
variant,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,318 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback } from "react"
|
||||
import { Calendar, dateFnsLocalizer, Views, SlotInfo } from "react-big-calendar"
|
||||
import { format, parse, startOfWeek, getDay, startOfMonth, endOfMonth, addMonths, subMonths } from "date-fns"
|
||||
import { de } from "date-fns/locale"
|
||||
import "react-big-calendar/lib/css/react-big-calendar.css"
|
||||
import "./calendar.css"
|
||||
|
||||
import { ITraining } from "@/lib/api"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet"
|
||||
import { ConfirmModal } from "@/components/ui/modal"
|
||||
import { useAuth } from "@/lib/auth"
|
||||
import { apiFetch, PaginatedResponse } from "@/lib/api"
|
||||
import { toast } from "sonner"
|
||||
|
||||
const groupConfig = {
|
||||
kids: { label: "Kinder", class: "bg-primary/10 text-primary border-primary/20" },
|
||||
youth: { label: "Jugend", class: "bg-secondary/10 text-secondary border-secondary/20" },
|
||||
adults: { label: "Erwachsene", class: "bg-accent/10 text-accent border-accent/20" },
|
||||
all: { label: "Alle", class: "bg-muted text-muted-foreground" },
|
||||
}
|
||||
|
||||
const groupColors = {
|
||||
kids: { bg: "rgba(59, 130, 246, 0.15)", text: "#1E40AF", border: "#3B82F6" },
|
||||
youth: { bg: "rgba(139, 92, 246, 0.15)", text: "#5B21B6", border: "#8B5CF6" },
|
||||
adults: { bg: "rgba(249, 115, 22, 0.15)", text: "#9A3412", border: "#F97316" },
|
||||
all: { bg: "rgba(100, 100, 100, 0.15)", text: "#404040", border: "#666666" },
|
||||
}
|
||||
|
||||
const locales = { "de": de }
|
||||
|
||||
const localizer = dateFnsLocalizer({
|
||||
format,
|
||||
parse,
|
||||
startOfWeek: () => startOfWeek(new Date(), { locale: de }),
|
||||
getDay,
|
||||
locales,
|
||||
})
|
||||
|
||||
interface CalendarViewProps {
|
||||
onEdit: (training: ITraining) => void
|
||||
onDelete: (id: number) => void
|
||||
onView: (training: ITraining) => void
|
||||
onCreate: (date: Date) => void
|
||||
filters: { group: string; date_from: string; date_to: string }
|
||||
refreshTrigger: number
|
||||
}
|
||||
|
||||
interface CalendarEvent {
|
||||
id: number
|
||||
title: string
|
||||
start: Date
|
||||
end: Date
|
||||
resource: ITraining
|
||||
}
|
||||
|
||||
export function CalendarView({ onEdit, onDelete, onView, onCreate, filters, refreshTrigger }: CalendarViewProps) {
|
||||
const { token } = useAuth()
|
||||
const [currentDate, setCurrentDate] = useState(new Date())
|
||||
const [trainings, setTrainings] = useState<ITraining[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [selectedDayTrainings, setSelectedDayTrainings] = useState<ITraining[]>([])
|
||||
const [selectedDay, setSelectedDay] = useState<Date | null>(null)
|
||||
const [sheetOpen, setSheetOpen] = useState(false)
|
||||
const [createPromptOpen, setCreatePromptOpen] = useState(false)
|
||||
const [createPromptDate, setCreatePromptDate] = useState<Date | null>(null)
|
||||
|
||||
const fetchTrainings = useCallback(async (date: Date, groupFilter: string) => {
|
||||
if (!token) return
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const start = startOfMonth(subMonths(date, 1))
|
||||
const end = endOfMonth(addMonths(date, 1))
|
||||
const params = new URLSearchParams()
|
||||
params.set("date_from", format(start, "yyyy-MM-dd"))
|
||||
params.set("date_to", format(end, "yyyy-MM-dd"))
|
||||
params.set("page_size", "100")
|
||||
if (groupFilter && groupFilter !== "all") {
|
||||
params.set("group", groupFilter)
|
||||
}
|
||||
|
||||
const data = await apiFetch<PaginatedResponse<ITraining>>(`/trainings/?${params.toString()}`, { token })
|
||||
setTrainings(data.results || [])
|
||||
} catch {
|
||||
toast.error("Fehler beim Laden der Trainingseinheiten")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [token])
|
||||
|
||||
useEffect(() => {
|
||||
fetchTrainings(currentDate, filters.group)
|
||||
}, [fetchTrainings, currentDate, filters.group, refreshTrigger])
|
||||
|
||||
const events: CalendarEvent[] = useMemo(() => {
|
||||
return trainings
|
||||
.filter(t => t.date)
|
||||
.map(t => ({
|
||||
id: t.id,
|
||||
title: `${t.start_time || ""} - ${t.group ? groupConfig[t.group as keyof typeof groupConfig]?.label : ""}`,
|
||||
start: new Date(`${t.date}T${t.start_time || "00:00"}`),
|
||||
end: new Date(`${t.date}T${t.end_time || "23:59"}`),
|
||||
resource: t,
|
||||
}))
|
||||
}, [trainings])
|
||||
|
||||
const handleSelectEvent = useCallback((event: CalendarEvent) => {
|
||||
onView(event.resource)
|
||||
}, [onView])
|
||||
|
||||
const handleSelectSlot = useCallback((slotInfo: SlotInfo) => {
|
||||
const dayTrainings = trainings.filter(t => {
|
||||
const trainingDate = new Date(t.date)
|
||||
return format(trainingDate, "yyyy-MM-dd") === format(slotInfo.start, "yyyy-MM-dd")
|
||||
})
|
||||
setSelectedDay(slotInfo.start)
|
||||
setSelectedDayTrainings(dayTrainings)
|
||||
setCreatePromptDate(slotInfo.start)
|
||||
setCreatePromptOpen(true)
|
||||
}, [trainings])
|
||||
|
||||
const handleCreatePrompt = () => {
|
||||
if (createPromptDate) {
|
||||
onCreate(createPromptDate)
|
||||
}
|
||||
setCreatePromptOpen(false)
|
||||
}
|
||||
|
||||
const eventStyleGetter = useCallback((event: CalendarEvent) => {
|
||||
const group = (event.resource && event.resource.group) || "all"
|
||||
const colors = groupColors[group as keyof typeof groupColors]
|
||||
return {
|
||||
style: {
|
||||
backgroundColor: colors.bg,
|
||||
borderLeft: `3px solid ${colors.border}`,
|
||||
borderRadius: "0.25rem",
|
||||
border: "none",
|
||||
color: colors.text,
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const CustomEvent = ({ event }: { event: CalendarEvent }) => {
|
||||
const [showTooltip, setShowTooltip] = useState(false)
|
||||
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={(e) => {
|
||||
const evt: any = e
|
||||
setShowTooltip(true)
|
||||
setTooltipPos({ x: evt.clientX, y: evt.clientY - 10 })
|
||||
}}
|
||||
onMouseLeave={() => setShowTooltip(false)}
|
||||
onMouseMove={(e) => {
|
||||
const evt: any = e
|
||||
setTooltipPos({ x: evt.clientX, y: evt.clientY - 10 })
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<span className="font-medium">{event.resource.start_time}</span>
|
||||
</div>
|
||||
{showTooltip && (
|
||||
<div
|
||||
className="fixed z-50 bg-background border rounded-lg shadow-lg p-3 text-sm pointer-events-none"
|
||||
style={{
|
||||
left: tooltipPos.x,
|
||||
top: tooltipPos.y,
|
||||
transform: 'translateY(-100%) translateX(-50%)',
|
||||
minWidth: 180
|
||||
}}
|
||||
>
|
||||
<div className="font-medium mb-1">
|
||||
{event.resource.start_time} - {event.resource.end_time}
|
||||
</div>
|
||||
<Badge
|
||||
className={groupConfig[event.resource.group as keyof typeof groupConfig]?.class}
|
||||
>
|
||||
{groupConfig[event.resource.group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
<div className="text-xs text-muted-foreground mt-2 flex items-center gap-1">
|
||||
<span className="h-3 w-3">📍</span>
|
||||
{event.resource.location_name || "Kein Ort"}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
|
||||
<span className="h-3 w-3">👥</span>
|
||||
{event.resource.attendance_count || 0} Teilnehmer
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomToolbar = ({ label, onNavigate }: { label: string, onNavigate: (action: "PREV" | "NEXT" | "TODAY") => void }) => (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => onNavigate("PREV")}>
|
||||
‹
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => onNavigate("TODAY")}>
|
||||
Heute
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => onNavigate("NEXT")}>
|
||||
›
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-lg font-semibold">{label}</span>
|
||||
<div className="w-[100px]" />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<style>{`
|
||||
.rbc-calendar { height: calc(100vh - 280px); min-height: 500px; }
|
||||
`}</style>
|
||||
|
||||
<Calendar
|
||||
localizer={localizer}
|
||||
events={events}
|
||||
startAccessor="start"
|
||||
endAccessor="end"
|
||||
view={Views.MONTH}
|
||||
views={[Views.MONTH]}
|
||||
date={currentDate}
|
||||
onNavigate={setCurrentDate}
|
||||
onSelectEvent={handleSelectEvent}
|
||||
onSelectSlot={handleSelectSlot}
|
||||
selectable
|
||||
eventPropGetter={eventStyleGetter}
|
||||
components={{
|
||||
event: CustomEvent,
|
||||
toolbar: CustomToolbar,
|
||||
}}
|
||||
messages={{
|
||||
today: "Heute",
|
||||
month: "Monat",
|
||||
week: "Woche",
|
||||
day: "Tag",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
||||
<SheetContent side="bottom" className="h-[50vh] sm:max-w-[600px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
{selectedDay ? format(selectedDay, "EEEE, d. MMMM yyyy", { locale: de }) : ""}
|
||||
</SheetTitle>
|
||||
<SheetDescription>
|
||||
Trainings an diesem Tag
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="mt-4 space-y-3 max-h-[calc(50vh-100px)] overflow-y-auto">
|
||||
{selectedDayTrainings.length === 0 ? (
|
||||
<p className="text-muted-foreground text-center py-8">
|
||||
Keine Trainings an diesem Tag
|
||||
</p>
|
||||
) : (
|
||||
selectedDayTrainings.map(training => (
|
||||
<div
|
||||
key={training.id}
|
||||
className="flex items-center justify-between p-4 rounded-xl border hover:bg-muted/50 transition-all cursor-pointer"
|
||||
style={{
|
||||
borderLeftWidth: 4,
|
||||
borderLeftColor: groupColors[training.group as keyof typeof groupColors]?.border || "#666"
|
||||
}}
|
||||
onClick={() => {
|
||||
onView(training)
|
||||
setSheetOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-lg font-semibold">
|
||||
{training.start_time} - {training.end_time}
|
||||
</div>
|
||||
<Badge
|
||||
className={groupConfig[training.group as keyof typeof groupConfig]?.class}
|
||||
>
|
||||
{groupConfig[training.group as keyof typeof groupConfig]?.label}
|
||||
</Badge>
|
||||
{training.location_name && (
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<span className="h-3 w-3">📍</span>
|
||||
{training.location_name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<span className="h-3 w-3">👥</span>
|
||||
<span className="font-medium">{training.attendance_count || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<ConfirmModal
|
||||
open={createPromptOpen}
|
||||
onOpenChange={setCreatePromptOpen}
|
||||
title="Training erstellen"
|
||||
description={
|
||||
createPromptDate
|
||||
? `Am ${format(createPromptDate, "EEEE, d. MMMM yyyy", { locale: de })} ist kein Training geplant. Möchtest du ein Training erstellen?`
|
||||
: "Möchtest du ein Training erstellen?"
|
||||
}
|
||||
confirmLabel="Ja, Training erstellen"
|
||||
onConfirm={handleCreatePrompt}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
.rbc-calendar {
|
||||
font-family: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rbc-toolbar {
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.rbc-toolbar button {
|
||||
color: hsl(var(--foreground));
|
||||
border: 1px solid hsl(var(--border));
|
||||
background: transparent;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rbc-toolbar button:hover {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.rbc-toolbar button.rbc-active {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
border-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.rbc-toolbar-label {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.rbc-header {
|
||||
padding: 0.75rem 0;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.rbc-month-view {
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rbc-month-row {
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.rbc-month-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rbc-day-bg {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.rbc-day-bg:hover {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
.rbc-today {
|
||||
background: hsl(142, 76%, 96%);
|
||||
border: 2px solid hsl(142, 76%, 45%);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rbc-off-range-bg {
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
}
|
||||
|
||||
.rbc-date-cell {
|
||||
padding: 0.5rem;
|
||||
text-align: right;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.rbc-date-cell > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rbc-today .rbc-date-cell {
|
||||
font-weight: 700;
|
||||
color: hsl(142, 76%, 30%);
|
||||
}
|
||||
|
||||
.rbc-event {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 3px solid;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.rbc-event.rbc-selected {
|
||||
background: hsl(var(--primary) / 0.8);
|
||||
}
|
||||
|
||||
.rbc-show-more {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rbc-overlay {
|
||||
background: hsl(var(--background));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
padding: 0.5rem;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.rbc-overlay-header {
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
padding: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -0,0 +1,160 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: DialogPrimitive.Popup.Props & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Description.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Popup.Props &
|
||||
Pick<
|
||||
MenuPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<MenuPrimitive.Portal>
|
||||
<MenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</MenuPrimitive.Positioner>
|
||||
</MenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.GroupLabel
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: MenuPrimitive.Item.Props & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</MenuPrimitive.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
align = "start",
|
||||
alignOffset = -3,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||
return (
|
||||
<MenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<MenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { LucideIcon } from "lucide-react"
|
||||
import { FolderOpen, Plus } from "lucide-react"
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: LucideIcon
|
||||
title: string
|
||||
description: string
|
||||
action?: {
|
||||
label: string
|
||||
onClick: () => void
|
||||
}
|
||||
}
|
||||
|
||||
export function EmptyState({ icon: Icon = FolderOpen, title, description, action }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 px-4 text-center animate-in fade-in duration-300">
|
||||
<div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mb-4">
|
||||
<Icon className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-1">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-6 max-w-sm">{description}</p>
|
||||
{action && (
|
||||
<Button onClick={action.onClick}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
{action.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { RotateCcw, Filter } from "lucide-react"
|
||||
|
||||
interface FilterOption {
|
||||
key: string
|
||||
label: string
|
||||
type: "text" | "select" | "date"
|
||||
options?: { value: string; label: string }[]
|
||||
}
|
||||
|
||||
interface FilterBarProps {
|
||||
filters: FilterOption[]
|
||||
onFilterChange?: (filters: Record<string, string>) => void
|
||||
}
|
||||
|
||||
export function FilterBar({ filters, onFilterChange }: FilterBarProps) {
|
||||
const [filterValues, setFilterValues] = useState<Record<string, string>>({})
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const initial: Record<string, string> = {}
|
||||
filters.forEach(f => {
|
||||
initial[f.key] = params.get(f.key) || ""
|
||||
})
|
||||
setFilterValues(initial)
|
||||
}, [])
|
||||
|
||||
const updateFilter = (key: string, value: string) => {
|
||||
const newValues = { ...filterValues, [key]: value }
|
||||
setFilterValues(newValues)
|
||||
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
if (value && value !== "all" && value !== "") {
|
||||
params.set(key, value)
|
||||
} else {
|
||||
params.delete(key)
|
||||
}
|
||||
params.delete("page")
|
||||
|
||||
const newUrl = params.toString() ? `?${params.toString()}` : window.location.pathname
|
||||
window.history.pushState({}, "", newUrl)
|
||||
|
||||
onFilterChange?.(newValues)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setFilterValues({})
|
||||
window.history.pushState({}, "", window.location.pathname)
|
||||
onFilterChange?.({})
|
||||
}
|
||||
|
||||
const hasActiveFilters = Object.values(filterValues).some(v => v && v !== "all")
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Filter className="w-4 h-4" />
|
||||
<span>Filter:</span>
|
||||
</div>
|
||||
|
||||
{filters.map((filter) => (
|
||||
<div key={filter.key} className="flex items-center gap-2">
|
||||
<Label className="text-sm text-muted-foreground">{filter.label}:</Label>
|
||||
|
||||
{filter.type === "text" && (
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Suchen..."
|
||||
value={filterValues[filter.key] || ""}
|
||||
onChange={(e) => updateFilter(filter.key, e.target.value)}
|
||||
className="h-9 w-[180px] text-sm"
|
||||
/>
|
||||
)}
|
||||
|
||||
{filter.type === "select" && (
|
||||
<Select value={filterValues[filter.key] || "all"} onValueChange={(v) => updateFilter(filter.key, v || "all")}>
|
||||
<SelectTrigger className="h-9 w-[150px]">
|
||||
<SelectValue placeholder="Alle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle</SelectItem>
|
||||
{filter.options?.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{filter.type === "date" && (
|
||||
<Input
|
||||
type="date"
|
||||
value={filterValues[filter.key] || ""}
|
||||
onChange={(e) => updateFilter(filter.key, e.target.value)}
|
||||
className="h-9 w-[150px] text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleReset}
|
||||
className="h-9 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-1" />
|
||||
Zurücksetzen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||
return (
|
||||
<label
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
interface ModalProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
title: string
|
||||
description?: string
|
||||
children: React.ReactNode
|
||||
footer?: React.ReactNode
|
||||
size?: "sm" | "md" | "lg" | "xl"
|
||||
}
|
||||
|
||||
export function Modal({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
footer,
|
||||
}: ModalProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description && <DialogDescription>{description}</DialogDescription>}
|
||||
</DialogHeader>
|
||||
<div>{children}</div>
|
||||
{footer && <DialogFooter>{footer}</DialogFooter>}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
interface ConfirmModalProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
title: string
|
||||
description: string
|
||||
confirmLabel?: string
|
||||
onConfirm: () => void
|
||||
isLoading?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}
|
||||
|
||||
export function ConfirmModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
description,
|
||||
confirmLabel = "Bestätigen",
|
||||
onConfirm,
|
||||
isLoading = false,
|
||||
variant = "default",
|
||||
}: ConfirmModalProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
variant={variant === "destructive" ? "destructive" : "default"}
|
||||
onClick={onConfirm}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
{confirmLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
"use client"
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
import { useCallback } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react"
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
totalCount: number
|
||||
pageSize: number
|
||||
onPageChange?: (page: number) => void
|
||||
}
|
||||
|
||||
export function Pagination({ currentPage, totalPages, totalCount, pageSize, onPageChange }: PaginationProps) {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const goToPage = useCallback((page: number) => {
|
||||
if (page < 1 || page > totalPages) return
|
||||
if (onPageChange) {
|
||||
onPageChange(page)
|
||||
} else {
|
||||
const params = new URLSearchParams(searchParams.toString())
|
||||
params.set("page", page.toString())
|
||||
router.replace(`?${params.toString()}`, { scroll: false })
|
||||
}
|
||||
}, [router, searchParams, totalPages, onPageChange])
|
||||
|
||||
const startItem = (currentPage - 1) * pageSize + 1
|
||||
const endItem = Math.min(currentPage * pageSize, totalCount)
|
||||
|
||||
if (totalPages <= 1) return null
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Zeige {startItem} bis {endItem} von {totalCount}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => goToPage(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
||||
let pageNum: number
|
||||
if (totalPages <= 5) {
|
||||
pageNum = i + 1
|
||||
} else if (currentPage <= 3) {
|
||||
pageNum = i + 1
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pageNum = totalPages - 4 + i
|
||||
} else {
|
||||
pageNum = currentPage - 2 + i
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={pageNum}
|
||||
variant={currentPage === pageNum ? "default" : "outline"}
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => goToPage(pageNum)}
|
||||
>
|
||||
{pageNum}
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => goToPage(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client"
|
||||
|
||||
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
children,
|
||||
value,
|
||||
...props
|
||||
}: ProgressPrimitive.Root.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
value={value}
|
||||
data-slot="progress"
|
||||
className={cn("flex flex-wrap gap-3", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ProgressTrack>
|
||||
<ProgressIndicator />
|
||||
</ProgressTrack>
|
||||
</ProgressPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Track
|
||||
className={cn(
|
||||
"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
|
||||
className
|
||||
)}
|
||||
data-slot="progress-track"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressIndicator({
|
||||
className,
|
||||
...props
|
||||
}: ProgressPrimitive.Indicator.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className={cn("h-full bg-primary transition-all", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Label
|
||||
className={cn("text-sm font-medium", className)}
|
||||
data-slot="progress-label"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
|
||||
return (
|
||||
<ProgressPrimitive.Value
|
||||
className={cn(
|
||||
"ml-auto text-sm text-muted-foreground tabular-nums",
|
||||
className
|
||||
)}
|
||||
data-slot="progress-value"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Progress,
|
||||
ProgressTrack,
|
||||
ProgressIndicator,
|
||||
ProgressLabel,
|
||||
ProgressValue,
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Root.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Scrollbar.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Scrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Thumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.Scrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -0,0 +1,201 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Select as SelectPrimitive } from "@base-ui/react/select"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Value
|
||||
data-slot="select-value"
|
||||
className={cn("flex flex-1 text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: SelectPrimitive.Trigger.Props & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon
|
||||
render={
|
||||
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
||||
}
|
||||
/>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
alignItemWithTrigger = true,
|
||||
...props
|
||||
}: SelectPrimitive.Popup.Props &
|
||||
Pick<
|
||||
SelectPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
|
||||
>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Positioner
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
alignItemWithTrigger={alignItemWithTrigger}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<SelectPrimitive.Popup
|
||||
data-slot="select-content"
|
||||
data-align-trigger={alignItemWithTrigger}
|
||||
className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.List>{children}</SelectPrimitive.List>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Popup>
|
||||
</SelectPrimitive.Positioner>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: SelectPrimitive.GroupLabel.Props) {
|
||||
return (
|
||||
<SelectPrimitive.GroupLabel
|
||||
data-slot="select-label"
|
||||
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: SelectPrimitive.Item.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
|
||||
{children}
|
||||
</SelectPrimitive.ItemText>
|
||||
<SelectPrimitive.ItemIndicator
|
||||
render={
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
|
||||
}
|
||||
>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: SelectPrimitive.Separator.Props) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpArrow
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpArrow>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownArrow
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownArrow>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: SeparatorPrimitive.Props) {
|
||||
return (
|
||||
<SeparatorPrimitive
|
||||
data-slot="separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,138 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Backdrop
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: SheetPrimitive.Popup.Props & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Popup
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close
|
||||
data-slot="sheet-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Popup>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn(
|
||||
"font-heading text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: SheetPrimitive.Description.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@@ -0,0 +1,79 @@
|
||||
"use client"
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-4 p-4 border rounded-xl">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<div className="ml-auto flex gap-2">
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardSkeleton() {
|
||||
return (
|
||||
<div className="p-6 border rounded-xl space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-4 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="h-3 w-20" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function StatCardSkeleton() {
|
||||
return (
|
||||
<div className="p-6 border rounded-xl space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-8 w-8 rounded-lg" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-16" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function PageSkeleton() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Skeleton className="h-10 w-64" />
|
||||
<Skeleton className="h-10 w-40" />
|
||||
</div>
|
||||
<TableSkeleton rows={5} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DashboardSkeleton() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-4 w-64" />
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<StatCardSkeleton key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
@@ -0,0 +1,32 @@
|
||||
"use client"
|
||||
|
||||
import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: SwitchPrimitive.Root.Props & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
||||
/>
|
||||
</SwitchPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Switch }
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
"use client"
|
||||
|
||||
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: TabsPrimitive.Root.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Tab
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
||||
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Panel
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 text-sm outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delay = 0,
|
||||
...props
|
||||
}: TooltipPrimitive.Provider.Props) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delay={delay}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
side = "top",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: TooltipPrimitive.Popup.Props &
|
||||
Pick<
|
||||
TooltipPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<TooltipPrimitive.Popup
|
||||
data-slot="tooltip-content"
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
||||
</TooltipPrimitive.Popup>
|
||||
</TooltipPrimitive.Positioner>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
import { useAuth } from "@/lib/auth"
|
||||
import { apiFetch } from "@/lib/api"
|
||||
|
||||
export interface FilterState {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
export function useFilterPreferences(pageKey: string, defaultFilters: FilterState) {
|
||||
const { token } = useAuth()
|
||||
const [filters, setFilters] = useState<FilterState>(defaultFilters)
|
||||
|
||||
const fetchPreferences = useCallback(async () => {
|
||||
if (!token) return
|
||||
try {
|
||||
const prefs = await apiFetch<Record<string, FilterState>>(`/auth/preferences/`, { token })
|
||||
const key = `${pageKey}_filters`
|
||||
const savedFilters = prefs[key] || {}
|
||||
const mergedFilters = { ...defaultFilters, ...savedFilters }
|
||||
setFilters(mergedFilters)
|
||||
return mergedFilters
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch ${pageKey} preferences:`, err)
|
||||
return defaultFilters
|
||||
}
|
||||
}, [token, pageKey, defaultFilters])
|
||||
|
||||
const savePreferences = useCallback(async (newFilters: FilterState) => {
|
||||
if (!token) return
|
||||
try {
|
||||
const payload: Record<string, FilterState> = {}
|
||||
payload[`${pageKey}_filters`] = newFilters
|
||||
await apiFetch(`/auth/preferences/`, {
|
||||
method: "PATCH",
|
||||
token,
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(`Failed to save ${pageKey} preferences:`, err)
|
||||
}
|
||||
}, [token, pageKey])
|
||||
|
||||
const updateFilter = useCallback((key: string, value: string, onUpdate?: () => void) => {
|
||||
const newFilters = { ...filters, [key]: value }
|
||||
setFilters(newFilters)
|
||||
savePreferences(newFilters)
|
||||
onUpdate?.()
|
||||
}, [filters, savePreferences])
|
||||
|
||||
const resetFilters = useCallback((onReset?: () => void) => {
|
||||
setFilters(defaultFilters)
|
||||
savePreferences(defaultFilters)
|
||||
onReset?.()
|
||||
}, [defaultFilters, savePreferences])
|
||||
|
||||
return {
|
||||
filters,
|
||||
setFilters,
|
||||
fetchPreferences,
|
||||
savePreferences,
|
||||
updateFilter,
|
||||
resetFilters,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client"
|
||||
|
||||
import { useSearchParams } from "next/navigation"
|
||||
import { useCallback, useMemo } from "react"
|
||||
|
||||
export function useFilters() {
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const getParam = useCallback((key: string): string => {
|
||||
return searchParams.get(key) || ""
|
||||
}, [searchParams])
|
||||
|
||||
const getParamArray = useCallback((key: string): string[] => {
|
||||
const val = searchParams.get(key)
|
||||
return val ? val.split(",") : []
|
||||
}, [searchParams])
|
||||
|
||||
const hasActiveFilters = useMemo(() => {
|
||||
return Array.from(searchParams.keys()).some(
|
||||
key => key !== "page" && searchParams.get(key)
|
||||
)
|
||||
}, [searchParams])
|
||||
|
||||
return {
|
||||
getParam,
|
||||
getParamArray,
|
||||
hasActiveFilters,
|
||||
allParams: searchParams,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
export const transitions = {
|
||||
fast: "150ms",
|
||||
normal: "250ms",
|
||||
slow: "400ms",
|
||||
}
|
||||
|
||||
export const easing = {
|
||||
default: [0.4, 0, 0.2, 1] as const,
|
||||
smooth: [0.4, 0, 0.2, 1] as const,
|
||||
bounce: [0.68, -0.55, 0.265, 1.55] as const,
|
||||
}
|
||||
|
||||
export const stagger = {
|
||||
fast: 0.05,
|
||||
normal: 0.1,
|
||||
slow: 0.15,
|
||||
}
|
||||
|
||||
export const fadeInUp = {
|
||||
initial: { opacity: 0, y: 10 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -10 },
|
||||
}
|
||||
|
||||
export const fadeIn = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
}
|
||||
|
||||
export const slideInRight = {
|
||||
initial: { opacity: 0, x: 20 },
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: { opacity: 0, x: -20 },
|
||||
}
|
||||
|
||||
export const scaleIn = {
|
||||
initial: { opacity: 0, scale: 0.95 },
|
||||
animate: { opacity: 1, scale: 1 },
|
||||
exit: { opacity: 0, scale: 0.95 },
|
||||
}
|
||||
|
||||
export const pageVariants = {
|
||||
initial: { opacity: 0, y: 8 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
exit: { opacity: 0, y: -8 },
|
||||
}
|
||||
|
||||
export const cardHover = {
|
||||
rest: { y: 0, boxShadow: "0 1px 3px 0px rgba(0,0,0,0.1)" },
|
||||
hover: { y: -2, boxShadow: "0 10px 40px -10px rgba(0,0,0,0.15)" },
|
||||
}
|
||||
|
||||
export const buttonTap = {
|
||||
rest: { scale: 1 },
|
||||
tap: { scale: 0.97 },
|
||||
hover: { scale: 1.02 },
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/v1"
|
||||
|
||||
interface FetchOptions extends RequestInit {
|
||||
token?: string
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(
|
||||
endpoint: string,
|
||||
options: FetchOptions = {}
|
||||
): Promise<T> {
|
||||
const { token, ...fetchOptions } = options
|
||||
|
||||
const isFormData = options.body instanceof FormData
|
||||
|
||||
const headers: HeadersInit = isFormData ? {
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...options.headers,
|
||||
} : {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...options.headers,
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_URL}${endpoint}`, {
|
||||
...fetchOptions,
|
||||
headers,
|
||||
})
|
||||
|
||||
if (response.status === 401) {
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.removeItem("auth-storage")
|
||||
window.location.href = "/login"
|
||||
}
|
||||
throw new Error("Session expired")
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const contentType = response.headers.get("content-type")
|
||||
let error: { detail?: string; message?: string; error?: string }
|
||||
if (contentType && contentType.includes("application/json")) {
|
||||
error = await response.json().catch(() => ({}))
|
||||
} else {
|
||||
error = { detail: await response.text().catch(() => `HTTP ${response.status}`) }
|
||||
}
|
||||
throw new Error(error.detail || error.message || error.error || `API Error: ${response.status}`)
|
||||
}
|
||||
|
||||
if (response.status === 204) {
|
||||
return {} as T
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
count: number
|
||||
next: string | null
|
||||
previous: string | null
|
||||
results: T[]
|
||||
}
|
||||
|
||||
export interface IWrestler {
|
||||
id: number
|
||||
first_name: string
|
||||
last_name: string
|
||||
club: number
|
||||
club_name?: string
|
||||
group: "kids" | "youth" | "adults"
|
||||
gender?: "m" | "f"
|
||||
is_active: boolean
|
||||
photo?: string | null
|
||||
date_of_birth?: string | null
|
||||
weight_kg?: string | null
|
||||
weight_category?: string | null
|
||||
license_number?: string | null
|
||||
license_expiry?: string | null
|
||||
license_scan?: string | null
|
||||
notes?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ITrainer {
|
||||
id: number
|
||||
first_name: string
|
||||
last_name: string
|
||||
club: number
|
||||
club_name?: string
|
||||
is_active: boolean
|
||||
photo?: string | null
|
||||
email?: string | null
|
||||
phone?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface IExercise {
|
||||
id: number
|
||||
name: string
|
||||
category: "warmup" | "kraft" | "technik" | "ausdauer" | "spiele" | "cool_down"
|
||||
description?: string | null
|
||||
default_value?: string | null
|
||||
media?: string | null
|
||||
club: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ITraining {
|
||||
id: number
|
||||
date: string
|
||||
start_time: string
|
||||
end_time: string
|
||||
club?: number | null
|
||||
location?: number | null
|
||||
location_name?: string | null
|
||||
trainers: number[]
|
||||
trainer_names: string[]
|
||||
attendance_count: number
|
||||
group: "kids" | "youth" | "adults" | "all"
|
||||
notes?: string | null
|
||||
is_completed: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ITrainingDetail extends ITraining {
|
||||
attendances: IAttendance[]
|
||||
training_exercises: ITrainingExercise[]
|
||||
}
|
||||
|
||||
export interface IAttendance {
|
||||
id: number
|
||||
training: number
|
||||
wrestler: number
|
||||
wrestler_name: string
|
||||
wrestler_first_name: string
|
||||
wrestler_last_name: string
|
||||
wrestler_group: string
|
||||
wrestler_club_name: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ITrainingExercise {
|
||||
id: number
|
||||
training: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
reps?: number | null
|
||||
time_minutes?: number | null
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface ITemplate {
|
||||
id: number
|
||||
name: string
|
||||
description?: string | null
|
||||
exercises: { exercise: number; order: number; sets?: string; reps?: string }[]
|
||||
club: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface IHomeworkExerciseItem {
|
||||
id: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
reps: number | null
|
||||
time_minutes: number | null
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface IHomework {
|
||||
id: number
|
||||
title: string
|
||||
description: string | null
|
||||
club: number
|
||||
club_name: string
|
||||
due_date: string | null
|
||||
is_active: boolean
|
||||
exercise_items: IHomeworkExerciseItem[]
|
||||
exercise_count: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface IHomeworkAssignmentItem {
|
||||
id: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
is_completed: boolean
|
||||
completion_date: string | null
|
||||
}
|
||||
|
||||
export interface IHomeworkAssignment {
|
||||
id: number
|
||||
homework: number
|
||||
homework_title: string
|
||||
wrestler: number
|
||||
wrestler_name: string
|
||||
club: number
|
||||
club_name: string
|
||||
due_date: string | null
|
||||
notes: string
|
||||
is_completed: boolean
|
||||
completion_date: string | null
|
||||
completed_items: number
|
||||
total_items: number
|
||||
items: IHomeworkAssignmentItem[]
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ITrainingHomeworkExercise {
|
||||
id: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
exercise_category: string
|
||||
reps: number | null
|
||||
time_minutes: number | null
|
||||
order: number
|
||||
is_completed: boolean
|
||||
}
|
||||
|
||||
export interface ITrainingHomeworkAssignment {
|
||||
id: number
|
||||
training: number
|
||||
training_date: string
|
||||
training_group: string
|
||||
wrestler: number
|
||||
wrestler_name: string
|
||||
wrestler_group: string
|
||||
notes: string
|
||||
is_completed: boolean
|
||||
completion_date: string | null
|
||||
exercises: ITrainingHomeworkExercise[]
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ILocation {
|
||||
id: number
|
||||
name: string
|
||||
address?: string | null
|
||||
is_active: boolean
|
||||
club: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface IClub {
|
||||
id: number
|
||||
name: string
|
||||
short_name: string
|
||||
logo?: string | null
|
||||
is_active: boolean
|
||||
wrestler_count?: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface IUser {
|
||||
id: number
|
||||
username: string
|
||||
email: string
|
||||
first_name?: string
|
||||
last_name?: string
|
||||
club_id?: number | null
|
||||
club_name?: string | null
|
||||
}
|
||||
|
||||
export interface IAuthResponse {
|
||||
access: string
|
||||
refresh: string
|
||||
user: IUser
|
||||
}
|
||||
|
||||
export interface IDashboardStats {
|
||||
wrestlers: { total: number; this_week: number }
|
||||
trainers: { total: number; active: number }
|
||||
trainings: { total: number; this_week: number }
|
||||
homework: { open: number; completed: number }
|
||||
attendance: {
|
||||
this_week: {
|
||||
kids: { attended: number; total: number; percent: number }
|
||||
youth: { attended: number; total: number; percent: number }
|
||||
adults: { attended: number; total: number; percent: number }
|
||||
}
|
||||
average: number
|
||||
expected: number
|
||||
}
|
||||
activity: { date: string; count: number }[]
|
||||
wrestlers_by_group: {
|
||||
kids: number
|
||||
youth: number
|
||||
adults: number
|
||||
inactive: number
|
||||
}
|
||||
top_trainers: { name: string; training_count: number }[]
|
||||
}
|
||||
|
||||
export interface ITrainingLogEntry {
|
||||
id: number
|
||||
wrestler: number
|
||||
wrestler_name: string
|
||||
training: number | null
|
||||
training_date: string | null
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
reps: number
|
||||
sets: number
|
||||
time_minutes: number | null
|
||||
weight_kg: number | null
|
||||
rating: number
|
||||
notes: string
|
||||
logged_at: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ITrainingLogStats {
|
||||
total_entries: number
|
||||
unique_exercises: number
|
||||
total_reps: number
|
||||
avg_sets: number
|
||||
avg_rating: number
|
||||
this_week: number
|
||||
top_exercises: { name: string; count: number }[]
|
||||
progress: Record<string, { before: number; after: number; change_percent: number }>
|
||||
}
|
||||
|
||||
export interface ITrainingLogCompare {
|
||||
wrestler1: { id: number; name: string }
|
||||
wrestler2: { id: number; name: string }
|
||||
exercises: { exercise: string; wrestler1_avg: number; wrestler2_avg: number }[]
|
||||
}
|
||||
|
||||
export interface ILeistungstestTemplateExercise {
|
||||
id: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
target_reps: number
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface ILeistungstestTemplate {
|
||||
id: number
|
||||
name: string
|
||||
exercises: ILeistungstestTemplateExercise[]
|
||||
usage_count: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ILeistungstestResultItem {
|
||||
id: number
|
||||
exercise: number
|
||||
exercise_name: string
|
||||
target_reps: number
|
||||
actual_reps: number
|
||||
elapsed_seconds: number
|
||||
order: number
|
||||
}
|
||||
|
||||
export interface ILeistungstestResult {
|
||||
id: number
|
||||
template: number
|
||||
template_name: string
|
||||
wrestler: number
|
||||
wrestler_name: string
|
||||
total_time_seconds: number | null
|
||||
total_time_minutes: number | null
|
||||
rating: number
|
||||
notes: string
|
||||
completed_at: string
|
||||
score_percent: number
|
||||
items: ILeistungstestResultItem[]
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface ILeaderboardEntry {
|
||||
rank: number
|
||||
result_id: number
|
||||
wrestler_id: number
|
||||
wrestler_name: string
|
||||
score_percent: number
|
||||
completed_at: string
|
||||
total_time_seconds: number | null
|
||||
rating: number
|
||||
}
|
||||
|
||||
export interface ITemplateLeaderboardEntry {
|
||||
rank: number
|
||||
wrestler_id: number
|
||||
wrestler_name: string
|
||||
score_percent: number
|
||||
total_time_seconds: number | null
|
||||
completed_at: string | null
|
||||
}
|
||||
|
||||
export interface IExerciseLeaderboardEntry {
|
||||
rank: number
|
||||
wrestler_id: number
|
||||
wrestler_name: string
|
||||
best_time_seconds: number
|
||||
completed_at: string | null
|
||||
}
|
||||
|
||||
export interface ITemplateLeaderboard {
|
||||
template_id: number
|
||||
template_name: string
|
||||
period: string
|
||||
results: ITemplateLeaderboardEntry[]
|
||||
}
|
||||
|
||||
export interface IExerciseLeaderboard {
|
||||
exercise_id: number
|
||||
exercise_name: string
|
||||
period: string
|
||||
results: IExerciseLeaderboardEntry[]
|
||||
}
|
||||
|
||||
export interface IExerciseOption {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import { create } from "zustand"
|
||||
import { persist } from "zustand/middleware"
|
||||
import { apiFetch, IUser, IAuthResponse } from "./api"
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
refreshToken: string | null
|
||||
user: IUser | null
|
||||
isLoading: boolean
|
||||
isHydrated: boolean
|
||||
error: string | null
|
||||
setAuth: (token: string, refreshToken: string, user: IUser) => void
|
||||
logout: () => void
|
||||
login: (username: string, password: string) => Promise<void>
|
||||
checkAuth: () => Promise<void>
|
||||
}
|
||||
|
||||
export const useAuth = create<AuthState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
token: null,
|
||||
refreshToken: null,
|
||||
user: null,
|
||||
isLoading: false,
|
||||
isHydrated: false,
|
||||
error: null,
|
||||
|
||||
setAuth: (token, refreshToken, user) => {
|
||||
set({ token, refreshToken, user, error: null })
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
set({ token: null, refreshToken: null, user: null, error: null })
|
||||
},
|
||||
|
||||
login: async (username, password) => {
|
||||
set({ isLoading: true, error: null })
|
||||
try {
|
||||
const response = await apiFetch<IAuthResponse>("/auth/login/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username, password }),
|
||||
})
|
||||
set({
|
||||
token: response.access,
|
||||
refreshToken: response.refresh,
|
||||
user: response.user,
|
||||
isLoading: false,
|
||||
})
|
||||
} catch (error) {
|
||||
let errorMessage = "Anmeldung fehlgeschlagen"
|
||||
|
||||
if (error instanceof Error) {
|
||||
const message = error.message.toLowerCase()
|
||||
if (message.includes("401") || message.includes("unauthorized") || message.includes("invalid")) {
|
||||
errorMessage = "Falscher Username oder Passwort"
|
||||
} else if (message.includes("429") || message.includes("rate")) {
|
||||
errorMessage = "Zu viele Versuche. Bitte kurz warten."
|
||||
} else if (message.includes("network") || message.includes("fetch") || message.includes("failed to fetch")) {
|
||||
errorMessage = "Verbindung fehlgeschlagen. Internetverbindung prüfen."
|
||||
} else if (message.includes("timeout")) {
|
||||
errorMessage = "Zeitüberschreitung. Erneut versuchen."
|
||||
} else {
|
||||
errorMessage = error.message
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
isLoading: false,
|
||||
error: errorMessage,
|
||||
})
|
||||
throw new Error(errorMessage)
|
||||
}
|
||||
},
|
||||
|
||||
checkAuth: async () => {
|
||||
const { token } = get()
|
||||
if (!token) {
|
||||
set({ isLoading: false })
|
||||
return
|
||||
}
|
||||
set({ isLoading: true })
|
||||
try {
|
||||
const user = await apiFetch<IUser>("/auth/me/", {
|
||||
token,
|
||||
})
|
||||
set({ user, isLoading: false })
|
||||
} catch {
|
||||
set({ token: null, refreshToken: null, user: null, isLoading: false })
|
||||
}
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: "auth-storage",
|
||||
partialize: (state) => ({
|
||||
token: state.token,
|
||||
refreshToken: state.refreshToken,
|
||||
user: state.user,
|
||||
}),
|
||||
onRehydrateStorage: () => (state) => {
|
||||
if (state) {
|
||||
state.isHydrated = true
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
)
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
Reference in New Issue
Block a user