Audit log table and modal

frontend/src/pages/AuditLog/Table.tsx

@@ -0,0 +1,74 @@
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { AuditLog } from "src/api/backend";
+import { EventFormatter, GravatarFormatter } from "src/components";
+import { TableLayout } from "src/components/Table/TableLayout";
+import { intl } from "src/locale";
+
+interface Props {
+	data: AuditLog[];
+	isFetching?: boolean;
+	onSelectItem?: (id: number) => void;
+}
+export default function Table({ data, isFetching, onSelectItem }: Props) {
+	const columnHelper = createColumnHelper<AuditLog>();
+	const columns = useMemo(
+		() => [
+			columnHelper.accessor((row: AuditLog) => row.user, {
+				id: "user.avatar",
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value.avatar} name={value.name} />;
+				},
+				meta: {
+					className: "w-1",
+				},
+			}),
+			columnHelper.accessor((row: AuditLog) => row.user?.name, {
+				id: "user.name",
+				header: intl.formatMessage({ id: "column.name" }),
+			}),
+			columnHelper.accessor((row: AuditLog) => row, {
+				id: "objectType",
+				header: intl.formatMessage({ id: "column.event" }),
+				cell: (info: any) => {
+					return <EventFormatter row={info.getValue()} />;
+				},
+			}),
+			columnHelper.display({
+				id: "id",
+				cell: (info: any) => {
+					return (
+						<button
+							type="button"
+							className="btn btn-action btn-sm px-1"
+							onClick={(e) => {
+								e.preventDefault();
+								onSelectItem?.(info.row.original.id);
+							}}
+						>
+							{intl.formatMessage({ id: "action.view-details" })}
+						</button>
+					);
+				},
+				meta: {
+					className: "text-end w-1",
+				},
+			}),
+		],
+		[columnHelper, onSelectItem],
+	);
+
+	const tableInstance = useReactTable<AuditLog>({
+		columns,
+		data,
+		getCoreRowModel: getCoreRowModel(),
+		rowCount: data.length,
+		meta: {
+			isFetching,
+		},
+		enableSortingRemoval: false,
+	});
+
+	return <TableLayout tableInstance={tableInstance} />;
+}

frontend/src/pages/AuditLog/TableWrapper.tsx

@@ -0,0 +1,53 @@
+import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
+import Alert from "react-bootstrap/Alert";
+import { LoadingPage } from "src/components";
+import { useAuditLogs } from "src/hooks";
+import { intl } from "src/locale";
+import { EventDetailsModal } from "src/modals";
+import Table from "./Table";
+
+export default function TableWrapper() {
+	const [eventId, setEventId] = useState(0);
+	const { isFetching, isLoading, isError, error, data } = useAuditLogs(["user"]);
+
+	if (isLoading) {
+		return <LoadingPage />;
+	}
+
+	if (isError) {
+		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
+	}
+
+	return (
+		<div className="card mt-4">
+			<div className="card-status-top bg-purple" />
+			<div className="card-table">
+				<div className="card-header">
+					<div className="row w-full">
+						<div className="col">
+							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.title" })}</h2>
+						</div>
+						<div className="col-md-auto col-sm-12">
+							<div className="ms-auto d-flex flex-wrap btn-list">
+								<div className="input-group input-group-flat w-auto">
+									<span className="input-group-text input-group-text-sm">
+										<IconSearch size={16} />
+									</span>
+									<input
+										id="advanced-table-search"
+										type="text"
+										className="form-control form-control-sm"
+										autoComplete="off"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<Table data={data ?? []} isFetching={isFetching} onSelectItem={setEventId} />
+				{eventId ? <EventDetailsModal id={eventId} onClose={() => setEventId(0)} /> : null}
+			</div>
+		</div>
+	);
+}

frontend/src/pages/AuditLog/index.tsx

@@ -1,10 +1,10 @@
 import { HasPermission } from "src/components";
-import AuditTable from "./AuditTable";
+import TableWrapper from "./TableWrapper";
 
 const AuditLog = () => {
 	return (
 		<HasPermission permission="admin" type="manage" pageLoading loadingNoLogo>
-			<AuditTable />
+			<TableWrapper />
 		</HasPermission>
 	);
 };