import React, { useState, useEffect } from 'react'; import { Head, router } from '@inertiajs/react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { AuditLog } from '@/types'; import { ShieldCheck, Search } from '@/Components/AnimatedIcons'; interface Props { logs: { data: AuditLog[]; }; filters: { action?: string; }; } export default function AuditLogsIndex({ logs, filters }: Props) { const [action, setAction] = useState(filters.action || ''); const [accentColor, setAccentColor] = useState(() => localStorage.getItem('admin_accent_color') || 'pink'); useEffect(() => { const handleAccentChange = (e: CustomEvent) => setAccentColor(e.detail); window.addEventListener('theme_accent_changed', handleAccentChange as EventListener); return () => window.removeEventListener('theme_accent_changed', handleAccentChange as EventListener); }, []); const accentBg = accentColor === 'seagreen' ? 'bg-[#0CA996] hover:bg-[#098878]' : 'bg-[#FF0D8F] hover:bg-[#d90978]'; const accentText = accentColor === 'seagreen' ? 'text-[#0CA996]' : 'text-[#FF0D8F]'; const handleSearch = (e: React.FormEvent) => { e.preventDefault(); router.get(route('admin.audit-logs.index'), { action }, { preserveState: true }); }; return (

Security & Business Audit Logs

Immutable system audit trail tracking sensitive actions (Login, Invoices, Voids, Closings, Settings)

setAction(e.target.value)} placeholder="Search action keyword (e.g. INVOICE_CREATED, PRODUCT_UPDATED)..." className="w-full pl-10 pr-3 py-2 border border-slate-200 dark:border-slate-800 dark:bg-slate-950 rounded-xl text-xs font-medium text-slate-900 dark:text-white focus:outline-none" />
{logs.data.map((log) => ( ))}
Timestamp User Action Code Target Entity Reason / Details IP Address
{new Date(log.created_at).toLocaleString()} {log.user?.name || 'System'} {log.action} {log.entity_type} {log.entity_id ? `#${log.entity_id}` : ''} {log.reason || (log.new_values ? JSON.stringify(log.new_values) : '-')} {log.ip_address || '127.0.0.1'}
); }