Let the history say what an address was before

HR reported it from testing: change someone's address and their history
shows "Geänderte Felder: Adresse, Ort" — the new address is on the
Stammdaten tab, the old one is nowhere. It was recorded, but only in the
audit log, which is a different page sorted by time and actor rather
than by person. So you had to already know what you were looking for to
find out whether an address had ever changed, let alone what it used to
be.

The field-by-field diff was being built anyway and written to the audit
log. employee_history now carries the same list, and the person's
history renders it as an expandable Feld / Vorher / Nachher table — the
same table the audit log uses, lifted into a shared component so the two
views don't drift into reading differently. It expands with <details>,
so the values are in the page: findable with Ctrl+F, present when
printed, no script involved.

The duplication with audit_log is deliberate. A person's history should
be readable on its own, including after the log is eventually thinned by
a retention rule.

Rows written before today stay without values. They could only be
reconstructed from the audit log, and the link is not reliable — no key,
only a timestamp and a person. Honestly empty beats plausibly wrong.

The migration was generated from the live function definition rather
than retyped, and the diff is four lines: two column lists, two value
lists. It carries a self-check that raises if either insert failed to
pick up the new column, and it was rehearsed inside a rolled-back
transaction against real data first — the probe confirmed the old street
name lands in the history row.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

components/employees/tabs/HistorieTab.tsx

@@ -1,9 +1,22 @@
+import { AenderungsTabelle } from "@/components/ui/AenderungsTabelle";
 import { actionBadgeStyle } from "@/lib/colors";
 import { fmtDate, todayIso } from "@/lib/format";
 import type { Database } from "@/lib/supabase/types";
 
 type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
 
+// Die Geschichte einer Person — und zwar aufklappbar bis auf die Werte.
+//
+// Vorher stand hier nur „Geänderte Felder: Adresse, Ort". Damit liess sich
+// zwar sehen, *dass* jemand die Anschrift angefasst hat, aber nicht, was
+// vorher dort stand. Die alte Adresse lag allein im Protokoll, und das ist
+// eine andere Seite, nach Zeitpunkt sortiert statt nach Person — man hätte
+// also erst wissen müssen, wonach man sucht.
+//
+// Aufgeklappt wird mit <details>, nicht mit einem Zustand im Browser: die
+// Werte stehen dann schon in der Seite, sind durchsuchbar (Strg+F) und im
+// Ausdruck sichtbar, und es braucht kein Skript dafür.
+
 export function HistorieTab({ history }: { history: HistoryRow[] }) {
   const today = todayIso();
 
@@ -15,6 +28,7 @@ export function HistorieTab({ history }: { history: HistoryRow[] }) {
     <ul className="flex flex-col divide-y divide-border">
       {history.map((h) => {
         const isFuture = h.event_date > today;
+        const changes = h.changes ?? [];
         return (
           <li key={h.id} className="py-3">
             <div className="flex flex-wrap items-center gap-2">
@@ -27,6 +41,23 @@ export function HistorieTab({ history }: { history: HistoryRow[] }) {
               )}
             </div>
             <p className="mt-1 text-sm text-ink">{h.description}</p>
+
+            {changes.length > 0 && (
+              <details className="group mt-1.5">
+                <summary
+                  className="inline-flex cursor-pointer list-none items-center gap-1 rounded text-xs font-semibold text-brand-700
+                             hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
+                >
+                  <span className="transition-transform group-open:rotate-90" aria-hidden="true">
+                    ›
+                  </span>
+                  {changes.length} {changes.length === 1 ? "Feld" : "Felder"} im Detail
+                </summary>
+                <div className="mt-2 rounded border border-border bg-surface px-3 py-2">
+                  <AenderungsTabelle changes={changes} />
+                </div>
+              </details>
+            )}
           </li>
         );
       })}