+
+ {/* Azione */}
+
+
+
+
+
+ {/* Esito */}
+
+
+
+
+
+ {/* Data da */}
+
+
+ setFilterDateFrom(e.target.value)}
+ className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+ {/* Data a */}
+
+
+ setFilterDateTo(e.target.value)}
+ className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ {/* Bottoni */}
+
+
+
+
+
+ {/* Header tabella con count */}
+
+
+ {isLoading ? 'Caricamento...' : `${total.toLocaleString('it-IT')} eventi trovati`}
+
+ {total > 0 && (
+
+ Pagina {page} di {pages}
+
+ )}
+
+
+ {/* Stato errore */}
+ {isError && (
+
+
+
Errore nel caricamento dei dati.
+
+ )}
+
+ {/* Stato vuoto */}
+ {!isLoading && !isError && items.length === 0 && (
+
+
+
Nessun evento trovato.
+
+ )}
+
+ {/* Dati */}
+ {items.length > 0 && (
+
+
+
+
+ |
+ Data / Ora
+ |
+
+ Azione
+ |
+
+ Esito
+ |
+
+ Risorsa
+ |
+
+ IP
+ |
+
+ Utente
+ |
+
+
+
+ {items.map((entry) => (
+
+ {/* Data/ora */}
+ |
+ {format(new Date(entry.occurred_at), 'dd/MM/yyyy HH:mm:ss', { locale: it })}
+ |
+
+ {/* Azione */}
+
+
+ {actionLabel(entry.action)}
+
+
+ ({entry.action})
+
+ |
+
+ {/* Esito */}
+
+
+ |
+
+ {/* Risorsa */}
+
+ {entry.resource_type ? (
+
+ {entry.resource_type}
+ {entry.resource_id && (
+
+ {entry.resource_id.split('-')[0]}...
+
+ )}
+
+ ) : (
+ —
+ )}
+ |
+
+ {/* IP */}
+
+ {entry.ip_address ?? —}
+ |
+
+ {/* Utente (UUID abbreviato) */}
+
+ {entry.user_id ? (
+
+ {entry.user_id.split('-')[0]}...
+
+ ) : (
+ —
+ )}
+ |
+
+ ))}
+
+
+
+ )}
+
+ {/* Paginazione */}
+ {pages > 1 && (
+
+
+
+ {page} / {pages}
+
+
+
+ )}
+