Audit log table and modal

frontend/src/components/Table/Formatter/EventFormatter.tsx

@@ -0,0 +1,53 @@
+import { IconUser } from "@tabler/icons-react";
+import type { AuditLog } from "src/api/backend";
+import { DateTimeFormat, intl } from "src/locale";
+
+const getEventTitle = (event: AuditLog) => (
+	<span>{intl.formatMessage({ id: `event.${event.action}-${event.objectType}` })}</span>
+);
+
+const getEventValue = (event: AuditLog) => {
+	switch (event.objectType) {
+		case "user":
+			return event.meta?.name;
+		default:
+			return `UNKNOWN EVENT TYPE: ${event.objectType}`;
+	}
+};
+
+const getColorForAction = (action: string) => {
+	switch (action) {
+		case "created":
+			return "text-lime";
+		case "deleted":
+			return "text-red";
+		default:
+			return "text-blue";
+	}
+};
+
+const getIcon = (row: AuditLog) => {
+	const c = getColorForAction(row.action);
+	let ico = null;
+	switch (row.objectType) {
+		case "user":
+			ico = <IconUser size={16} className={c} />;
+			break;
+	}
+
+	return ico;
+};
+
+interface Props {
+	row: AuditLog;
+}
+export function EventFormatter({ row }: Props) {
+	return (
+		<div className="flex-fill">
+			<div className="font-weight-medium">
+				{getIcon(row)} {getEventTitle(row)} &mdash; <span className="badge">{getEventValue(row)}</span>
+			</div>
+			<div className="text-secondary mt-1">{DateTimeFormat(row.createdOn)}</div>
+		</div>
+	);
+}