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 { Progress } from '@/components/ui/progress'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Shield, Users, Award, AlertTriangle, Clock, ArrowRight, BookOpen } from 'lucide-react'; import { differenceInDays, format } from 'date-fns'; const ComplianceHubPage = () => { const { roles, companyId } = useAuth(); const isSysRole = roles?.some((r: string) => ['sys_admin', 'sys_manager', 'admin', 'manager'].includes(r)); // Get all companies for sys admins, or just the one for company managers const { data: companies } = useQuery({ queryKey: ['compliance-hub-companies', companyId, isSysRole], queryFn: async () => { if (isSysRole) { const res = await fetch('/api/admin/training-companies?status=approved'); if (!res.ok) return []; return res.json(); } if (companyId) { const res = await fetch(`/api/admin/training-companies/${companyId}`); if (!res.ok) return []; const data = await res.json(); return data ? [data] : []; } return []; }, }); const selectedCompanyId = (companies as any[] | undefined)?.[0]?.id; const { data: delegates } = useQuery({ queryKey: ['compliance-hub-delegates', selectedCompanyId], queryFn: async () => { if (!selectedCompanyId) return []; const res = await fetch(`/api/admin/delegates?company_id=${encodeURIComponent(selectedCompanyId)}&status=active`); if (!res.ok) return []; return res.json(); }, enabled: !!selectedCompanyId, }); const { data: certificates } = useQuery({ queryKey: ['compliance-hub-certs', selectedCompanyId], queryFn: async () => { if (!selectedCompanyId) return []; const res = await fetch(`/api/admin/certificates?company_id=${encodeURIComponent(selectedCompanyId)}`); if (!res.ok) return []; return res.json(); }, enabled: !!selectedCompanyId, }); // Calculate stats const totalDelegates = (delegates as any[] | undefined)?.length || 0; const totalCerts = (certificates as any[] | undefined)?.length || 0; const now = new Date(); const expiredCerts = (certificates as any[] | undefined)?.filter((c) => c.expires_at && differenceInDays(new Date(c.expires_at), now) < 0) || []; const expiringSoon = (certificates as any[] | undefined)?.filter((c) => { if (!c.expires_at) return false; const days = differenceInDays(new Date(c.expires_at), now); return days >= 0 && days <= 90; }) || []; const activeCerts = (certificates as any[] | undefined)?.filter((c) => { if (!c.expires_at) return c.status === 'active'; return differenceInDays(new Date(c.expires_at), now) > 90 && c.status === 'active'; }) || []; const externalCerts = (certificates as any[] | undefined)?.filter((c: any) => c.is_external) || []; const platformCerts = (certificates as any[] | undefined)?.filter((c: any) => !c.is_external) || []; const complianceScore = totalCerts > 0 ? Math.round((activeCerts.length / totalCerts) * 100) : 0; // Build action items: expired/expiring certs that have a matching course for rebooking const actionItems = [...expiredCerts, ...expiringSoon] .map((cert) => { const course = (cert as any).course; const daysLeft = cert.expires_at ? differenceInDays(new Date(cert.expires_at), now) : null; return { ...cert, courseName: course?.title, courseSlug: course?.slug, daysLeft }; }) .sort((a, b) => (a.daysLeft ?? 999) - (b.daysLeft ?? 999)); return ( <>

Compliance Hub

{(companies as any[] | undefined)?.[0]?.name || 'Team'} — Training, certification & compliance overview

{/* KPI Cards */}

{totalDelegates}

Team Members

{totalCerts}

Certifications {externalCerts.length > 0 && ( ({platformCerts.length} verified, {externalCerts.length} self-reported) )}

{expiredCerts.length + expiringSoon.length}

{expiredCerts.length} expired · {expiringSoon.length} expiring

Compliance Score

{complianceScore}%

{/* Action Required */} {actionItems.length > 0 && ( Action Required — Expiring & Expired Certifications Delegate Qualification Source Expiry Status Action {actionItems.slice(0, 10).map((item: any) => ( {item.delegate_email} {item.courseName || (item as any).qualification_name || '—'} {(item as any).is_external ? ( Self-reported ) : ( Platform )} {item.expires_at ? format(new Date(item.expires_at), 'dd MMM yyyy') : '—'} {item.daysLeft !== null && item.daysLeft < 0 ? ( Expired ) : ( {item.daysLeft}d left )} {item.courseSlug ? ( ) : ( No course linked )} ))}

{actionItems.length > 10 && (

+ {actionItems.length - 10} more items

)} )} {/* Quick Links */}

{selectedCompanyId && ( router.visit(`/admin/companies/${selectedCompanyId}`)}>

Manage Team

Add members, CSV import, assign roles

)} router.visit('/admin/skills-gap')}>

Skills Gap Analysis

RAG matrix of training requirements

router.visit('/admin/certificates')}>

All Certificates

View, upload, and export certifications

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