import { useState, ReactNode } from 'react'; import { Head } from '@inertiajs/react'; import { useQuery } from '@tanstack/react-query'; import AdminLayout from '@/layouts/AdminLayout'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { ScrollText, Search, Download } from 'lucide-react'; import { format } from 'date-fns'; import { exportToCSV } from '@/lib/csv-export'; const entityColors: Record = { order: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', company: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400', course: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400', delegate: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', certificate: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400', user: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', }; const AuditLogPage = () => { const [search, setSearch] = useState(''); const [entityFilter, setEntityFilter] = useState('all'); const { data: logs, isLoading } = useQuery({ queryKey: ['audit-log', entityFilter], queryFn: async () => { const params = new URLSearchParams(); if (entityFilter !== 'all') params.set('entity_type', entityFilter); const res = await fetch(`/api/admin/activity-log?${params.toString()}`); if (!res.ok) return []; return res.json(); }, }); const filtered = (logs as any[] | undefined)?.filter((l) => { if (!search) return true; const s = search.toLowerCase(); return ( l.action?.toLowerCase().includes(s) || l.user_email?.toLowerCase().includes(s) || l.entity_id?.toLowerCase().includes(s) || JSON.stringify(l.details || {}).toLowerCase().includes(s) ); }) || []; const handleExport = () => { exportToCSV( filtered.map((l) => ({ timestamp: format(new Date(l.created_at), 'yyyy-MM-dd HH:mm:ss'), user_email: l.user_email || '', action: l.action, entity_type: l.entity_type, entity_id: l.entity_id || '', details: JSON.stringify(l.details || {}), })), `audit-log-${format(new Date(), 'yyyy-MM-dd')}`, ); }; return ( <>

Audit Log

Track all system activity and changes

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

Timestamp User Action Entity Entity ID Details {isLoading ? ( Loading... ) : !filtered.length ? ( No activity recorded yet. ) : ( filtered.map((log: any) => ( {format(new Date(log.created_at), 'dd MMM yy HH:mm')} {log.user_email || 'System'} {log.action} {log.entity_type} {log.entity_id ? `${log.entity_id.slice(0, 8)}…` : '—'} {log.details && Object.keys(log.details).length > 0 ? JSON.stringify(log.details) : '—'} )) )}

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