t5de-hub/apps/web/app/console/audit/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader } from "@/components/status";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api, unwrap } from "@/lib/api";
import { AuditTable } from "../audit-table";
import { ConsoleNav, requireConsole } from "../console-nav";

export const metadata: Metadata = { title: "Audit Log" };

const filters = ["action", "actor", "person", "catalog", "product", "room", "q", "from", "to"] as const;
type Filters = Partial<Record<(typeof filters)[number], string>>;

export default async function AuditPage({ searchParams }: { searchParams: Promise<Record<string, string | string[]>> }) {
  const { console: data } = await requireConsole("/console/audit");
  const params = await searchParams;
  const f: Filters = {};
  for (const k of filters) {
    const v = params[k];
    if (typeof v === "string" && v.trim()) f[k] = v.trim().slice(0, 100);
  }
  const before = typeof params.before === "string" && /^\d+$/.test(params.before) ? Number(params.before) : undefined;
  const { entries, before: next } = unwrap(await api.console.audit.get({ query: { ...f, ...(before ? { before } : {}), limit: 100 } }));
  const older = new URLSearchParams({ ...f, ...(next ? { before: String(next) } : {}) });
  const moderator = data.moderation !== null;

  return (
    <>
      <PageHeader title="Audit Log">
        {moderator ? "Every change on the hub." : "Changes to what you manage, and the ones you made."}
      </PageHeader>
      <ConsoleNav />
      <form action="/console/audit" className="mb-6 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
        <Input name="q" defaultValue={f.q} placeholder="Search" aria-label="Search" />
        <Input name="action" defaultValue={f.action} placeholder="Action, e.g. catalog." aria-label="Action" />
        <Input name="actor" defaultValue={f.actor} placeholder="Done by (username)" aria-label="Done by" />
        {moderator && <Input name="person" defaultValue={f.person} placeholder="About or by a person" aria-label="Person" />}
        <Input name="catalog" defaultValue={f.catalog} placeholder="Catalog ID" aria-label="Catalog" />
        <Input name="product" defaultValue={f.product} placeholder="Product ID" aria-label="Product" />
        <Input type="date" name="from" defaultValue={f.from} aria-label="From" />
        <Input type="date" name="to" defaultValue={f.to} aria-label="To" />
        <div className="flex gap-2">
          <Button type="submit">Filter</Button>
          {Object.keys(f).length > 0 && (
            <Link href="/console/audit" className={buttonVariants({ variant: "outline" })}>
              Clear
            </Link>
          )}
        </div>
      </form>
      <Card>
        <CardContent>
          <AuditTable entries={entries} empty={Object.keys(f).length ? "Nothing matches." : "Nothing yet."} />
        </CardContent>
      </Card>
      {next && entries.length === 100 && (
        <div className="mt-4">
          <Link href={`/console/audit?${older}`} className={buttonVariants({ variant: "outline" })}>
            Older
          </Link>
        </div>
      )}
    </>
  );
}