Materialänderungslog: Historie-Endpunkt + Admin-Tab

historie-Tabelle (append-only Audit-Trail über Kontrolle/Fehlbestand/ Nachfüllung/Mindermenge) war bisher nur intern befüllt, ohne API/UI. Neu: GET /api/v1/historie (gefiltert nach Typ/ID/Benutzer/Zeitraum, paginiert, Benutzername aufgelöst), Admin-Portal-Tab "Änderungslog" mit Typ-Filter. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
2026-09-04 19:54:01 +02:00
parent d7c3e52002
commit e949b5e9ac
10 changed files with 322 additions and 1 deletions
@@ -0,0 +1,98 @@
+import { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { HistorieEintrag } from "../../api/types";
+
+interface Props {
+  onFehler: (text: string) => void;
+}
+
+const ENTITAET_TYPEN = ["kontrolle", "fehlbestand", "nachfuellung", "mindermengen_genehmigung"] as const;
+
+function formatWert(wert: Record<string, unknown> | null): string {
+  if (!wert) return "–";
+  return Object.entries(wert)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join(", ");
+}
+
+/** Materialänderungslog (Prompt 13): reine Anzeige des append-only Audit-Trails
+ * aus der historie-Tabelle - Kontrolle/Fehlbestand/Nachfüllung/Mindermenge. */
+export function HistorieSection({ onFehler }: Props) {
+  const [eintraege, setEintraege] = useState<HistorieEintrag[]>([]);
+  const [entitaetTyp, setEntitaetTyp] = useState("");
+  const [laedt, setLaedt] = useState(true);
+
+  async function laden() {
+    setLaedt(true);
+    try {
+      const query = entitaetTyp ? `?entitaet_typ=${entitaetTyp}` : "";
+      const daten = await apiRequest<HistorieEintrag[]>(`/historie${query}`);
+      setEintraege(daten);
+    } catch {
+      onFehler("Änderungslog konnte nicht geladen werden.");
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  useEffect(() => {
+    laden();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entitaetTyp]);
+
+  return (
+    <section className="section">
+      <h2>Änderungslog</h2>
+      <div className="card">
+        <div className="field" style={{ maxWidth: "20rem" }}>
+          <label>Typ</label>
+          <select className="input" value={entitaetTyp} onChange={(e) => setEntitaetTyp(e.target.value)}>
+            <option value="">Alle</option>
+            {ENTITAET_TYPEN.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {laedt && <p className="text-muted">Lade…</p>}
+        {!laedt && eintraege.length === 0 && <p className="text-muted">Keine Einträge.</p>}
+
+        {!laedt && eintraege.length > 0 && (
+          <div style={{ overflowX: "auto" }}>
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Zeitpunkt</th>
+                  <th>Benutzer</th>
+                  <th>Ereignis</th>
+                  <th>Typ / ID</th>
+                  <th>Alter Wert</th>
+                  <th>Neuer Wert</th>
+                  <th>Begründung</th>
+                </tr>
+              </thead>
+              <tbody>
+                {eintraege.map((e) => (
+                  <tr key={e.id}>
+                    <td>{new Date(e.zeitpunkt).toLocaleString("de-DE")}</td>
+                    <td>{e.benutzer_name ?? "System"}</td>
+                    <td>{e.ereignistyp}</td>
+                    <td>
+                      {e.entitaet_typ} <span className="text-muted">({e.entitaet_id.slice(0, 8)})</span>
+                    </td>
+                    <td>{formatWert(e.alter_wert)}</td>
+                    <td>{formatWert(e.neuer_wert)}</td>
+                    <td>{e.begruendung ?? "–"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}