import { ReactNode, useState } from "react"; import { Head } from "@inertiajs/react"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import AdminLayout from "@/layouts/AdminLayout"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Plus, Pencil, Trash2, CalendarDays } from "lucide-react"; import { format, parseISO, isBefore, startOfDay } from "date-fns"; import { toast } from "sonner"; const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ""; interface BankHolidayRow { id: string; date: string; name: string; } const emptyForm = (): Partial => ({ date: "", name: "" }); const BankHolidaysPage = () => { const qc = useQueryClient(); const [dialogOpen, setDialogOpen] = useState(false); const [editing, setEditing] = useState(null); const [form, setForm] = useState>(emptyForm()); const [deleteRow, setDeleteRow] = useState(null); const { data: holidays = [], isLoading } = useQuery({ queryKey: ["admin-bank-holidays"], queryFn: async (): Promise => { const res = await fetch("/api/admin/bank-holidays"); if (!res.ok) return []; return res.json(); }, }); const invalidate = () => { qc.invalidateQueries({ queryKey: ["admin-bank-holidays"] }); qc.invalidateQueries({ queryKey: ["bank-holidays"] }); // public read used by availability/calendar }; const saveMutation = useMutation({ mutationFn: async (payload: Partial) => { const url = editing ? `/api/admin/bank-holidays/${editing.id}` : `/api/admin/bank-holidays`; const res = await fetch(url, { method: editing ? "PATCH" : "POST", headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": csrfToken() }, body: JSON.stringify(payload), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || err.message || "Failed to save bank holiday"); } return res.json(); }, onSuccess: () => { toast.success(editing ? "Bank holiday updated" : "Bank holiday added"); invalidate(); setDialogOpen(false); setEditing(null); }, onError: (e: Error) => toast.error(e.message), }); const deleteMutation = useMutation({ mutationFn: async (id: string) => { const res = await fetch(`/api/admin/bank-holidays/${id}`, { method: "DELETE", headers: { "X-CSRF-TOKEN": csrfToken() }, }); if (!res.ok) throw new Error("Failed to delete bank holiday"); return res.json(); }, onSuccess: () => { toast.success("Bank holiday deleted"); invalidate(); setDeleteRow(null); }, onError: (e: Error) => toast.error(e.message), }); const openCreate = () => { setEditing(null); setForm(emptyForm()); setDialogOpen(true); }; const openEdit = (row: BankHolidayRow) => { setEditing(row); setForm({ ...row }); setDialogOpen(true); }; const onSubmit = () => { if (!form.date) { toast.error("Please pick a date"); return; } if (!form.name?.trim()) { toast.error("Name is required"); return; } saveMutation.mutate({ date: form.date, name: form.name.trim() }); }; const today = startOfDay(new Date()); const rows = holidays .slice() .sort((a, b) => a.date.localeCompare(b.date)); return ( <>

Bank Holidays

Non-working days applied across trainer availability, the training calendar, and public course booking. Manage the list here — nothing is hard-coded.

Date Name Actions {isLoading ? ( Loading… ) : rows.length === 0 ? ( No bank holidays yet. Add one to get started. ) : ( rows.map((row) => { const past = isBefore(parseISO(row.date), today); return ( {format(parseISO(row.date), "EEE d MMM yyyy")} {past && (past)} {row.name}
); }) )}
{/* Create / Edit dialog */} {editing ? "Edit Bank Holiday" : "Add Bank Holiday"}
setForm((f) => ({ ...f, date: e.target.value }))} />
setForm((f) => ({ ...f, name: e.target.value }))} placeholder="e.g. Christmas Day" />
{/* Delete confirm */} !open && setDeleteRow(null)}> Delete bank holiday? {deleteRow && `"${deleteRow.name}" (${format(parseISO(deleteRow.date), "d MMM yyyy")}) will be removed. Dates will become bookable again.`} Cancel deleteRow && deleteMutation.mutate(deleteRow.id)} > {deleteMutation.isPending ? "Deleting…" : "Delete"} ); }; BankHolidaysPage.layout = (page: ReactNode) => {page}; export default BankHolidaysPage;