import { ReactNode } from "react"; import { Head, router } from '@inertiajs/react'; import { useQuery } from "@tanstack/react-query"; import AdminLayout from '@/layouts/AdminLayout'; import { useAuth } from "@/hooks/useAuth"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { ArrowLeft, Award, BookOpen, AlertTriangle, CheckCircle2, XCircle, Download } from "lucide-react"; import { differenceInDays, format } from "date-fns"; const expiryBadge = (expiresAt: string | null) => { if (!expiresAt) return No Expiry; const days = differenceInDays(new Date(expiresAt), new Date()); if (days < 0) return Expired; if (days <= 30) return {days}d left; if (days <= 90) return {days}d left; return Valid; }; interface DelegateDetailProps { id?: string; } const DelegateDetail = ({ id: idProp }: DelegateDetailProps = {}) => { const id = idProp ?? window.location.pathname.split('/').pop(); const { companyId, isSysLevel } = useAuth(); const { data: delegate, isLoading } = useQuery({ queryKey: ["delegate-detail", id], queryFn: async () => { const res = await fetch(`/api/admin/delegates/${id}`); if (!res.ok) return null; return res.json(); }, enabled: !!id, }); // Certificates for this delegate const { data: certificates } = useQuery({ queryKey: ["delegate-certs", delegate?.email], queryFn: async () => { const res = await fetch(`/api/admin/delegates/${id}/certificates`); if (!res.ok) return []; return res.json(); }, enabled: !!delegate?.email, }); // Orders where this delegate appears (via booking_delegates) const { data: bookingHistory } = useQuery({ queryKey: ["delegate-bookings", delegate?.email, delegate?.first_name, delegate?.last_name], queryFn: async () => { const res = await fetch(`/api/admin/delegates/${id}/bookings`); if (!res.ok) return []; return res.json(); }, enabled: !!delegate, }); // Job roles assigned to this delegate const { data: assignedRoles } = useQuery({ queryKey: ["delegate-jobroles", id], queryFn: async () => { const res = await fetch(`/api/admin/delegates/${id}/job-roles`); if (!res.ok) return []; return res.json(); }, enabled: !!id, }); // Get requirements for assigned roles const { data: roleRequirements } = useQuery({ queryKey: ["delegate-role-reqs", assignedRoles?.map((r: any) => r.job_role_id)], queryFn: async () => { if (!assignedRoles?.length) return []; const ids = assignedRoles.map((r: any) => r.job_role_id).join(','); const res = await fetch(`/api/admin/job-roles/requirements?ids=${ids}`); if (!res.ok) return []; return res.json(); }, enabled: !!assignedRoles && assignedRoles.length > 0, }); // Access check if (!isSysLevel() && delegate && companyId && delegate.company_id !== companyId) { return ( <>
Access denied.
); } if (isLoading) { return ( <>
Loading delegate...
); } if (!delegate) { return ( <>
Delegate not found.
); } // Compliance check const now = new Date(); const complianceItems = (roleRequirements || []).map((req: any) => { const cert = certificates?.find( (c: any) => c.course_id === req.course_id && c.status === "active" && (!c.expires_at || differenceInDays(new Date(c.expires_at), now) >= 0) ); const expiring = cert?.expires_at ? differenceInDays(new Date(cert.expires_at), now) <= 30 : false; return { courseTitle: (req as any).course?.title || "Unknown Course", courseId: req.course_id, isMandatory: req.is_mandatory, status: cert ? (expiring ? "expiring" : "valid") : "missing", expiresAt: cert?.expires_at || null, }; }); const mandatoryTotal = complianceItems.filter((i: any) => i.isMandatory).length; const mandatoryMet = complianceItems.filter((i: any) => i.isMandatory && i.status === "valid").length; const compliancePct = mandatoryTotal > 0 ? Math.round((mandatoryMet / mandatoryTotal) * 100) : null; return ( <>
{/* Header */}

{delegate.first_name} {delegate.last_name}

{delegate.status} {delegate.email && ( {delegate.email} )} {delegate.phone && ( · {delegate.phone} )}
{compliancePct !== null && (

{compliancePct}%

Compliance

)}
{/* Job Roles */} {assignedRoles && assignedRoles.length > 0 && (
{assignedRoles.map((ar: any) => ( {(ar as any).job_role?.title || "Unknown Role"} ))}
)}
{/* Compliance Checklist */} {complianceItems.length > 0 && ( Compliance Checklist
{complianceItems.map((item: any, i: number) => (
{item.status === "valid" && } {item.status === "expiring" && } {item.status === "missing" && } {item.courseTitle} {item.isMandatory && Required}
{item.status === "valid" && item.expiresAt && ( Expires {format(new Date(item.expiresAt), "dd MMM yyyy")} )} {item.status === "expiring" && ( Expiring soon )} {item.status === "missing" && ( )}
))}
)} {/* Certificates */} Certificates ({certificates?.length || 0}) {!certificates?.length ? (

No certificates yet.

) : (
{certificates.map((c: any) => (

{c.course_title || c.qualification_name || "Certificate"}

Issued {format(new Date(c.issued_at), "dd MMM yyyy")} {c.certificate_number && ` · #${c.certificate_number}`}

{c.certificate_url ? ( Download ) : ( No file )} {expiryBadge(c.expires_at)}
))}
)}
{/* Training History */} Training History {!bookingHistory?.length ? (

No training history found.

) : ( Course Date Status {bookingHistory.map((o: any) => ( {(o as any).course?.title || "—"} {o.start_date ? format(new Date(o.start_date), "dd MMM yyyy") : "—"} {o.status} ))}
)}
); }; DelegateDetail.layout = (page: ReactNode) => {page}; export default DelegateDetail;