80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Header from "@/components/Header";
|
|
|
|
export default function AbsenceForm() {
|
|
const router = useRouter();
|
|
const [date, setDate] = useState("");
|
|
const [reason, setReason] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
const [done, setDone] = useState(false);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!date) return;
|
|
setSaving(true);
|
|
const res = await fetch("/api/absences", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ date, reason }),
|
|
});
|
|
setSaving(false);
|
|
if (res.ok) {
|
|
setDone(true);
|
|
setTimeout(() => {
|
|
router.push("/member/muay-thai");
|
|
router.refresh();
|
|
}, 1500);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<Header />
|
|
<div className="mx-auto max-w-3xl px-4 py-8">
|
|
<Link href="/member/muay-thai" className="mb-4 block text-sm text-primary-300">
|
|
← Retour à mon espace
|
|
</Link>
|
|
<h1 className="mb-4 text-2xl font-bold">📅 Signaler une absence</h1>
|
|
|
|
{done ? (
|
|
<div className="card border-emerald-500/30 text-center">
|
|
<p className="text-2xl">👍</p>
|
|
<p className="mt-2 font-semibold text-emerald-300">
|
|
Absence signalée, merci !
|
|
</p>
|
|
<p className="mt-1 text-sm text-white/50">Meilleure forme, à bientôt.</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="card space-y-4">
|
|
<div>
|
|
<label className="label">Date du cours manqué</label>
|
|
<input
|
|
type="date"
|
|
value={date}
|
|
onChange={(e) => setDate(e.target.value)}
|
|
className="input"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="label">Raison (optionnelle)</label>
|
|
<textarea
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
className="input min-h-[100px]"
|
|
placeholder="Ex: blessure, travail, vacances..."
|
|
/>
|
|
</div>
|
|
<button type="submit" className="btn-primary w-full" disabled={saving}>
|
|
{saving ? "Envoi..." : "✅ Confirmer mon absence"}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
} |