Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Einlagern-UX: 3-Wege-Barcode, Inline-Anlage aus OFF, Mehr-Chargen mit MHD

Browse Source 
Einlagern:
- Barcode-Erkennung dreiteilig: bekannt -> direkt Menge; unbekannt aber in OFF
  -> "Anlegen & einlagern" inline; gar nicht gefunden -> manuell anlegen.
- Mehrere Chargen pro Vorgang: je Zeile eigene Menge + eigenes MHD
  (z.B. 5 Glaeser mit unterschiedlichen Daten). Neuer Endpoint /stock/checkin/batch.

Produkte/OFF:
- OFF-Fuellmenge (quantity) wird in Basiseinheit + Packungsgroesse geparst
  (kg->g, l->ml, cl/dl); parse_quantity + Tests.
- Produktformular uebernimmt Barcode aus ?barcode= und schlaegt automatisch nach,
  fuellt Packungsgroesse; gemeinsame offUtils (guessGroup/suggestionToProduct).

Lagerorte:
- Baum jetzt rekursiv ueber beliebig viele Ebenen (Schrank->Fach->Kiste->...).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-22 10:40:54 +02:00
parent b683f2d93b
commit 4c17705290
10 changed files with 368 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
backend/app/off.py
View File

@@ -3,6 +3,7 @@
from __future__ import annotations
import json
import re
import httpx
@@ -10,17 +11,35 @@ from .config import get_settings
settings = get_settings()
# Faktoren, um eine Einheit in die Basiseinheit (Gramm bzw. Milliliter) umzurechnen.
_UNIT_TO_BASE: dict[str, tuple[str, float]] = {
"kg": ("gram", 1000.0),
"g": ("gram", 1.0),
"mg": ("gram", 0.001),
"l": ("milliliter", 1000.0),
"dl": ("milliliter", 100.0),
"cl": ("milliliter", 10.0),
"ml": ("milliliter", 1.0),
}
def _guess_base_unit(quantity: str | None) -> str:
"""Rät die Basiseinheit aus dem OFF-Feld 'quantity' (z.B. '500 g', '1 l')."""
_QUANTITY_RE = re.compile(r"([\d]+(?:[.,]\d+)?)\s*(kg|mg|g|dl|cl|ml|l)\b", re.IGNORECASE)
def parse_quantity(quantity: str | None) -> tuple[str, float | None]:
"""Ermittelt Basiseinheit und Packungsgröße aus dem OFF-Feld 'quantity'.
Beispiele: '500 g' -> ('gram', 500), '1 kg' -> ('gram', 1000),
'1,5 l' -> ('milliliter', 1500), '6 Stück' -> ('piece', None).
"""
if not quantity:
return "piece"
q = quantity.lower()
if "ml" in q or "cl" in q or "l" in q or "liter" in q:
return "milliliter"
if "kg" in q or " g" in q or "gramm" in q or q.strip().endswith("g"):
return "gram"
return "piece"
return "piece", None
match = _QUANTITY_RE.search(quantity)
if not match:
return "piece", None
amount = float(match.group(1).replace(",", "."))
base_unit, factor = _UNIT_TO_BASE[match.group(2).lower()]
package_size = round(amount * factor, 3)
return base_unit, (package_size if package_size > 0 else None)
def lookup_barcode(barcode: str) -> dict | None:
@@ -65,12 +84,15 @@ def lookup_barcode(barcode: str) -> dict | None:
categories = product.get("categories") or ""
category_tags = product.get("categories_tags") or []
base_unit, package_size = parse_quantity(product.get("quantity"))
return {
"barcode": barcode,
"name": name,
"brand": (product.get("brands") or "").strip() or None,
"image_url": product.get("image_front_url") or product.get("image_url") or None,
"base_unit": _guess_base_unit(product.get("quantity")),
"base_unit": base_unit,
"package_size": package_size,
"quantity_text": product.get("quantity"),
"category_suggestion": categories.split(",")[0].strip() if categories else None,
"category_tags": category_tags,

41
backend/app/routers/stock.py
View File

@@ -6,6 +6,8 @@ from ..database import get_db
from ..deps import get_current_user
from ..models import Lot, User
from ..schemas import (
BatchCheckInRequest,
BatchCheckInResponse,
CheckInRequest,
CheckInResponse,
CheckOutRequest,
@@ -45,6 +47,45 @@ def stock_checkin(
)
@router.post("/stock/checkin/batch", response_model=BatchCheckInResponse)
def stock_checkin_batch(
payload: BatchCheckInRequest,
db: Session = Depends(get_db),
user: User = Depends(get_current_user),
) -> BatchCheckInResponse:
"""Mehrere Chargen desselben Produkts in einem Vorgang einlagern.
Jede Zeile erzeugt eine eigene Charge mit eigener Menge und eigenem MHD –
z.B. 5 Gläser mit unterschiedlichen Mindesthaltbarkeitsdaten.
"""
product = resolve_product(db, payload.product_id, payload.barcode)
lots: list[Lot] = []
try:
for line in payload.lines:
lots.append(
check_in(
db,
product=product,
quantity=line.quantity,
unit=payload.unit,
best_before=line.best_before,
location_id=line.location_id,
user=user,
note=payload.note,
)
)
except UnitError as exc:
db.rollback()
raise HTTPException(status.HTTP_400_BAD_REQUEST, str(exc)) from exc
db.commit()
for lot in lots:
db.refresh(lot)
return BatchCheckInResponse(
lots=[LotOut.model_validate(lot) for lot in lots],
product_stock=current_stock(db, product.id),
)
@router.post("/stock/checkout", response_model=CheckOutResponse)
def stock_checkout(
payload: CheckOutRequest,

20
backend/app/schemas.py
View File

@@ -152,6 +152,26 @@ class CheckInResponse(BaseModel):
product_stock: float
class CheckInLine(BaseModel):
"""Eine Charge innerhalb eines Sammel-Einlagerns (Menge + eigenes MHD)."""
quantity: float = Field(gt=0)
best_before: date | None = None
location_id: int | None = None
class BatchCheckInRequest(BaseModel):
product_id: int | None = None
barcode: str | None = None
unit: str
lines: list[CheckInLine] = Field(min_length=1)
note: str | None = None
class BatchCheckInResponse(BaseModel):
lots: list[LotOut]
product_stock: float
class CheckOutResponse(BaseModel):
affected_lots: list[dict]
product_stock: float

24
backend/tests/test_off.py Normal file
View File

@@ -0,0 +1,24 @@
from app.off import parse_quantity
def test_grams():
assert parse_quantity("500 g") == ("gram", 500)
assert parse_quantity("500g") == ("gram", 500)
def test_kilograms_to_grams():
assert parse_quantity("1 kg") == ("gram", 1000)
assert parse_quantity("1,5 kg") == ("gram", 1500)
def test_liters_to_milliliters():
assert parse_quantity("1 l") == ("milliliter", 1000)
assert parse_quantity("0,5 l") == ("milliliter", 500)
assert parse_quantity("33 cl") == ("milliliter", 330)
assert parse_quantity("330 ml") == ("milliliter", 330)
def test_unparsable_is_piece():
assert parse_quantity(None) == ("piece", None)
assert parse_quantity("6 Stück") == ("piece", None)
assert parse_quantity("") == ("piece", None)

1
web/src/api.js
View File

@@ -84,6 +84,7 @@ export const api = {
// Bestand
checkIn: (body) => request("/stock/checkin", { method: "POST", body }),
checkInBatch: (body) => request("/stock/checkin/batch", { method: "POST", body }),
checkOut: (body) => request("/stock/checkout", { method: "POST", body }),
listLots: (productId) =>
request(`/lots${productId ? `?product_id=${productId}` : ""}`),

27
web/src/offUtils.js Normal file
View File

@@ -0,0 +1,27 @@
// Gemeinsame Helfer rund um Open-Food-Facts-Vorschläge.
// Versucht, aus einem OFF-Kategorietext eine vorhandene Gruppe zu erraten.
export function guessGroup(groups, suggestion) {
if (!suggestion) return "";
const haystack = [
suggestion.category_suggestion || "",
...(suggestion.category_tags || []),
suggestion.name || "",
].join(" ").toLowerCase();
const hit = groups.find((g) => haystack.includes(g.name.toLowerCase()));
return hit ? String(hit.id) : "";
}
// Baut aus einem OFF-Vorschlag ein Produkt-Anlage-Payload.
export function suggestionToProduct(s, groupId = "") {
return {
barcode: s.barcode || null,
name: s.name,
brand: s.brand || null,
image_url: s.image_url || null,
base_unit: s.base_unit || "piece",
package_size: s.package_size ?? null,
min_stock: null,
group_id: groupId === "" || groupId == null ? null : Number(groupId),
};
}

164
web/src/pages/CheckIn.jsx
View File

@@ -3,45 +3,59 @@ import { Link } from "react-router-dom";
import { api } from "../api";
import { useAuth } from "../auth";
import Icon from "../components/Icon";
import { guessGroup, suggestionToProduct } from "../offUtils";
import { fmt, unitOptions, unitShort } from "../units";
const emptyLine = () => ({ quantity: "", best_before: "" });
export default function CheckIn() {
const { isAdmin } = useAuth();
const [barcode, setBarcode] = useState("");
const [product, setProduct] = useState(null);
const [suggestion, setSuggestion] = useState(null);
const [unknownBarcode, setUnknownBarcode] = useState(null);
const [results, setResults] = useState([]);
const [search, setSearch] = useState("");
const [locations, setLocations] = useState([]);
const [groups, setGroups] = useState([]);
const [quantity, setQuantity] = useState("");
const [unit, setUnit] = useState("");
const [bestBefore, setBestBefore] = useState("");
const [locationId, setLocationId] = useState("");
const [lines, setLines] = useState([emptyLine()]);
const [error, setError] = useState(null);
const [info, setInfo] = useState(null);
const [unknownBarcode, setUnknownBarcode] = useState(null);
const [busy, setBusy] = useState(false);
useEffect(() => {
api.listLocations().then(setLocations).catch(() => {});
api.listGroups().then(setGroups).catch(() => {});
}, []);
function resetLookup() {
setSuggestion(null);
setUnknownBarcode(null);
}
function selectProduct(p) {
setProduct(p);
setResults([]);
setUnknownBarcode(null);
resetLookup();
setUnit(unitOptions(p)[0].value);
setLines([emptyLine()]);
setLocationId("");
}
async function doLookup() {
setError(null); setInfo(null); setUnknownBarcode(null);
setError(null); setInfo(null); resetLookup();
if (!barcode) return;
try {
const res = await api.lookup(barcode.trim());
if (res.found && res.existing_product) {
selectProduct(res.existing_product);
setInfo(`Produkt erkannt: ${res.existing_product.name}`);
} else if (res.found && res.suggestion) {
setSuggestion(res.suggestion);
} else {
setUnknownBarcode(barcode.trim());
}
@@ -50,6 +64,20 @@ export default function CheckIn() {
}
}
async function createFromSuggestion() {
setError(null); setBusy(true);
try {
const payload = suggestionToProduct(suggestion, guessGroup(groups, suggestion));
const created = await api.createProduct(payload);
selectProduct(created);
setInfo(`Produkt "${created.name}" angelegt.`);
} catch (err) {
setError(err.message);
} finally {
setBusy(false);
}
}
async function doSearch(e) {
e.preventDefault();
try {
@@ -59,20 +87,40 @@ export default function CheckIn() {
}
}
function setLine(i, key, value) {
setLines((ls) => ls.map((l, idx) => (idx === i ? { ...l, [key]: value } : l)));
}
function addLine() {
setLines((ls) => [...ls, emptyLine()]);
}
function removeLine(i) {
setLines((ls) => (ls.length > 1 ? ls.filter((_, idx) => idx !== i) : ls));
}
const totalQty = lines.reduce((s, l) => s + (Number(l.quantity) || 0), 0);
async function submit(e) {
e.preventDefault();
setError(null); setInfo(null); setBusy(true);
try {
const res = await api.checkIn({
product_id: product.id,
quantity: Number(quantity),
unit,
best_before: bestBefore || null,
setError(null); setInfo(null);
const payloadLines = lines
.filter((l) => Number(l.quantity) > 0)
.map((l) => ({
quantity: Number(l.quantity),
best_before: l.best_before || null,
location_id: locationId === "" ? null : Number(locationId),
});
setInfo(`Eingelagert. Neuer Bestand: ${fmt(res.product_stock)} ${unitShort(product.base_unit)}`);
setQuantity("");
setBestBefore("");
}));
if (payloadLines.length === 0) {
setError("Bitte mindestens eine Menge angeben.");
return;
}
setBusy(true);
try {
const res = await api.checkInBatch({ product_id: product.id, unit, lines: payloadLines });
setInfo(
`${payloadLines.length} Charge(n) eingelagert. Neuer Bestand: ` +
`${fmt(res.product_stock)} ${unitShort(product.base_unit)}`
);
setLines([emptyLine()]);
setProduct(await api.getProduct(product.id));
} catch (err) {
setError(err.message);
@@ -99,18 +147,44 @@ export default function CheckIn() {
</label>
<button className="btn primary" onClick={doLookup}>Suchen</button>
</div>
{suggestion && (
<div className="suggestion">
{suggestion.image_url
? <img className="thumb" src={suggestion.image_url} alt="" />
: <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
<div className="info">
<div className="title">{suggestion.name}</div>
<div className="muted small">
{suggestion.brand ? `${suggestion.brand} · ` : ""}auf Open Food Facts gefunden
{suggestion.quantity_text ? ` · ${suggestion.quantity_text}` : ""}
</div>
<div className="muted small">Noch nicht im Katalog.</div>
</div>
{isAdmin ? (
<button className="btn primary" onClick={createFromSuggestion} disabled={busy}>
<Icon name="plus" size={16} />{busy ? "…" : "Anlegen & einlagern"}
</button>
) : (
<span className="muted small">Ein Administrator muss es anlegen.</span>
)}
</div>
)}
{unknownBarcode && (
<div className="alert warn" style={{ marginTop: "var(--sp-3)" }}>
<Icon name="alert" size={16} />
<span>
Barcode <strong>{unknownBarcode}</strong> ist unbekannt.{" "}
Barcode <strong>{unknownBarcode}</strong> ist weder im Katalog noch bei
Open Food Facts.{" "}
{isAdmin
? <Link to="/products/new">Produkt anlegen</Link>
: "Bitte einen Administrator bitten, das Produkt anzulegen."}
? <Link to={`/products/new?barcode=${encodeURIComponent(unknownBarcode)}`}>Manuell anlegen</Link>
: "Bitte einen Administrator bitten, es anzulegen."}
</span>
</div>
)}
</div>
<div className="card">
<div className="card-head"><Icon name="package" /><h2>Aus Produktliste</h2></div>
<form className="field-inline" onSubmit={doSearch}>
@@ -146,23 +220,12 @@ export default function CheckIn() {
</div>
<div className="row">
<label className="grow">
Menge
<input type="number" step="any" min="0" value={quantity} required
onChange={(e) => setQuantity(e.target.value)} autoFocus />
</label>
<label className="grow">
Einheit
<select value={unit} onChange={(e) => setUnit(e.target.value)}>
{unitOptions(product).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
</select>
</label>
</div>
<div className="row">
<label className="grow">
Mindesthaltbarkeit (optional)
<input type="date" value={bestBefore} onChange={(e) => setBestBefore(e.target.value)} />
</label>
<label className="grow">
Lagerort (optional)
<select value={locationId} onChange={(e) => setLocationId(e.target.value)}>
@@ -171,7 +234,46 @@ export default function CheckIn() {
</select>
</label>
</div>
<button className="btn primary" disabled={busy}><Icon name="checkin" size={16} />{busy ? "…" : "Einlagern"}</button>
<div className="lines">
<div className="lines-head">
<span>Chargen</span>
<span className="muted small">je Charge ein eigenes MHD</span>
</div>
{lines.map((line, i) => (
<div className="line" key={i}>
<label className="grow" style={{ margin: 0 }}>
{i === 0 && <span className="line-label">Menge</span>}
<input type="number" step="any" min="0" placeholder="Menge"
value={line.quantity} onChange={(e) => setLine(i, "quantity", e.target.value)}
autoFocus={i === 0} />
</label>
<label className="grow" style={{ margin: 0 }}>
{i === 0 && <span className="line-label">MHD (optional)</span>}
<input type="date" value={line.best_before}
onChange={(e) => setLine(i, "best_before", e.target.value)} />
</label>
<button type="button" className="btn-icon danger" title="Charge entfernen"
onClick={() => removeLine(i)} disabled={lines.length === 1}>
<Icon name="trash" size={16} />
</button>
</div>
))}
<button type="button" className="btn sm" onClick={addLine}>
<Icon name="plus" size={14} />Weitere Charge (anderes MHD)
</button>
</div>
<div className="field-inline" style={{ marginTop: "var(--sp-4)" }}>
<button className="btn primary" disabled={busy}>
<Icon name="checkin" size={16} />{busy ? "…" : "Einlagern"}
</button>
{totalQty > 0 && (
<span className="muted small">Summe: {fmt(totalQty)} {
unitOptions(product).find((o) => o.value === unit)?.label || ""
}</span>
)}
</div>
</form>
)}
</div>

19
web/src/pages/Locations.jsx
View File

@@ -42,13 +42,19 @@ export default function Locations() {
}
const nameById = Object.fromEntries(locations.map((l) => [l.id, l.name]));
const roots = locations.filter((l) => !l.parent_id || !nameById[l.parent_id]);
const childrenOf = (pid) => locations.filter((l) => l.parent_id === pid);
const ids = new Set(locations.map((l) => l.id));
const isRoot = (l) => !l.parent_id || !ids.has(l.parent_id);
// Rekursiv über beliebig viele Ebenen (Schrank -> Fach -> Kiste -> …).
const ordered = [];
for (const r of roots) {
ordered.push({ ...r, depth: 0 });
for (const c of childrenOf(r.id)) ordered.push({ ...c, depth: 1 });
const seen = new Set();
function walk(node, depth) {
if (seen.has(node.id)) return; // Schutz vor Zyklen
seen.add(node.id);
ordered.push({ ...node, depth });
for (const c of locations.filter((l) => l.parent_id === node.id)) walk(c, depth + 1);
}
for (const r of locations.filter(isRoot)) walk(r, 0);
return (
<div>
@@ -86,7 +92,8 @@ export default function Locations() {
<ul className="simple-list">
{ordered.map((l) => (
<li key={l.id}>
<span className={l.depth ? "tree-child" : ""} style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: l.depth * 22 }}>
{l.depth > 0 && <span className="muted">↳</span>}
<Icon name="location" size={15} className="muted" />
{l.name}
{l.depth > 0 && l.parent_id && nameById[l.parent_id] && (

119
web/src/pages/ProductForm.jsx
View File

@@ -1,8 +1,9 @@
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { api } from "../api";
import { useAuth } from "../auth";
import Icon from "../components/Icon";
import { guessGroup } from "../offUtils";
import { BASE_UNITS, fmt, unitShort } from "../units";
const EMPTY = {
@@ -10,25 +11,12 @@ const EMPTY = {
base_unit: "piece", package_size: "", min_stock: "", group_id: "",
};
// Versucht, aus einem OFF-Kategorietext eine vorhandene Gruppe zu erraten.
function guessGroup(groups, suggestion) {
if (!suggestion) return "";
const haystack = [
suggestion.category_suggestion || "",
...(suggestion.category_tags || []),
suggestion.name || "",
]
.join(" ")
.toLowerCase();
const hit = groups.find((g) => haystack.includes(g.name.toLowerCase()));
return hit ? String(hit.id) : "";
}
export default function ProductForm() {
const { id } = useParams();
const isNew = !id;
const { isAdmin } = useAuth();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [form, setForm] = useState(EMPTY);
const [product, setProduct] = useState(null);
@@ -38,10 +26,53 @@ export default function ProductForm() {
const [info, setInfo] = useState(null);
const [busy, setBusy] = useState(false);
function set(k, v) {
setForm((f) => ({ ...f, [k]: v }));
}
function applySuggestion(s, groupsList) {
const groupGuess = guessGroup(groupsList, s);
setForm((f) => ({
...f,
barcode: s.barcode || f.barcode,
name: s.name || f.name,
brand: s.brand || f.brand,
image_url: s.image_url || f.image_url,
base_unit: s.base_unit || f.base_unit,
package_size: s.package_size != null ? String(s.package_size) : f.package_size,
group_id: f.group_id || groupGuess,
}));
setInfo(
"Daten von Open Food Facts übernommen." +
(s.package_size != null ? "" : " (Füllmenge nicht hinterlegt – bitte Packungsgröße prüfen.)") +
(groupGuess ? " Passende Gruppe vorgeschlagen." : "")
);
}
async function runLookup(code, groupsList) {
if (!code) return;
setError(null);
setInfo(null);
try {
const res = await api.lookup(code.trim());
if (res.found && res.existing_product) {
setInfo("Dieses Produkt existiert bereits.");
navigate(`/products/${res.existing_product.id}`);
} else if (res.found && res.suggestion) {
applySuggestion(res.suggestion, groupsList);
} else {
setInfo("Barcode unbekannt – bitte Daten selbst eingeben.");
}
} catch (err) {
setError(err.message);
}
}
useEffect(() => {
async function load() {
try {
setGroups(await api.listGroups());
const gs = await api.listGroups();
setGroups(gs);
if (!isNew) {
const p = await api.getProduct(id);
setProduct(p);
@@ -52,6 +83,12 @@ export default function ProductForm() {
group_id: p.group_id ?? "",
});
setLots(await api.listLots(id));
} else {
const bc = searchParams.get("barcode");
if (bc) {
set("barcode", bc);
await runLookup(bc, gs);
}
}
} catch (err) {
setError(err.message);
@@ -61,42 +98,6 @@ export default function ProductForm() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id]);
function set(k, v) {
setForm((f) => ({ ...f, [k]: v }));
}
async function lookup() {
if (!form.barcode) return;
setError(null);
setInfo(null);
try {
const res = await api.lookup(form.barcode);
if (res.found && res.existing_product) {
setInfo("Dieses Produkt existiert bereits.");
navigate(`/products/${res.existing_product.id}`);
} else if (res.found && res.suggestion) {
const s = res.suggestion;
const groupGuess = guessGroup(groups, s);
setForm((f) => ({
...f,
name: s.name || f.name,
brand: s.brand || f.brand,
image_url: s.image_url || f.image_url,
base_unit: s.base_unit || f.base_unit,
group_id: f.group_id || groupGuess,
}));
setInfo(
"Daten von Open Food Facts übernommen." +
(groupGuess ? " Passende Gruppe vorgeschlagen." : "")
);
} else {
setInfo("Barcode unbekannt – bitte Daten selbst eingeben.");
}
} catch (err) {
setError(err.message);
}
}
function buildPayload() {
return {
barcode: form.barcode || null,
@@ -141,15 +142,16 @@ export default function ProductForm() {
}
const readOnly = !isAdmin;
const unitLabel = unitShort(form.base_unit);
return (
<div>
<div className="page-head">
<div>
<h1>{isNew ? "Neues Produkt" : form.name || "Produkt"}</h1>
{!isNew && <div className="sub">Bestand: {fmt(product?.stock)} {unitShort(form.base_unit)}</div>}
{!isNew && <div className="sub">Bestand: {fmt(product?.stock)} {unitLabel}</div>}
</div>
<button className="btn ghost" onClick={() => navigate("/products")}>Zurück</button>
<button className="btn ghost" onClick={() => navigate(-1)}>Zurück</button>
</div>
{error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
@@ -163,7 +165,7 @@ export default function ProductForm() {
<input value={form.barcode} onChange={(e) => set("barcode", e.target.value)} disabled={readOnly} />
</label>
{isAdmin && (
<button type="button" className="btn" onClick={lookup}>
<button type="button" className="btn" onClick={() => runLookup(form.barcode, groups)}>
<Icon name="search" size={16} />Nachschlagen
</button>
)}
@@ -184,9 +186,10 @@ export default function ProductForm() {
</select>
</label>
<label className="grow">
Packungsgröße
Packungsgröße{unitLabel !== "Stk" ? ` (in ${unitLabel})` : ""}
<input type="number" step="any" value={form.package_size}
onChange={(e) => set("package_size", e.target.value)} disabled={readOnly} placeholder="z.B. 500" />
onChange={(e) => set("package_size", e.target.value)} disabled={readOnly}
placeholder="z.B. 500" />
</label>
</div>
<div className="row">
@@ -227,7 +230,7 @@ export default function ProductForm() {
<tbody>
{lots.map((l) => (
<tr key={l.id}>
<td className="num">{fmt(l.quantity)} {unitShort(form.base_unit)}</td>
<td className="num">{fmt(l.quantity)} {unitLabel}</td>
<td>{l.best_before || "–"}</td>
<td className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</td>
</tr>

16
web/src/styles.css
View File

@@ -245,6 +245,22 @@ input::placeholder { color: var(--muted); opacity: 0.7; }
.selected-product > .info { flex: 1; min-width: 0; }
.selected-product .title { font-weight: 620; }
/* ---------- OFF suggestion ---------- */
.suggestion {
display: flex; align-items: center; gap: var(--sp-3);
margin-top: var(--sp-3); padding: var(--sp-3);
background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.suggestion > .info { flex: 1; min-width: 0; }
.suggestion .title { font-weight: 620; }
/* ---------- Check-in lines ---------- */
.lines { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.lines-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); font-weight: 600; font-size: 0.85rem; }
.line { display: flex; gap: var(--sp-2); align-items: flex-end; margin-bottom: var(--sp-2); }
.line .btn-icon { margin-bottom: 1px; }
.line-label { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 580; margin-bottom: 3px; }
/* ---------- Stat tiles ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat {