import { Head, router } from '@inertiajs/react'; import { ChevronLeft, ChevronRight, ScrollText } from 'lucide-react'; import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type AuditRow = { id: number; action: string; entity_type: string | null; entity_id: string | null; user: { id: number; name: string; email: string } | null; before: Record | null; after: Record | null; ip: string | null; ua: string | null; created_at: string | null; }; type Pagination = { current_page: number; last_page: number; per_page: number; total: number; }; type Filters = { action: string; entity_type: string; user_email: string; from: string; to: string; }; type Props = { rows: AuditRow[]; pagination: Pagination; filters: Filters; entityTypes: string[]; }; const ALL_ENTITY_TYPES = '__all__'; function fmt(iso: string | null): string { if (!iso) { return '—'; } const d = new Date(iso); if (Number.isNaN(d.getTime())) { return iso; } return d.toLocaleString(); } export default function AuditIndexPage({ rows, pagination, filters, entityTypes, }: Props) { const { t } = useT(); const [draft, setDraft] = useState(filters); const [expanded, setExpanded] = useState>({}); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Audit log'), href: '/app/audit' }, ]; const apply = (overrides: Partial = {}, page = 1) => { const merged = { ...draft, ...overrides }; const params: Record = { page }; (Object.keys(merged) as (keyof Filters)[]).forEach((key) => { const v = merged[key]; if (typeof v === 'string' && v.trim() !== '') { params[key] = v; } }); router.get('/app/audit', params, { preserveState: true, preserveScroll: true }); }; const reset = () => { setDraft({ action: '', entity_type: '', user_email: '', from: '', to: '', }); router.get('/app/audit', {}, { preserveScroll: true }); }; const toggle = (id: number) => { setExpanded((prev) => ({ ...prev, [id]: !prev[id] })); }; return (

{t('Audit log')}

{t( 'Workspace activity trail — member changes, integrations, GDPR requests, webhook failures.', )}

setDraft((d) => ({ ...d, action: e.target.value, })) } />
setDraft((d) => ({ ...d, user_email: e.target.value, })) } />
setDraft((d) => ({ ...d, from: e.target.value, })) } />
setDraft((d) => ({ ...d, to: e.target.value, })) } />
{rows.length === 0 && ( )} {rows.map((row) => ( ))}
{t('When')} {t('Actor')} {t('Action')} {t('Entity')} {t('IP')}
{t('No audit entries match the current filters.')}
{fmt(row.created_at)} {row.user ? (
{row.user.name}
{row.user.email}
) : ( {t('System')} )} 		{row.action} {row.entity_type ? (
{row.entity_type}
{row.entity_id && (
{row.entity_id}
)}
) : ( — )} 		{row.ip ?? '—'} {expanded[row.id] && (
{t('Before / After')} 
                                                            {JSON.stringify(
                                                                {
                                                                    before:
                                                                        row.before,
                                                                    after:
                                                                        row.after,
                                                                    ua: row.ua,
                                                                },
                                                                null,
                                                                2,
                                                            )}
)}
{t('Showing :count of :total entries', { count: rows.length, total: pagination.total, })}
{pagination.current_page} / {pagination.last_page}
); }