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

frontend/src/api/types.ts

@@ -105,6 +105,19 @@ export interface Fach {
   sortierung: number;
 }
 
+export interface HistorieEintrag {
+  id: string;
+  zeitpunkt: string;
+  benutzer_id: number | null;
+  benutzer_name: string | null;
+  ereignistyp: string;
+  entitaet_typ: string;
+  entitaet_id: string;
+  alter_wert: Record<string, unknown> | null;
+  neuer_wert: Record<string, unknown> | null;
+  begruendung: string | null;
+}
+
 export interface Me {
   id: number;
   name: string;

frontend/src/pages/AdminPage.tsx

@@ -5,6 +5,7 @@ import type { Benutzer, Bereich, Beladungsvorlage, Fach, Kategorie, Material, Ob
 import { BenutzerSection } from "./admin/BenutzerSection";
 import { BereichSection } from "./admin/BereichSection";
 import { FachSection } from "./admin/FachSection";
+import { HistorieSection } from "./admin/HistorieSection";
 import { KategorieSection } from "./admin/KategorieSection";
 import { MaterialSection } from "./admin/MaterialSection";
 import { ObjektSection } from "./admin/ObjektSection";
@@ -12,7 +13,7 @@ import { ObjekttypSection } from "./admin/ObjekttypSection";
 import { StandortSection } from "./admin/StandortSection";
 import { VorlageSection } from "./admin/VorlageSection";
 
-type Tab = "objekte" | "vorlagen" | "material" | "struktur" | "standorte" | "benutzer";
+type Tab = "objekte" | "vorlagen" | "material" | "struktur" | "standorte" | "benutzer" | "historie";
 
 const TABS: { key: Tab; label: string }[] = [
   { key: "objekte", label: "Objekte" },
@@ -21,6 +22,7 @@ const TABS: { key: Tab; label: string }[] = [
   { key: "struktur", label: "Struktur" },
   { key: "standorte", label: "Standorte" },
   { key: "benutzer", label: "Benutzer" },
+  { key: "historie", label: "Änderungslog" },
 ];
 
 /**
@@ -153,6 +155,7 @@ export function AdminPage() {
       {tab === "benutzer" && (
         <BenutzerSection benutzer={benutzer} onGeaendert={ladeAlles} onFehler={setFehler} />
       )}
+      {tab === "historie" && <HistorieSection onFehler={setFehler} />}
     </main>
   );
 }

frontend/src/pages/admin/HistorieSection.tsx

@@ -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>
+  );
+}

frontend/src/styles/global.css

@@ -345,3 +345,22 @@ select.input:focus {
   border-radius: 0.5rem;
   background: #000;
 }
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.table th,
+.table td {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+  white-space: nowrap;
+}
+
+.table th {
+  font-weight: 600;
+  color: var(--color-text-muted, #64748b);
+}