feat: implement audit logs

apps/edr-freight-web/backoffice/src/App.tsx

@@ -7,6 +7,7 @@ import {
   FileSignature,
   FileText,
   Hammer,
+  History,
   LayoutDashboard,
   LayoutGrid,
   MapPin,
@@ -76,6 +77,7 @@ import ReportsHubPage from "./pages/reports/ReportsHubPage";
 import ReportPage from "./pages/reports/ReportPage";
 import AiBookingMockTestPage from "./pages/ai/AiBookingMockTestPage";
 import PaymentsPage from "./pages/payments/PaymentsPage";
+import AuditLogsPage from "./pages/audit/AuditLogsPage";
 //import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
 import { RequirePermission } from "./components/auth/RequirePermission";
 import {
@@ -582,6 +584,12 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <ScrollText />,
         permission: FREIGHT_PERMS.admin,
       },
+      {
+        label: "Audit logs",
+        href: "/dashboard/audit-logs",
+        icon: <History />,
+        permission: FREIGHT_PERMS.audit.view,
+      },
       {
         label: "Configuration",
         href: "/dashboard/configuration",
@@ -1595,6 +1603,14 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="audit-logs"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.audit.view}>
+              <AuditLogsPage />
+            </RequirePermission>
+          }
+        />
         <Route
           path="contract-templates"
           element={

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -184,6 +184,13 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
       subtitle: "Manage dropdown options used across the platform",
     },
   },
