From d993a487118c42f2fef4a144dd2379b6ae14ab20 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sun, 26 Jul 2026 21:46:18 +0200
Subject: [PATCH] =?UTF-8?q?Web:=20"Ablauf-Anteile"=20=E2=80=93=20"Ohne=20M?=
 =?UTF-8?q?HD"=20ein-/ausblendbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Ablauf-Ring-Karte bekommt einen Umschalter, ob der Anteil "Ohne MHD"
(Gegenstaende/undatierte Chargen) mitgezaehlt wird. Aus zeigt der Ring nur
In Ordnung/Bald/Abgelaufen mit entsprechend neu berechneten Prozenten. Die Wahl
wird in localStorage gemerkt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/dashboard/cards.jsx | 23 +++++++++++++++++++++--
 web/src/styles.css          |  3 +++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx
index 7d188cb..5226356 100644
--- a/web/src/dashboard/cards.jsx
+++ b/web/src/dashboard/cards.jsx
@@ -380,6 +380,14 @@ function KarteBewegungen() {
 // ---------------------------------------------------------------- Diagramme
 function KarteAblaufRing() {
   const { daten, fehler } = useDaten(() => api.dashboardExpirySplit());
+  // Ob „Ohne MHD" (Gegenstände/undatierte Chargen) mitgezählt wird – gemerkt.
+  const [mitOhneMhd, setMitOhneMhd] = useState(
+    () => localStorage.getItem("ablauf_mit_ohne_mhd") !== "0",
+  );
+  function umschalten(on) {
+    setMitOhneMhd(on);
+    localStorage.setItem("ablauf_mit_ohne_mhd", on ? "1" : "0");
+  }
   if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
   if (!daten) return <div className="empty">Lädt…</div>;
 
@@ -388,9 +396,20 @@ function KarteAblaufRing() {
     { name: "In Ordnung", value: daten.ok, color: tokenFarbe("--ok", "#2e7d55") },
     { name: "Bald ablaufend", value: daten.soon, color: tokenFarbe("--warn", "#b06f14") },
     { name: "Abgelaufen", value: daten.expired, color: tokenFarbe("--danger", "#c0392b") },
-    { name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") },
   ];
-  return <Donut segmente={segmente} gesamtLabel="Einheiten" />;
+  if (mitOhneMhd) {
+    segmente.push({ name: "Ohne MHD", value: daten.no_date, color: tokenFarbe("--muted", "#6b7480") });
+  }
+  return (
+    <div className="ring-mit-schalter">
+      <label className="check-inline ring-schalter">
+        <input type="checkbox" checked={mitOhneMhd}
+          onChange={(e) => umschalten(e.target.checked)} />
+        <span>„Ohne MHD" einbeziehen</span>
+      </label>
+      <Donut segmente={segmente} gesamtLabel="Einheiten" />
+    </div>
+  );
 }
 
 function KarteKategorienRing() {
diff --git a/web/src/styles.css b/web/src/styles.css
index 384ac50..8a7bf3a 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -674,6 +674,9 @@ select.zeitraum:hover { color: var(--text); }
   gap: var(--sp-4); flex-wrap: wrap;
   flex: 1; min-height: 0;
 }
+/* Ablauf-Ring mit „Ohne MHD"-Umschalter darueber; der Ring fuellt den Rest. */
+.ring-mit-schalter { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.ring-schalter { flex: 0 0 auto; justify-content: flex-end; margin: 0 0 4px; font-size: 0.78rem; color: var(--muted); }
 .donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
 .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
 .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }