Datumsformat konfigurierbar (Einstellungen -> Darstellung)

MHD wurde in den Ansichten noch roh als YYYY-MM-DD ausgegeben. Jetzt:
- Neue Einstellung date_format (23.12.2026 | 23.12.26 | 23. Dezember 2026 |
  2026-12-23 | 12/23/2026) mit Live-Beispiel auf der Einstellungsseite.
- SettingsProvider stellt Format und formatDate() app-weit bereit und laedt die
  Einstellungen nach dem Login.
- Verwendet in Uebersicht (bald ablaufend), Produktdetail (Chargen) und
  Auslagern (Chargenauswahl). Datumsfelder zur Eingabe bleiben ISO, wie es das
  HTML-Datumsfeld verlangt.

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

web/src/pages/Settings.jsx

@@ -1,11 +1,15 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import { DATE_FORMAT_KEY, useSettings } from "../settings";
+import { DATE_FORMATS, formatDate } from "../units";
 
 const EXPIRY_KEY = "expiry_warning_days";
 
 export default function Settings() {
+  const { reload } = useSettings();
   const [days, setDays] = useState("");
+  const [dateFormat, setDateFormat] = useState("de");
   const [error, setError] = useState(null);
   const [info, setInfo] = useState(null);
   const [busy, setBusy] = useState(false);
@@ -13,8 +17,8 @@ export default function Settings() {
   async function load() {
     try {
       const settings = await api.listSettings();
-      const row = settings.find((s) => s.key === EXPIRY_KEY);
-      setDays(row ? row.value : "7");
+      setDays(settings.find((s) => s.key === EXPIRY_KEY)?.value ?? "7");
+      setDateFormat(settings.find((s) => s.key === DATE_FORMAT_KEY)?.value ?? "de");
     } catch (err) {
       setError(err.message);
     }
@@ -27,6 +31,8 @@ export default function Settings() {
     setError(null); setInfo(null); setBusy(true);
     try {
       await api.setSetting(EXPIRY_KEY, String(parseInt(days, 10)));
+      await api.setSetting(DATE_FORMAT_KEY, dateFormat);
+      await reload();
       setInfo("Gespeichert.");
     } catch (err) {
       setError(err.message);
@@ -35,6 +41,9 @@ export default function Settings() {
     }
   }
 
+  // Beispiel mit einem festen Datum, damit man die Wirkung sofort sieht.
+  const preview = formatDate("2026-12-23", dateFormat);
+
   return (
     <div>
       <div className="page-head">
@@ -57,6 +66,20 @@ export default function Settings() {
           Chargen, deren Mindesthaltbarkeitsdatum innerhalb dieser Frist liegt (oder
           bereits überschritten ist), erscheinen auf der Übersicht unter „Bald ablaufend".
         </p>
+
+        <div className="card-head" style={{ marginTop: "var(--sp-5)" }}>
+          <Icon name="settings" /><h2>Darstellung</h2>
+        </div>
+        <label>
+          Datumsformat
+          <select value={dateFormat} onChange={(e) => setDateFormat(e.target.value)}>
+            {DATE_FORMATS.map((f) => (
+              <option key={f.value} value={f.value}>{f.label}</option>
+            ))}
+          </select>
+        </label>
+        <p className="muted small mt-0">Beispiel: {preview}</p>
+
         <button className="btn primary" disabled={busy}>{busy ? "Speichern…" : "Speichern"}</button>
       </form>
     </div>