Web: Dashboard-Karten wie HomeAssistant konfigurieren + Einkaufsliste je Lagerort

Karten-Optionen (Artikel, Lagerort, Zeitraum) sassen als einzelne Dropdowns im
Kartenkopf. Jetzt: deklaratives config-Schema je Kartenart und ein Zahnrad-Dialog
(KartenConfig) im Anordnen-Modus - der Kopf zeigt sonst nur noch Titel/Papierkorb.
Felder: product, location, zeitraum (erweiterbar: select, boolean). Werte bleiben
in props/tage, keine Migration.

Einkaufsliste-Karte laedt zusaetzlich shoppingByLocation und zeigt Gesamt + Bedarfe
je Lagerort. Ueber die Karten-Konfig waehlbarer Lagerort: leer = alle Orte, gesetzt
= Gesamt + nur dieser Ort.

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

web/src/dashboard/KartenConfig.jsx

@@ -0,0 +1,93 @@
+import Icon from "../components/Icon";
+import { ZEITRAEUME } from "./cards";
+import { locationOptions } from "../locationPath";
+
+/**
+ * Konfig-Dialog einer Karte – wie in HomeAssistant: ein eigener Dialog mit den
+ * Optionen der Karte, statt Dropdowns im Kartenkopf. Welche Felder erscheinen,
+ * bestimmt `karte.config`. Die Werte landen in den Karten-Props (bzw. `tage`
+ * beim Zeitraum) und werden mit dem Layout gespeichert.
+ */
+export default function KartenConfig({
+  karte, props: karteProps = {}, tage,
+  produkte = [], locations = [], onProps, onTage, onClose,
+}) {
+  const felder = karte?.config || [];
+
+  function feld(f) {
+    if (f.type === "product") {
+      return (
+        <label key={f.key}>
+          {f.label}
+          <select value={karteProps[f.key] ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value ? Number(e.target.value) : undefined })}>
+            <option value="">– Artikel wählen –</option>
+            {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "location") {
+      return (
+        <label key={f.key}>
+          {f.label}{f.hint ? <span className="muted small"> ({f.hint})</span> : null}
+          <select value={karteProps[f.key] ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value || undefined })}>
+            <option value="">– alle Orte –</option>
+            {locationOptions(locations).map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "zeitraum") {
+      return (
+        <label key="zeitraum">
+          {f.label}
+          <select value={tage ?? karte.zeitraum} onChange={(e) => onTage(Number(e.target.value))}>
+            {ZEITRAEUME.map((z) => <option key={z.tage} value={z.tage}>{z.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "select") {
+      return (
+        <label key={f.key}>
+          {f.label}
+          <select value={karteProps[f.key] ?? f.default ?? ""}
+            onChange={(e) => onProps({ [f.key]: e.target.value })}>
+            {(f.optionen || []).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+          </select>
+        </label>
+      );
+    }
+    if (f.type === "boolean") {
+      return (
+        <label key={f.key} className="check-inline">
+          <input type="checkbox" checked={karteProps[f.key] ?? f.default ?? false}
+            onChange={(e) => onProps({ [f.key]: e.target.checked })} />
+          <span>{f.label}</span>
+        </label>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && onClose()}>
+      <div className="modal" role="dialog" aria-modal="true">
+        <div className="modal-head">
+          <Icon name="settings" size={18} />
+          <h2>{karte?.titel} einstellen</h2>
+        </div>
+        <div className="modal-body" style={{ display: "grid", gap: "var(--sp-3)" }}>
+          {felder.length === 0
+            ? <p className="muted">Diese Karte hat keine Einstellungen.</p>
+            : felder.map(feld)}
+        </div>
+        <div className="btn-pair">
+          <button type="button" className="btn primary" onClick={onClose}>Fertig</button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/dashboard/cards.jsx

@@ -306,43 +306,74 @@ function KarteAblauf({ modus = "alle" }) {
   );
 }
 
-function KarteEinkaufsliste() {
+/**
+ * Einkaufsliste mit Gesamt-Bedarf UND Bedarf je Lagerort. Über die Karten-Konfig
+ * lässt sich ein Lagerort festlegen: leer = alle Orte, sonst nur dieser.
+ */
+function KarteEinkaufsliste({ props: karteProps }) {
+  const ortId = karteProps?.location_id || "";
   const { daten, fehler } = useDaten(async () => {
-    const [produkte, gruppen] = await Promise.all([api.shoppingList(), api.groupShoppingList()]);
-    return { produkte, gruppen };
+    const [produkte, gruppen, orte] = await Promise.all([
+      api.shoppingList(), api.groupShoppingList(), api.shoppingByLocation(),
+    ]);
+    return { produkte, gruppen, orte };
   });
 
   if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
   if (!daten) return <div className="empty">Lädt…</div>;
-  if (!daten.produkte.length && !daten.gruppen.length) {
-    return <div className="empty">Alle Mindestbestände erreicht.</div>;
-  }
 
-  return (
+  const orte = ortId ? daten.orte.filter((o) => o.location_id === ortId) : daten.orte;
+  const gesamtLeer = !daten.produkte.length && !daten.gruppen.length;
+  const orteLeer = orte.every((o) => !o.products.length && !o.groups.length);
+  if (gesamtLeer && orteLeer) return <div className="empty">Alle Mindestbestände erreicht.</div>;
+
+  // Ein Abschnitt (Gesamt oder ein Ort). Die Produkt-Formatierung kommt herein,
+  // weil Gesamt-Produkte Gebinde/Basiseinheit tragen, je-Ort-Bedarfe aber schon
+  // eine fertige Einheit (unit_label).
+  const abschnitt = (gruppen, produkte, prodWert) => (
     <div className="table-wrap">
       <table className="table">
-        <thead>
-          <tr><th>Bedarf</th><th className="num">Bestand</th><th className="num">Fehlt</th></tr>
-        </thead>
+        <thead><tr><th>Bedarf</th><th className="num">Bestand</th><th className="num">Fehlt</th></tr></thead>
         <tbody>
-          {daten.gruppen.map((it) => (
+          {gruppen.map((it) => (
             <tr key={`g${it.group_id}`}>
               <td data-label="Bedarf"><span className="badge accent">Gruppe</span> {it.name}</td>
               <td data-label="Bestand" className="num">{fmt(it.stock)} {it.unit_name}</td>
               <td data-label="Fehlt" className="num strong">{fmt(it.deficit)} {it.unit_name}</td>
             </tr>
           ))}
-          {daten.produkte.map((it) => (
+          {produkte.map((it) => (
             <tr key={`p${it.product_id}`}>
               <td data-label="Bedarf">{it.name}</td>
-              <td data-label="Bestand" className="num">{amountText(it.stock, it.package_size, it.base_unit)}</td>
-              <td data-label="Fehlt" className="num strong">{amountText(it.deficit, it.package_size, it.base_unit)}</td>
+              <td data-label="Bestand" className="num">{prodWert(it, "stock")}</td>
+              <td data-label="Fehlt" className="num strong">{prodWert(it, "deficit")}</td>
             </tr>
           ))}
         </tbody>
       </table>
     </div>
   );
+  const gesamtProd = (it, feld) => amountText(it[feld], it.package_size, it.base_unit);
+  const ortProd = (it, feld) => `${fmt(it[feld])} ${it.unit_label}`;
+
+  return (
+    <div className="card-stack">
+      {!gesamtLeer && (
+        <div>
+          <div className="muted small" style={{ marginBottom: "var(--sp-1)", fontWeight: 600 }}>Gesamt</div>
+          {abschnitt(daten.gruppen, daten.produkte, gesamtProd)}
+        </div>
+      )}
+      {orte.map((o) => ((o.products.length || o.groups.length) ? (
+        <div key={o.location_id}>
+          <div className="muted small" style={{ marginBottom: "var(--sp-1)", fontWeight: 600 }}>
+            <Icon name="location" size={13} /> {o.location_name}
+          </div>
+          {abschnitt(o.groups, o.products, ortProd)}
+        </div>
+      ) : null))}
+    </div>
+  );
 }
 
 const BEWEGUNG_LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" };
@@ -575,7 +606,7 @@ export const KARTEN = {
     titel: "Artikel im Blick", icon: "package", vorschau: "kennzahl",
     beschreibung: "Bestand eines festen Artikels – mehrfach verwendbar",
     standard: { w: 3, h: 3 }, min: { w: 2, h: 3 },
-    artikel: true,
+    config: [{ key: "product_id", type: "product", label: "Artikel" }],
     komponente: KarteArtikel,
   },
   status: {
@@ -618,6 +649,7 @@ export const KARTEN = {
     titel: "Einkaufsliste", icon: "cart", vorschau: "tabelle",
     beschreibung: "Produkte und Gruppen unter Mindestbestand",
     standard: { w: 6, h: 6 }, min: { w: 4, h: 4 },
+    config: [{ key: "location_id", type: "location", label: "Lagerort", hint: "leer = alle Orte" }],
     komponente: KarteEinkaufsliste,
   },
   movements: {
@@ -648,19 +680,24 @@ export const KARTEN = {
     titel: "Bestandsverlauf", icon: "history", vorschau: "linie",
     beschreibung: "Artikeleinheiten im Lager über 90 Tage",
     zeitraum: 90, standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
+    config: [{ type: "zeitraum", label: "Zeitraum" }],
     komponente: KarteBestandsverlauf,
   },
   "product-timeline": {
     titel: "Verlauf eines Artikels", icon: "package", vorschau: "linie",
     beschreibung: "Ein fester Artikel über die Zeit – mehrfach verwendbar",
     zeitraum: 90, standard: { w: 8, h: 7 }, min: { w: 4, h: 6 },
-    artikel: true,
+    config: [
+      { key: "product_id", type: "product", label: "Artikel" },
+      { type: "zeitraum", label: "Zeitraum" },
+    ],
     komponente: KarteArtikelverlauf,
   },
   "activity-timeline": {
     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 },
+    config: [{ type: "zeitraum", label: "Zeitraum" }],
     komponente: KarteBewegungsverlauf,
   },
 };