+  {
+    prefix: "/dashboard/audit-logs",
+    meta: {
+      title: "Audit Logs",
+      subtitle: "Request and entity-level activity recorded across the freight API",
+    },
+  },
   {
     prefix: "/dashboard/configuration/contract-validity-periods",
     meta: {

apps/edr-freight-web/backoffice/src/constants/URLS.ts

@@ -309,6 +309,10 @@ export const URL_CONSTANTS = {
     SUMMARY: "/payments/summary",
   },
 
+  AUDIT: {
+    LOGS: "/audit/logs",
+  },
+
   LOCOMOTIVES: {
     BASE: "/locomotives",
     BY_ID: (id: string) => `/locomotives/${id}`,

apps/edr-freight-web/backoffice/src/lib/permissions.ts

@@ -276,6 +276,9 @@ export const FREIGHT_PERMS = {
       manage: "edr_freight_app:settings:dropdown:manage",
     },
   },
+  audit: {
+    view: "edr_freight_app:audit:view",
+  },
   staff: {
     roles: {
       view: "edr_freight_app:staff:roles:view",

apps/edr-freight-web/backoffice/src/pages/audit/AuditLogsPage.tsx

@@ -0,0 +1,185 @@
+import { Badge, Box, Card, Stack, Text } from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+
+import { PageContainer, PageHeader } from "@/components/page";
+import { api } from "@/services/api";
+import type {
+  AuditLogRow,
+  AuditQueryMethod,
+  AuditUser,
+} from "@/services/audit.service";
+import {
+  DataTable,
+  DataTableFooter,
+  usePagination,
+  type ColumnDef,
+} from "@edr/ui-common";
+
+const ACTION_LABELS: Record<AuditQueryMethod, string> = {
+  INSERT: "Created",
+  UPDATE: "Updated",
+  DELETE: "Deleted",
+  INSERT_CHILD: "Linked child",
+  DELETE_CHILD: "Unlinked child",
+};
+
+const ACTION_COLORS: Record<AuditQueryMethod, string> = {
+  INSERT: "edr-green",
+  UPDATE: "yellow",
+  DELETE: "red",
+  INSERT_CHILD: "indigo",
+  DELETE_CHILD: "gray",
+};
+
+function formatDateTime(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+}
+
+// The producer (@tria-plc/auditlog's ClientLoggerInterceptor) builds
+// `name` from `${auditUser?.firstName}  ${auditUser?.lastName}` — this app's
+// user model only has a single `name` field, and unauthenticated/customer
+// flows (e.g. Fayda verification) have no auditUser at all, so this literal
+// "undefined  undefined" ends up stored as-is. Filter it back out on render
+// rather than showing raw garbage.
+function formatUser(user: AuditUser | null | undefined): string {
+  const name = user?.name;
+  if (typeof name === "string" && /^undefined(\s+undefined)?$/.test(name.trim())) {
+    return "—";
+  }
+  return name ?? user?.id ?? "—";
+}
+
+function summarize(row: AuditLogRow): string {
+  if (row.changes?.length) {
+    return row.changes
+      .slice(0, 2)
+      .map((c) => c.field)
+      .join(", ") + (row.changes.length > 2 ? `, +${row.changes.length - 2} more` : "");
+  }
+  if (row.payload) {
+    return row.payload.name ?? row.payload.title ?? row.payload.id ?? "—";
+  }
+  return "—";
+}
+
+const tableHeader =
+  "text-xs font-semibold uppercase tracking-wide text-muted-foreground";
+
+export default function AuditLogsPage() {
+  const { pagination, setPagination } = usePagination({ pageSize: 20 });
+
+  const filter = {
+    skip: pagination.pageIndex * pagination.pageSize,
+    take: pagination.pageSize,
+  };
+
+  const { data, isLoading, isError } = useQuery(
+    api.audit.list.queryOptions({ input: { filter } }),
+  );
+
+  const rows = data?.items ?? [];
+  const total = data?.count ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
+
+  const columns: ColumnDef<AuditLogRow>[] = [
+    {
+      id: "time",
+      header: () => <span className={tableHeader}>Time</span>,
+      cell: ({ row }) => (
+        <span className="text-sm text-muted-foreground">
+          {formatDateTime(row.original.createdAt)}
+        </span>
+      ),
+    },
+    {
+      id: "action",
+      header: () => <span className={tableHeader}>Action</span>,
+      cell: ({ row }) => (
+        <Badge
+          color={ACTION_COLORS[row.original.queryMethod] ?? "gray"}
+          variant="light"
+          radius="sm"
+        >
+          {ACTION_LABELS[row.original.queryMethod] ?? row.original.queryMethod}
+        </Badge>
+      ),
+    },
+    {
+      id: "entity",
+      header: () => <span className={tableHeader}>Entity</span>,
+      cell: ({ row }) => (
+        <span className="font-mono text-sm text-foreground">
+          {row.original.entityName}
+        </span>
+      ),
+    },
+    {
+      id: "user",
+      header: () => <span className={tableHeader}>User</span>,
+      cell: ({ row }) => (
+        <span className="text-sm text-foreground">
+          {formatUser(row.original.auditLog?.user)}
+        </span>
+      ),
+    },
+    {
+      id: "summary",
+      header: () => <span className={tableHeader}>Summary</span>,
+      cell: ({ row }) => (
+        <span className="truncate text-sm text-muted-foreground">
+          {summarize(row.original)}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Audit Logs"
+        subtitle="Request and entity-level activity recorded across the freight API."
+      />
+
+      <Card p={0}>
+        <Stack gap={0}>
+          <Box px="md" pt="md" pb="sm" w="100%">
+            <Text size="sm" c="dimmed">
+              {total} record{total !== 1 ? "s" : ""}
+            </Text>
+          </Box>
+
+          <Box style={{ overflowX: "auto" }} w="100%">
+            <DataTable
+              columns={columns}
+              data={rows}
+              status={isLoading ? "loading" : isError ? "error" : "success"}
+              pagination={{
+                pageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+                pageCount,
+                totalCount: total,
+              }}
+              tableOptions={{
+                state: { pagination },
+                onPaginationChange: setPagination,
+                manualPagination: true,
+                pageCount,
+              }}
+              containerClassName="border-0 shadow-none bg-transparent"
+              footer={DataTableFooter}
+            />
+          </Box>
+        </Stack>
+      </Card>
+    </PageContainer>
+  );
+}

apps/edr-freight-web/backoffice/src/services/api.ts

@@ -163,6 +163,11 @@ import {
   type SaveLocomotivePayload,
 } from "./locomotives.service";
 import { overviewService } from "./overview.service";
+import {
+  auditService,
+  type AuditLogListFilter,
+  type PaginatedAuditLogs,
+} from "./audit.service";
 import { reportsService } from "./reports.service";
 import type { ReportQueryInput, ReportResult } from "@/types/reports";
 import {
@@ -2136,6 +2141,15 @@ export const api = {
     ),
   },
 
+  audit: {
+    list: endpoint<{ filter?: AuditLogListFilter }, PaginatedAuditLogs>(
+      "audit",
+      "list",
+      ({ filter }) => auditService.list(filter),
+      ({ filter }) => ["audit", "list", filter ?? {}],
+    ),
+  },
+
   signatures: {
     mySignature: endpoint<void, SavedSignature | null>(
       "me",

apps/edr-freight-web/backoffice/src/services/audit.service.ts

@@ -0,0 +1,61 @@
+import { api as client } from "../auth/http";
+import { unwrap } from "@/utils/endpoint";
+import { URL_CONSTANTS } from "@/constants/URLS";
+
+const A = URL_CONSTANTS.AUDIT;
+
+// Shape from @tria-plc/auditlog's AuditLogCommandController — see
+// local-packages/FRONTEND_GUIDE.md.
+export type AuditQueryMethod =
+  | "INSERT"
+  | "UPDATE"
+  | "DELETE"
+  | "INSERT_CHILD"
+  | "DELETE_CHILD";
+
+export interface AuditFieldChange {
+  field: string;
+  from: unknown;
+  to: unknown;
+}
+
+export interface AuditUser {
+  id?: string;
+  name?: string;
+  organizationId?: string;
+  organizationName?: string;
+  [key: string]: unknown;
+}
+
+export interface AuditLogRow {
+  id?: string;
+  createdAt: string;
+  deletedAt?: string | null;
+  entityName: string;
+  queryMethod: AuditQueryMethod;
+  changes?: AuditFieldChange[] | null;
+  payload?: { name?: string; title?: string; id?: string } | null;
+  auditLog?: { id?: string; user?: AuditUser | null };
+}
+
+export interface AuditLogListFilter {
+  skip?: number;
+  take?: number;
+}
+
+export interface PaginatedAuditLogs {
+  items: AuditLogRow[];
+  count: number;
+}
+
+export const auditService = {
+  list: async (filter?: AuditLogListFilter): Promise<PaginatedAuditLogs> => {
+    const params: Record<string, number | undefined> = {
+      skip: filter?.skip,
+      take: filter?.take,
+    };
+    const response = await client.get<PaginatedAuditLogs>(A.LOGS, { params });
+    const data = unwrap(response.data) as PaginatedAuditLogs;
+    return { items: data.items ?? [], count: data.count ?? 0 };
+  },
+};