Merge branch 'feature/aud-04-audit-log-ansicht' into feature/qa-09-barrierefreiheits-audit

# Conflicts: # DEVLOG.md # go.mod # go.sum # scripts/reset-test-env.sh
2026-08-29 10:00:28 +02:00
parent 8bd5bb5a52 6537888da6
commit 93a49dd72c
18 changed files with 1094 additions and 0 deletions
@@ -0,0 +1,30 @@
+import { ThemeProvider, I18nProvider, ToastProvider, typography } from "@nexarch/shl";
+
+export const metadata = {
+  title: "NEXARCH Audit-Log",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="de">
+      <body
+        style={{
+          fontFamily: typography.fontFamily,
+          margin: 0,
+          background: "var(--shl-color-background, #ffffff)",
+          color: "var(--shl-color-text-primary, #14181f)",
+        }}
+      >
+        <ThemeProvider>
+          <I18nProvider initialLocale="de">
+            <ToastProvider>{children}</ToastProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import { fetchRecords, exportURL, type AuditRecord, type AuditFilter } from "@/lib/api";
+
+const EMPTY_FILTER: AuditFilter = { tenant: "", actor: "", action: "", from: "", to: "" };
+
+export default function Page() {
+  const [caller, setCaller] = useState("");
+  const [filter, setFilter] = useState<AuditFilter>(EMPTY_FILTER);
+  const [records, setRecords] = useState<AuditRecord[] | null>(null);
+  const [selected, setSelected] = useState<AuditRecord | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSearch() {
+    setError(null);
+    setSelected(null);
+    try {
+      const data = await fetchRecords(caller.trim(), filter);
+      setRecords(data);
+    } catch (e: any) {
+      setError(e.message ?? "Unbekannter Fehler");
+      setRecords(null);
+    }
+  }
+
+  function onExport(format: "csv" | "json") {
+    const url = exportURL(caller.trim(), filter, format);
+    // Echter Datei-Download ueber Browser-Navigation, KEIN erneutes Parsen
+    // im Frontend (Akzeptanzkriterium 2: Export aus AUD-03 direkt ausloesbar).
+    window.open(url, "_blank");
+  }
+
+  return (
+    <main style={{ maxWidth: 1000, margin: "0 auto", padding: "2rem 1rem" }}>
+      <h1>Audit-Log</h1>
+
+      <div style={{ display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(3, 1fr)", marginBottom: "1rem" }}>
+        <input
+          value={caller}
+          onChange={(e) => setCaller(e.target.value)}
+          placeholder="Admin-Token (Berechtigung)"
+          style={{ padding: "0.5rem", gridColumn: "span 3" }}
+        />
+        <input
+          value={filter.tenant}
+          onChange={(e) => setFilter({ ...filter, tenant: e.target.value })}
+          placeholder="Tenant"
+          style={{ padding: "0.5rem" }}
+        />
+        <input
+          value={filter.actor}
+          onChange={(e) => setFilter({ ...filter, actor: e.target.value })}
+          placeholder="Akteur"
+          style={{ padding: "0.5rem" }}
+        />
+        <input
+          value={filter.action}
+          onChange={(e) => setFilter({ ...filter, action: e.target.value })}
+          placeholder="Aktion"
+          style={{ padding: "0.5rem" }}
+        />
+        <label>
+          Von
+          <input
+            type="datetime-local"
+            value={filter.from}
+            onChange={(e) =>
+              setFilter({ ...filter, from: e.target.value ? new Date(e.target.value).toISOString() : "" })
+            }
+            style={{ width: "100%", padding: "0.4rem" }}
+          />
+        </label>
+        <label>
+          Bis
+          <input
+            type="datetime-local"
+            value={filter.to}
+            onChange={(e) =>
+              setFilter({ ...filter, to: e.target.value ? new Date(e.target.value).toISOString() : "" })
+            }
+            style={{ width: "100%", padding: "0.4rem" }}
+          />
+        </label>
+      </div>
+
+      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
+        <button onClick={onSearch}>Suchen</button>
+        <button onClick={() => onExport("csv")}>Export als CSV</button>
+        <button onClick={() => onExport("json")}>Export als JSON</button>
+      </div>
+
+      {error && (
+        <p style={{ color: "#c62828" }} role="alert">
+          Fehler: {error}
+        </p>
+      )}
+
+      {records && (
+        <table style={{ width: "100%", borderCollapse: "collapse", background: "white" }}>
+          <thead>
+            <tr style={{ textAlign: "left", borderBottom: "2px solid #ddd" }}>
+              <th style={{ padding: "0.5rem" }}>Zeitpunkt</th>
+              <th style={{ padding: "0.5rem" }}>Tenant</th>
+              <th style={{ padding: "0.5rem" }}>Akteur</th>
+              <th style={{ padding: "0.5rem" }}>Aktion</th>
+              <th style={{ padding: "0.5rem" }}></th>
+            </tr>
+          </thead>
+          <tbody>
+            {records.map((r, i) => (
+              <tr key={i} style={{ borderBottom: "1px solid #eee" }}>
+                <td style={{ padding: "0.5rem" }}>{new Date(r.occurred_at).toLocaleString("de-DE")}</td>
+                <td style={{ padding: "0.5rem" }}>{r.tenant_slug}</td>
+                <td style={{ padding: "0.5rem" }}>{r.actor}</td>
+                <td style={{ padding: "0.5rem" }}>{r.action}</td>
+                <td style={{ padding: "0.5rem" }}>
+                  <button onClick={() => setSelected(r)}>Details</button>
+                </td>
+              </tr>
+            ))}
+            {records.length === 0 && (
+              <tr>
+                <td colSpan={5} style={{ padding: "0.5rem" }}>
+                  Keine Einträge gefunden.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+
+      {selected && (
+        <section style={{ background: "white", padding: "1rem", borderRadius: 8, marginTop: "1.5rem" }}>
+          <h2>Eintrag-Details</h2>
+          <dl>
+            <dt>Zeitpunkt</dt>
+            <dd>{new Date(selected.occurred_at).toLocaleString("de-DE")}</dd>
+            <dt>Tenant</dt>
+            <dd>{selected.tenant_slug}</dd>
+            <dt>Akteur</dt>
+            <dd>{selected.actor}</dd>
+            <dt>Aktion</dt>
+            <dd>{selected.action}</dd>
+            <dt>Ziel</dt>
+            <dd>{selected.target}</dd>
+            <dt>Metadaten</dt>
+            <dd>
+              <pre style={{ whiteSpace: "pre-wrap", background: "#f5f6f8", padding: "0.5rem" }}>
+                {JSON.stringify(selected.metadata, null, 2)}
+              </pre>
+            </dd>
+          </dl>
+          <button onClick={() => setSelected(null)}>Schließen</button>
+        </section>
+      )}
+    </main>
+  );
+}
@@ -0,0 +1,63 @@
+// Duenner Client der AUD-03-Export-API (internal/audit.ExportHandler) —
+// keine eigene Aggregations-/Filterlogik im Frontend (Ticket-Vorgabe:
+// "reiner Konsument der Export-API"). Die JSON-Lines-Antwort wird nur
+// dekodiert, nicht neu berechnet oder gefiltert.
+export type AuditRecord = {
+  occurred_at: string;
+  tenant_slug: string;
+  actor: string;
+  action: string;
+  target: string;
+  metadata: unknown;
+};
+
+export type AuditFilter = {
+  tenant: string;
+  actor: string;
+  action: string;
+  from: string; // RFC3339, leer = kein Filter
+  to: string;
+};
+
+function apiBase(): string {
+  const base = process.env.NEXT_PUBLIC_AUDITLOG_API_URL;
+  if (!base) {
+    throw new Error(
+      "NEXT_PUBLIC_AUDITLOG_API_URL ist nicht gesetzt (Umgebungsvariable erforderlich)"
+    );
+  }
+  return base;
+}
+
+function buildParams(caller: string, filter: AuditFilter, format: "json" | "csv"): URLSearchParams {
+  const params = new URLSearchParams({ caller, format });
+  if (filter.tenant) params.set("tenant", filter.tenant);
+  if (filter.actor) params.set("actor", filter.actor);
+  if (filter.action) params.set("action", filter.action);
+  if (filter.from) params.set("from", filter.from);
+  if (filter.to) params.set("to", filter.to);
+  return params;
+}
+
+// exportURL liefert die Adresse desselben Endpunkts, den auch die
+// Export-Datei-Funktion (Akzeptanzkriterium 2) verwendet — Liste und Export
+// sind bewusst DERSELBE API-Aufruf mit unterschiedlichem "format".
+export function exportURL(caller: string, filter: AuditFilter, format: "json" | "csv"): string {
+  return `${apiBase()}/audit/export?${buildParams(caller, filter, format)}`;
+}
+
+// fetchRecords laedt die Liste als JSON-Lines und dekodiert Zeile fuer
+// Zeile — dieselben Filterparameter wie ein direkter API-Aufruf
+// (Akzeptanzkriterium 1 / Pruefung 1).
+export async function fetchRecords(caller: string, filter: AuditFilter): Promise<AuditRecord[]> {
+  const res = await fetch(exportURL(caller, filter, "json"), { cache: "no-store" });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Anfrage fehlgeschlagen (${res.status})`);
+  }
+  const text = await res.text();
+  return text
+    .split("\n")
+    .filter((line) => line.trim() !== "")
+    .map((line) => JSON.parse(line) as AuditRecord);
+}
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // @nexarch/shl liegt als file:-Dependency mit TS-Quellen in node_modules —
+  // Next.js transpiliert node_modules standardmäßig nicht, siehe web/shl/README.md.
+  transpilePackages: ["@nexarch/shl"],
+};
+export default nextConfig;
@@ -0,0 +1,22 @@
+{
+  "name": "nexarch-audit-log",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@nexarch/shl": "file:../shl",
+    "next": "14.2.35",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "typescript": "5.5.3"
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}