Skip to content

Commit 7cbe3a0

Browse files
leopu00claude
leopu00
and
claude
committed
feat(audit): pagina /audit — tabella eventi con severity, attore, azione, filtri e paginazione
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 5e634da commit 7cbe3a0

1 file changed

Lines changed: 129 additions & 0 deletions

File tree

‎web/app/audit/page.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
'use client'
2+
3+
import { useState, useEffect } from 'react'
4+
import { FilterBar, FilterDef, FilterValues } from '../components/FilterBar'
5+
import { EmptyState } from '../components/EmptyState'
6+
import { Pagination } from '../components/Pagination'
7+
8+
type Severity = 'info' | 'warning' | 'critical'
9+
type AuditEvent = { id: string; ts: string; severity: Severity; actor: string; action: string; detail: string }
10+
11+
const SEV: Record<Severity, { color: string; bg: string; label: string }> = {
12+
info: { color: 'var(--color-blue)', bg: 'rgba(77,159,255,0.1)', label: 'info' },
13+
warning: { color: 'var(--color-yellow)', bg: 'rgba(255,196,0,0.1)', label: 'warning' },
14+
critical: { color: 'var(--color-red)', bg: 'rgba(255,69,96,0.1)', label: 'critical' },
15+
}
16+
17+
function SevBadge({ s }: { s: Severity }) {
18+
const { color, bg, label } = SEV[s]
19+
return (
20+
<span className="px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wide"
21+
style={{ border: `1px solid ${color}44`, background: bg, color }}>
22+
{label}
23+
</span>
24+
)
25+
}
26+
27+
const PER_PAGE = 25
28+
29+
export default function AuditPage() {
30+
const [events, setEvents] = useState<AuditEvent[]>([])
31+
const [total, setTotal] = useState(0)
32+
const [loading, setLoading] = useState(true)
33+
const [filters, setFilters] = useState<FilterValues>({ severity: '', date: '' })
34+
const [page, setPage] = useState(1)
35+
36+
useEffect(() => {
37+
setPage(1)
38+
setLoading(true)
39+
const qs = new URLSearchParams(Object.fromEntries(Object.entries(filters).filter(([, v]) => v))).toString()
40+
fetch(`/api/audit${qs ? '?' + qs : ''}`).then(r => r.json()).then(d => {
41+
setEvents(d.events ?? [])
42+
setTotal(d.total ?? 0)
43+
setLoading(false)
44+
}).catch(() => setLoading(false))
45+
}, [filters])
46+
47+
const defs: FilterDef[] = [
48+
{ type: 'select', key: 'severity', label: 'Severity', value: filters.severity,
49+
options: [{ value: 'info', label: 'Info' }, { value: 'warning', label: 'Warning' }, { value: 'critical', label: 'Critical' }] },
50+
{ type: 'date', key: 'date', label: 'Data', value: filters.date },
51+
]
52+
53+
const totalPages = Math.ceil(events.length / PER_PAGE)
54+
const visible = events.slice((page - 1) * PER_PAGE, page * PER_PAGE)
55+
56+
const counts = { info: 0, warning: 0, critical: 0 }
57+
for (const e of events) counts[e.severity]++
58+
59+
return (
60+
<main className="min-h-screen px-6 py-10">
61+
<div className="max-w-5xl flex flex-col gap-6">
62+
63+
<div className="flex items-end justify-between flex-wrap gap-4">
64+
<div>
65+
<p className="text-[9px] font-semibold tracking-[0.2em] uppercase mb-1" style={{ color: 'var(--color-green)' }}>sistema</p>
66+
<h1 className="text-xl font-bold" style={{ color: 'var(--color-white)' }}>
67+
Audit Log
68+
{!loading && <span className="ml-3 text-[11px] font-mono" style={{ color: 'var(--color-dim)' }}>{total} eventi</span>}
69+
</h1>
70+
</div>
71+
<FilterBar filters={defs} values={filters}
72+
onChange={(k, v) => setFilters(p => ({ ...p, [k]: v }))}
73+
onClear={() => setFilters({ severity: '', date: '' })} />
74+
</div>
75+
76+
{/* Summary badges */}
77+
{!loading && (
78+
<div className="flex gap-3 flex-wrap">
79+
{(Object.entries(counts) as [Severity, number][]).map(([s, n]) => (
80+
<div key={s} className="flex items-center gap-2 px-3 py-1.5 rounded"
81+
style={{ border: `1px solid ${SEV[s].color}33`, background: SEV[s].bg }}>
82+
<span className="text-[9px] font-bold uppercase" style={{ color: SEV[s].color }}>{s}</span>
83+
<span className="text-[12px] font-mono font-bold" style={{ color: SEV[s].color }}>{n}</span>
84+
</div>
85+
))}
86+
</div>
87+
)}
88+
89+
{loading ? (
90+
<p className="text-[11px]" style={{ color: 'var(--color-muted)' }}>Caricamento…</p>
91+
) : visible.length === 0 ? (
92+
<EmptyState icon="📋" title="Nessun evento trovato" size="sm" />
93+
) : (
94+
<>
95+
<div className="rounded-xl overflow-hidden" style={{ border: '1px solid var(--color-border)' }}>
96+
<table className="w-full border-collapse">
97+
<thead>
98+
<tr style={{ background: 'var(--color-deep)', borderBottom: '1px solid var(--color-border)' }}>
99+
{['Severity', 'Timestamp', 'Attore', 'Azione', 'Dettaglio'].map(h => (
100+
<th key={h} className="px-4 py-2.5 text-left text-[9px] font-bold uppercase tracking-wider"
101+
style={{ color: 'var(--color-dim)' }}>{h}</th>
102+
))}
103+
</tr>
104+
</thead>
105+
<tbody>
106+
{visible.map((e, i) => (
107+
<tr key={e.id} style={{ background: 'var(--color-panel)', borderBottom: i < visible.length - 1 ? '1px solid var(--color-border)' : 'none' }}>
108+
<td className="px-4 py-2.5"><SevBadge s={e.severity} /></td>
109+
<td className="px-4 py-2.5 text-[10px] font-mono whitespace-nowrap" style={{ color: 'var(--color-dim)' }}>{e.ts}</td>
110+
<td className="px-4 py-2.5 text-[11px] font-semibold" style={{ color: 'var(--color-muted)' }}>{e.actor}</td>
111+
<td className="px-4 py-2.5 text-[11px] font-semibold" style={{ color: 'var(--color-bright)' }}>{e.action}</td>
112+
<td className="px-4 py-2.5 text-[10px]" style={{ color: 'var(--color-dim)', maxWidth: 320 }}>
113+
<span className="line-clamp-1">{e.detail}</span>
114+
</td>
115+
</tr>
116+
))}
117+
</tbody>
118+
</table>
119+
</div>
120+
{totalPages > 1 && (
121+
<Pagination page={page} totalPages={totalPages} perPage={PER_PAGE}
122+
totalItems={events.length} onPage={setPage} />
123+
)}
124+
</>
125+
)}
126+
</div>
127+
</main>
128+
)
129+
}

0 commit comments

Comments
 (0)