Ein- und Auslagerungen als Wasserfall- bzw. Brueckendiagramm

Bisher waren es zwei Linien mit der Anzahl der Vorgaenge. Gemeint war eine
Bruecke: die Bestandslinie, und schwebende gruene/rote Balken, die jeden ihrer
Spruenge erklaeren.

Damit Balken und Linie ueberhaupt zusammen in ein Bild duerfen, zaehlen die
Balken jetzt Mengen in Artikeleinheiten statt Vorgaengen - beides liegt so auf
derselben Achse. Zwei Skalen in einem Diagramm bleiben ausgeschlossen.

Neuer Endpunkt GET /dashboard/flow liefert je Abschnitt Anfangsbestand, Zugang
und Abgang aus einer Abfrage. Getrennt abgefragt koennten die Abschnitte von
timeline und activity um eine Schrittweite auseinanderliegen - dann stuende ein
Balken neben dem Sprung, den er erklaert.

/dashboard/activity bleibt fuer externe Zugriffe erhalten.

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

web/src/dashboard/cards.jsx

@@ -9,6 +9,7 @@ import {
 import Bars from "./charts/Bars";
 import Donut from "./charts/Donut";
 import Line from "./charts/Line";
+import Wasserfall from "./charts/Wasserfall";
 import { istDunkel, mitFarben, tokenFarbe } from "./palette";
 
 /**
@@ -369,20 +370,21 @@ function KarteArtikelverlauf({ tage = 90 }) {
   );
 }
 
+/**
+ * Ein- und Auslagerungen als Brücke: die Bestandslinie plus die Balken, die
+ * jeden ihrer Sprünge erklären. Die Mengen kommen deshalb in Artikeleinheiten
+ * und nicht als Anzahl Vorgänge – sonst lägen Balken und Linie auf zwei Skalen.
+ */
 function KarteBewegungsverlauf({ tage = 30 }) {
-  const { daten, fehler } = useDaten(() => api.dashboardActivity(tage), [tage]);
+  const { daten, fehler } = useDaten(() => api.dashboardFlow(tage), [tage]);
 
   if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
   if (!daten) return <div className="empty">Lädt…</div>;
 
   return (
-    <Line
-      labels={daten.map((p) => zeitLabel(p.at, tage))}
-      serien={[
-        { name: "Eingelagert", color: tokenFarbe("--ok", "#2e7d55"), werte: daten.map((p) => p.checked_in) },
-        { name: "Ausgelagert", color: tokenFarbe("--warn", "#b06f14"), werte: daten.map((p) => p.checked_out) },
-      ]}
-      einheit="Vorgänge"
+    <Wasserfall
+      abschnitte={daten.map((p) => ({ ...p, label: zeitLabel(p.at, tage) }))}
+      einheit="Einheiten"
     />
   );
 }
@@ -482,9 +484,9 @@ export const KARTEN = {
     komponente: KarteArtikelverlauf,
   },
   "activity-timeline": {
-    titel: "Ein- und Auslagerungen", icon: "history", vorschau: "linien",
-    beschreibung: "Vorgänge je Tag über 30 Tage",
-    zeitraum: 30, standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
+    titel: "Ein- und Auslagerungen", icon: "history", vorschau: "wasserfall",
+    beschreibung: "Brücke: Bestandslinie mit grünen und roten Balken je Bewegung",
+    zeitraum: 30, standard: { w: 8, h: 6 }, min: { w: 5, h: 5 },
     komponente: KarteBewegungsverlauf,
   },
 };