import { useState, ReactNode } from "react"; import { Head } from '@inertiajs/react'; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import AdminLayout from '@/layouts/AdminLayout'; import { format } from "date-fns"; import { toast } from "sonner"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; import { CalendarClock, Check, X } from "lucide-react"; const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ''; const statusColor: Record = { pending: "bg-yellow-100 text-yellow-800 border-yellow-300", approved: "bg-green-100 text-green-800 border-green-300", rejected: "bg-red-100 text-red-800 border-red-300", }; const DateChangeRequests = () => { const queryClient = useQueryClient(); const [actionDialog, setActionDialog] = useState<{ id: string; action: "approved" | "rejected" } | null>(null); const [adminNotes, setAdminNotes] = useState(""); const { data: requests, isLoading } = useQuery({ queryKey: ["date-change-requests"], queryFn: async () => { const res = await fetch('/api/admin/date-change-requests'); if (!res.ok) return []; return res.json(); }, }); const updateMutation = useMutation({ mutationFn: async ({ id, status, notes }: { id: string; status: "approved" | "rejected"; notes: string }) => { const action = status === "approved" ? "approve" : "reject"; const res = await fetch(`/api/admin/date-change-requests/${id}/${action}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrfToken(), }, body: JSON.stringify({ admin_notes: notes }), }); if (!res.ok) { const err = await res.json().catch(() => ({ error: 'Failed' })); throw new Error(err.error || err.message || 'Failed to update'); } return res.json(); }, onSuccess: (data: any) => { if (actionDialog?.action === "approved") { toast.success( data?.email_sent ? `Request approved — customer emailed about the new date.` : "Request approved — booking date updated.", ); } else { toast.success("Request rejected."); } // Refresh every list that shows an order date so the change is // reflected immediately across the admin UI. queryClient.invalidateQueries({ queryKey: ["date-change-requests"] }); queryClient.invalidateQueries({ queryKey: ["admin-orders"] }); queryClient.invalidateQueries({ queryKey: ["calendar-bookings-week"] }); queryClient.invalidateQueries({ queryKey: ["calendar-orders-week"] }); queryClient.invalidateQueries({ queryKey: ["order-delegates"] }); queryClient.invalidateQueries({ queryKey: ["pending-date-changes"] }); queryClient.invalidateQueries({ queryKey: ["notif-pending-reschedules"] }); setActionDialog(null); setAdminNotes(""); }, onError: (err: Error) => toast.error(err.message), }); const pendingCount = requests?.filter((r: any) => r.status === "pending").length ?? 0; return ( <>

Date Change Requests

{pendingCount} pending request{pendingCount !== 1 ? "s" : ""} awaiting review

{isLoading ? (

Loading…

) : !requests?.length ? (

No date change requests yet.

) : (
Course Customer Current Requested Trainer Reason Status Decided by Actions {requests.map((r: any) => { const order = r.course_orders; return ( {order?.courses?.title ?? "—"}
{order?.customer_name}
{order?.customer_email}
 {order?.start_date ? format(new Date(order.start_date + "T00:00:00"), "d MMM yy") : "—"} {format(new Date(r.requested_date + "T00:00:00"), "d MMM yy")} {order?.trainers ? `${order.trainers.first_name} ${order.trainers.last_name}` : "—"} {r.reason || "—"} {r.status} {r.decided_by_user ? (
{r.decided_by_user.name || r.decided_by_user.email}
{r.decided_at && (
{format(new Date(r.decided_at), "d MMM yy, HH:mm")}
)}
) : ( — )} {r.status === "pending" ? (
) : ( {r.admin_notes || "—"} )} ); })}
)} setActionDialog(null)}> {actionDialog?.action === "approved" ? "Approve" : "Reject"} Date Change

{actionDialog?.action === "approved" ? "Approving will update the booking to the new requested date." : "Please provide a reason for rejecting this request."}