import { useState, ReactNode } from "react"; import { Head } from '@inertiajs/react'; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import AdminLayout from '@/layouts/AdminLayout'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { toast } from "sonner"; import { format } from "date-fns"; import { Clock, CheckCircle2, XCircle, Download, Bell, Search } from "lucide-react"; import { exportToCSV } from "@/lib/csv-export"; const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ''; const statusColors: Record = { waiting: "bg-amber-500 text-white", notified: "bg-blue-500 text-white", booked: "bg-green-600 text-white", cancelled: "bg-destructive text-destructive-foreground", }; const Waitlist = () => { const queryClient = useQueryClient(); const [statusFilter, setStatusFilter] = useState("all"); const [search, setSearch] = useState(""); const { data: waitlist, isLoading } = useQuery({ queryKey: ["admin-waitlist"], queryFn: async () => { const res = await fetch('/api/admin/waitlist'); if (!res.ok) return []; return res.json(); }, }); const { data: courses } = useQuery({ queryKey: ["courses"], queryFn: async () => { const res = await fetch('/api/admin/courses'); if (!res.ok) return []; return res.json(); }, }); const updateStatusMutation = useMutation({ mutationFn: async ({ id, status }: { id: string; status: string }) => { const res = await fetch(`/api/admin/waitlist/${id}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() }, body: JSON.stringify({ status }), }); if (!res.ok) throw new Error('Failed to update'); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["admin-waitlist"] }); toast.success("Waitlist entry updated"); }, onError: (e: Error) => toast.error(e.message), }); const getCourseName = (id: string) => courses?.find((c: any) => c.id === id)?.title || "Unknown"; const filtered = waitlist?.filter((w: any) => { if (statusFilter !== "all" && w.status !== statusFilter) return false; if (search) { const s = search.toLowerCase(); return w.contact_name.toLowerCase().includes(s) || w.contact_email.toLowerCase().includes(s); } return true; }); const handleExport = () => { if (!filtered?.length) return; exportToCSV( filtered.map((w: any) => ({ Course: getCourseName(w.course_id), "Start Date": w.start_date, Name: w.contact_name, Email: w.contact_email, Phone: w.contact_phone || "", Delegates: w.num_delegates, Status: w.status, "Created At": format(new Date(w.created_at), "dd/MM/yyyy HH:mm"), })), "waitlist-export" ); }; return ( <>

Course Waitlist

{waitlist && ( {waitlist.filter((w: any) => w.status === "waiting").length} waiting )}

setSearch(e.target.value)} className="pl-10" />

Course Date Contact Delegates Status Requested Actions {filtered?.map((w: any) => ( {getCourseName(w.course_id)} {format(new Date(w.start_date), "dd/MM/yyyy")}

{w.contact_name}

{w.contact_email}

{w.num_delegates} {w.status} {format(new Date(w.created_at), "dd/MM/yyyy")}

{w.status === "waiting" && ( <> )} {w.status === "notified" && ( )} {(w.status === "waiting" || w.status === "notified") && ( )}

))} {(!filtered || filtered.length === 0) && ( No waitlist entries found. )}

); }; Waitlist.layout = (page: ReactNode) => {page}; export default Waitlist;