import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Search } from "lucide-react"; import type { ApiSettings, AuthInfo } from "@govoplan/core-webui"; import { fetchAdminAudit, fetchAdminAuditDelta, type AuditAdminItem } from "../../api/admin"; import { Button } from "@govoplan/core-webui"; import { DataGrid, type DataGridColumn, type DataGridQueryState } from "@govoplan/core-webui"; import { Dialog } from "@govoplan/core-webui"; import { AdminIconButton, AdminPageLayout, adminErrorMessage, formatAdminDateTime as formatDateTime, i18nMessage, mergeDeltaRows, useDeltaWatermarks } from "@govoplan/core-webui"; type AuditSortBy = "time" | "actor" | "action" | "object" | "tenant"; const DEFAULT_QUERY: DataGridQueryState = { sort: { columnId: "time", direction: "desc" }, filters: {} }; export default function AdminAuditPanel({ settings, auth, systemMode = false }: {settings: ApiSettings;auth: AuthInfo;systemMode?: boolean;}) { const [items, setItems] = useState([]); const itemsRef = useRef([]); const pageItemsRef = useRef>({}); const pageCursorsRef = useRef>({ 1: null }); const { getDeltaWatermark, setDeltaWatermark, resetDeltaWatermark } = useDeltaWatermarks(); const [total, setTotal] = useState(0); const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [query, setQuery] = useState(DEFAULT_QUERY); const [selected, setSelected] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [reloadToken, setReloadToken] = useState(0); const tenantId = (auth.active_tenant ?? auth.tenant).id; const load = useCallback(async () => { setLoading(true); setError(""); try { const sortColumn = query.sort?.columnId; const sortBy = sortColumn && ["time", "actor", "action", "object", "tenant"].includes(sortColumn) ? sortColumn as AuditSortBy : "time"; const sortDirection = query.sort?.direction ?? "desc"; const filters = query.filters; const pageCursor = page === 1 ? null : pageCursorsRef.current[page]; const deltaMode = page === 1 || pageCursor !== undefined; const requestOptions = { scope: systemMode ? "system" : "tenant", page, pageSize, cursor: pageCursor, sortBy, sortDirection, filters }; const deltaKey = `access:audit:${systemMode ? "system" : "tenant"}:${tenantId}:${pageSize}:${page}:${pageCursor ?? "root"}:${JSON.stringify({ sortBy, sortDirection, filters })}`; const response = deltaMode ? await fetchAdminAuditDelta(settings, { ...requestOptions, since: getDeltaWatermark(deltaKey) }) : await fetchAdminAudit(settings, requestOptions); const baseItems = pageItemsRef.current[deltaKey] ?? []; const nextItems = "full" in response && !response.full ? mergeDeltaRows(baseItems, response.items, response.deleted, (item) => item.id, { sort: compareAuditEvents(sortBy, sortDirection) }).slice(0, pageSize) : response.items; pageItemsRef.current[deltaKey] = nextItems; itemsRef.current = nextItems; setItems(nextItems); setTotal(response.total); if (!deltaMode && response.page !== page) setPage(response.page); if (response.cursor !== undefined) pageCursorsRef.current[page] = response.cursor ?? null; if (response.next_cursor !== undefined) { if (response.next_cursor) pageCursorsRef.current[page + 1] = response.next_cursor; else delete pageCursorsRef.current[page + 1]; } if ("full" in response && !response.full && page === 1 && (response.items.length > 0 || response.deleted.length > 0)) { pageCursorsRef.current = { 1: null }; } if ("watermark" in response) setDeltaWatermark(deltaKey, response.watermark); if (!deltaMode) resetDeltaWatermark(deltaKey); } catch (err) { setError(adminErrorMessage(err)); } finally { setLoading(false); } }, [settings.accessToken, settings.apiBaseUrl, systemMode, tenantId, page, pageSize, query, reloadToken, getDeltaWatermark, setDeltaWatermark, resetDeltaWatermark]); useEffect(() => { itemsRef.current = []; pageItemsRef.current = {}; pageCursorsRef.current = { 1: null }; resetDeltaWatermark(); }, [settings.accessToken, settings.apiBaseUrl, systemMode, tenantId, pageSize, query, resetDeltaWatermark]); useEffect(() => {void load();}, [load]); const handleQueryChange = useCallback((next: DataGridQueryState) => { setQuery((current) => { if (JSON.stringify(current) === JSON.stringify(next)) return current; setPage(1); return next; }); }, []); const columns = useMemo[]>(() => [ { id: "time", header: "i18n:govoplan-access.time.6c82e6dd", width: 190, minWidth: 150, maxWidth: 260, resizable: true, sticky: "start", sortable: true, filterable: true, filterType: "date", value: (row) => row.created_at, render: (row) => formatDateTime(row.created_at) }, { id: "actor", header: "i18n:govoplan-access.actor.cbd19b5c", width: 220, minWidth: 170, maxWidth: 360, resizable: true, sortable: true, filterable: true, value: (row) => row.actor_email || "i18n:govoplan-access.system.bc0792d8" }, { id: "action", header: "i18n:govoplan-access.action.97c89a4d", width: 250, minWidth: 170, maxWidth: 420, resizable: true, sortable: true, filterable: true, value: (row) => row.action }, { id: "object", header: "i18n:govoplan-access.object.2883f191", width: 300, minWidth: 180, maxWidth: 640, resizable: true, fill: true, sortable: true, filterable: true, value: (row) => `${row.object_type || "—"} ${row.object_id || ""}`.trim() }, ...(systemMode ? [{ id: "tenant", header: "i18n:govoplan-access.tenant_context.b401a2ad", width: 190, minWidth: 150, maxWidth: 300, resizable: true, sortable: true, filterable: true, value: (row: AuditAdminItem) => row.tenant_id || "—" }] : []), { id: "actions", header: "i18n:govoplan-access.actions.c3cd636a", width: 70, sticky: "end", resizable: false, align: "right", render: (row) =>
} onClick={() => setSelected(row)} />
}], [systemMode]); const firstShown = total === 0 ? 0 : (page - 1) * pageSize + 1; const lastShown = Math.min(total, page * pageSize); return ( <> setReloadToken((value) => value + 1)} disabled={loading}>i18n:govoplan-access.reload.cce71553}>
row.id} emptyText="i18n:govoplan-access.no_administrative_audit_records_found.8d128767" className="admin-audit-grid" initialSort={{ columnId: "time", direction: "desc" }} pagination={{ mode: "server", page, pageSize, totalRows: total, pageSizeOptions: [10, 25, 50, 100, 250], disabled: loading, onPageChange: setPage, onPageSizeChange: (next) => {setPageSize(next);setPage(1);} }} onQueryChange={handleQueryChange} />
setSelected(null)} className="admin-dialog admin-dialog-wide" footer={}> {selected && <>
i18n:govoplan-access.scope.4651a34e
{selected.scope}
i18n:govoplan-access.action.97c89a4d
{selected.action}
i18n:govoplan-access.actor.cbd19b5c
{selected.actor_email || "i18n:govoplan-access.system.bc0792d8"}
i18n:govoplan-access.object.2883f191
{selected.object_type || "—"} {selected.object_id || ""}
i18n:govoplan-access.tenant_context.b401a2ad
{selected.tenant_id || "—"}
i18n:govoplan-access.time.6c82e6dd
{formatDateTime(selected.created_at)}
{JSON.stringify(selected.details, null, 2)}
}
); } function compareAuditEvents(sortBy: AuditSortBy, sortDirection: "asc" | "desc"): (left: AuditAdminItem, right: AuditAdminItem) => number { return (left, right) => { const primary = compareAuditValues(auditSortValue(left, sortBy), auditSortValue(right, sortBy)); const directed = sortDirection === "asc" ? primary : -primary; return directed || right.id.localeCompare(left.id); }; } function auditSortValue(item: AuditAdminItem, sortBy: AuditSortBy): string | number { if (sortBy === "time") return new Date(item.created_at).getTime(); if (sortBy === "actor") return item.actor_email || "System"; if (sortBy === "action") return item.action; if (sortBy === "object") return `${item.object_type || ""} ${item.object_id || ""}`; return item.tenant_id || ""; } function compareAuditValues(left: string | number, right: string | number): number { if (typeof left === "number" && typeof right === "number") return left - right; return String(left).localeCompare(String(right)); }