alpenwerk-hr/app/(app)/audit/page.tsx

import Link from "next/link";
import { Suspense } from "react";
import { AuditFilters } from "@/components/audit/AuditFilters";
import { CARD_CLASS } from "@/components/ui/Card";
import { Pagination } from "@/components/ui/Pagination";
import { actionBadgeStyle } from "@/lib/colors";
import { sanitizeIlikeTerm } from "@/lib/supabase/query";
import { createClient } from "@/lib/supabase/server";

const PAGE_SIZE = 25;

type SearchParams = { q?: string; action?: string; page?: string };

function pageHref(params: SearchParams, page: number): string {
  const sp = new URLSearchParams();
  if (params.q) sp.set("q", params.q);
  if (params.action) sp.set("action", params.action);
  sp.set("page", String(page));
  return `/audit?${sp.toString()}`;
}

// Pinned to Vienna and built once: audit_log.occurred_at is a timestamptz, and
// an unpinned formatter renders it in the *server's* zone — UTC in Docker and
// on Vercel — so every entry would read an hour or two early for the people
// the log is for.
const dateTimeFormatter = new Intl.DateTimeFormat("de-AT", {
  day: "2-digit",
  month: "2-digit",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "Europe/Vienna",
});

export default async function AuditPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  const params = await searchParams;
  const supabase = await createClient();

  const page = Math.max(1, Number(params.page ?? "1") || 1);
  const from = (page - 1) * PAGE_SIZE;
  const to = from + PAGE_SIZE - 1;

  let query = supabase
    .from("audit_log")
    .select("id, occurred_at, actor_name, action, target_label, target_employee_id, details", { count: "exact" })
    .order("occurred_at", { ascending: false })
    .range(from, to);

  if (params.action) query = query.eq("action", params.action);
  if (params.q) {
    const q = sanitizeIlikeTerm(params.q.trim());
    query = query.or(`target_label.ilike.%${q}%,details.ilike.%${q}%,actor_name.ilike.%${q}%`);
  }

  const { data: entries, count } = await query;
  const totalPages = Math.max(1, Math.ceil((count ?? 0) / PAGE_SIZE));

  return (
    <div className="flex flex-col gap-4">
      <Suspense>
        <AuditFilters />
      </Suspense>
      <p className="text-sm text-ink-muted">{count ?? 0} Einträge</p>

      <div className={`overflow-x-auto ${CARD_CLASS}`}>
        <table className="w-full min-w-[800px] text-sm">
          <thead>
            <tr className="border-b border-border bg-surface text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
              <th className="px-4 py-2.5">Zeitpunkt</th>
              <th className="px-4 py-2.5">Benutzer:in</th>
              <th className="px-4 py-2.5">Aktion</th>
              <th className="px-4 py-2.5">Objekt</th>
              <th className="px-4 py-2.5">Details</th>
            </tr>
          </thead>
          <tbody>
            {(entries ?? []).map((entry) => {
              return (
                <tr key={entry.id} className="border-b border-border-subtle transition-colors last:border-0 hover:bg-brand-50">
                  <td className="whitespace-nowrap px-4 py-2.5 tabular-nums text-ink-body">
                    {dateTimeFormatter.format(new Date(entry.occurred_at))}
                  </td>
                  <td className="px-4 py-2.5 text-ink-body">{entry.actor_name}</td>
                  <td className="px-4 py-2.5">
                    <span className={`whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold ${actionBadgeStyle(entry.action)}`}>
                      {entry.action}
                    </span>
                  </td>
                  <td className="px-4 py-2.5 text-ink">
                    {entry.target_employee_id ? (
                      <Link
                        href={`/employees/${entry.target_employee_id}`}
                        className="rounded font-semibold hover:text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
                      >
                        {entry.target_label}
                      </Link>
                    ) : (
                      entry.target_label
                    )}
                  </td>
                  <td className="px-4 py-2.5 text-ink-muted">{entry.details ?? "–"}</td>
                </tr>
              );
            })}
            {(entries ?? []).length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-8 text-center text-sm text-ink-muted">
                  Keine Einträge gefunden.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <Pagination page={page} totalPages={totalPages} hrefFor={(p) => pageHref(params, p)} label="Audit-Log" />

      <p className="text-xs text-ink-muted">
        Alle Änderungen an Personal-Stammdaten werden automatisch protokolliert und sind unveränderbar.
      </p>
    </div>
  );
}