Web: Chargen-Seite faerbt Zeilen nach MHD (gelb = bald ablaufend, rot = abgelaufen)

Wiederverwendung von expiryRowClass + .row-warn/.row-danger wie auf der
Artikelseite. Warnfrist kommt aus der Einstellung expiry_warning_days (Default 7).
Die MHD-Faerbung bleibt auch bei ausgewaehlter/gehoverter Zeile sichtbar.

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

web/src/pages/Charges.jsx

@@ -8,7 +8,7 @@ import SplitLotDialog from "../components/SplitLotDialog";
 import { ProduktThumb } from "../components/ProduktBild";
 import { useSettings } from "../settings";
 import { locationOptions, locationPathById } from "../locationPath";
-import { fmt, gebinde, unitShort } from "../units";
+import { expiryRowClass, fmt, gebinde, unitShort } from "../units";
 
 // Artikeleinheit einer Charge (Gebinde, sonst Produkteinheit).
 const artFactor = (l) => (l.package_size && l.package_size > 0 ? l.package_size : (l.unit_factor || 1));
@@ -36,6 +36,7 @@ export default function Charges() {
   const [selected, setSelected] = useState(() => new Set());
   const [visible, setVisible] = useState([]);   // aktuell gefiltert sichtbare Chargen
   const [splitting, setSplitting] = useState(null);  // Charge, die gerade aufgeteilt wird
+  const [warnDays, setWarnDays] = useState(7);       // Warnfrist für „bald ablaufend"
 
   async function load() {
     setLoading(true);
@@ -50,6 +51,12 @@ export default function Charges() {
     }
   }
   useEffect(() => { load(); }, []);
+  // Warnfrist (Tage) für die gelbe „bald ablaufend"-Markierung – wie auf der Artikelseite.
+  useEffect(() => {
+    api.listSettings()
+      .then((s) => { const r = s.find((x) => x.key === "expiry_warning_days"); if (r) setWarnDays(parseInt(r.value, 10) || 7); })
+      .catch(() => {});
+  }, []);
 
   const ohneOrt = useMemo(() => lots.filter((l) => !l.location_id), [lots]);
 
@@ -191,7 +198,7 @@ export default function Charges() {
       <div className="card">
         <DataTable id="charges" columns={columns} rows={lots} loading={loading}
           onVisibleRows={setVisible}
-          rowClassName={(l) => (selected.has(l.id) ? "row-active" : "")}
+          rowClassName={(l) => [expiryRowClass(l.best_before, warnDays), selected.has(l.id) ? "row-active" : ""].filter(Boolean).join(" ")}
           onRowClick={(l, e) => {
             // Klicks auf Bedienelemente (Checkbox, Lagerort-Dropdown, Link) nicht
             // als Zeilenauswahl werten – überall sonst die Zeile umschalten.