import { Head, router } from '@inertiajs/react'; import { Search, Eye, Trash2, ShieldAlert, Terminal, ArrowLeft, ArrowRight, } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import { destroy as destroyLog } from '@/routes/settings/audit-logs'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; interface User { id: number; name: string; email: string; } interface AuditLog { id: number; user_id: number | null; ip_address: string; http_method: string; endpoint: string; request_payload: Record | null; response_status_code: number; db_latency_ms: number | null; total_response_time_ms: number | null; created_at: string; user?: User | null; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface PaginatedLogs { data: AuditLog[]; current_page: number; last_page: number; prev_page_url: string | null; next_page_url: string | null; links: PaginationLink[]; total: number; } interface Props { logs: PaginatedLogs; filters: { search?: string; }; } export default function AuditLogsPage({ logs, filters }: Props) { const [search, setSearch] = useState(filters.search || ''); const [viewingPayload, setViewingPayload] = useState(null); const handleSearchSubmit = (e: React.FormEvent) => { e.preventDefault(); router.get( '/settings/audit-logs', { search }, { preserveState: true }, ); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to delete this log entry?')) { router.delete(destroyLog.url(id), { onSuccess: () => { toast.success('Log deleted successfully.'); }, }); } }; const getStatusColor = (code: number) => { if (code >= 500) { return 'text-red-650 bg-red-50 border-red-200 dark:bg-red-950/50 dark:text-red-400'; } if (code >= 400) { return 'text-orange-655 bg-orange-50 border-orange-200 dark:bg-orange-950/50 dark:text-orange-400'; } if (code >= 300) { return 'text-blue-650 bg-blue-50 border-blue-200 dark:bg-blue-950/50 dark:text-blue-400'; } return 'text-emerald-650 bg-emerald-50 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-400'; }; const getMethodColor = (method: string) => { switch (method.toUpperCase()) { case 'POST': return 'bg-emerald-500 text-white'; case 'PUT': case 'PATCH': return 'bg-blue-500 text-white'; case 'DELETE': return 'bg-red-500 text-white'; default: return 'bg-zinc-550 text-white'; } }; return ( <>
{/* Premium Gradient Header Banner */}
Security Operations

Platform Security Audit Logs

Trace real-time operational events, inspect endpoint latencies, and review HTTP raw payloads for security auditing.

{/* Filters and Search Toolbar */}
setSearch(e.target.value)} />
{logs.data.length === 0 ? (

No matching audit logs found

) : (
{logs.data.map((log) => ( ))}
Operator Method & Route Status Latency Actions
{log.user?.name ?? ( Guest Operator )}
IP: {log.ip_address}
{log.http_method} {log.endpoint}
{new Date( log.created_at, ).toLocaleString()}
{log.response_status_code}
{log.total_response_time_ms ? `${Math.round(log.total_response_time_ms)}ms` : '-'}
DB:{' '} {log.db_latency_ms ? `${Math.round(log.db_latency_ms)}ms` : '-'}
{/* Pagination */} {logs.last_page > 1 && (
Page {logs.current_page} of {logs.last_page}{' '} ({logs.total} total logs)
{logs.links.map((link, idx) => { if (link.label.includes('Previous')) { return ( ); } if (link.label.includes('Next')) { return ( ); } const pageNum = parseInt(link.label); if (isNaN(pageNum)) { return null; } const isClose = Math.abs( pageNum - logs.current_page, ) <= 1; if ( !isClose && pageNum !== 1 && pageNum !== logs.last_page ) { return null; } return ( ); })}
)}
)} {/* Payload View Dialog */} !open && setViewingPayload(null)} > {' '} Payload Details HTTP request parameters and performance profiles. {viewingPayload && (
Method {viewingPayload.http_method}
Status { viewingPayload.response_status_code }
Route {viewingPayload.endpoint} 
                                        {viewingPayload.request_payload
                                            ? JSON.stringify(
                                                  viewingPayload.request_payload,
                                                  null,
                                                  2,
                                              )
                                            : 'No payload content (GET/DELETE request).'}
)}
); } AuditLogsPage.layout = (page: React.ReactNode) => {page};