639126468f
Backend (FastAPI + PostgreSQL): Chargen mit MHD, FEFO-Auslagern, Einheiten-Umrechnung (Stueck/g/ml + Packungen), Open-Food-Facts-Lookup mit lokalem Fallback, JWT-Auth mit Rollen (Admin/Nutzer), erster Admin beim Setup, Einkaufsliste, Ablaufwarnung, Lagerorte, pytest fuer FEFO. Web-UI (React/Vite): Login, Dashboard, Ein-/Auslagern, Produkte, Lagerorte, Benutzerverwaltung, Einkaufsliste - rollenabhaengig. Deploy: docker-compose + install.sh (Docker-Autoinstall, Secrets), README und Roadmap fuer Schritt 2 (iOS) und Schritt 3. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
import { useEffect, useState } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import { api } from "../api";
|
||
import { useAuth } from "../auth";
|
||
import { fmt, unitShort } from "../units";
|
||
|
||
export default function Products() {
|
||
const { isAdmin } = useAuth();
|
||
const [products, setProducts] = useState([]);
|
||
const [q, setQ] = useState("");
|
||
const [error, setError] = useState(null);
|
||
|
||
async function load() {
|
||
try {
|
||
setProducts(await api.listProducts(q));
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
load();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
function onSearch(e) {
|
||
e.preventDefault();
|
||
load();
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<div className="page-head">
|
||
<h1>Produkte</h1>
|
||
{isAdmin && <Link className="btn primary" to="/products/new">+ Neues Produkt</Link>}
|
||
</div>
|
||
{error && <div className="alert error">{error}</div>}
|
||
|
||
<form className="search" onSubmit={onSearch}>
|
||
<input placeholder="Suchen…" value={q} onChange={(e) => setQ(e.target.value)} />
|
||
<button className="btn">Suchen</button>
|
||
</form>
|
||
|
||
<div className="card">
|
||
<table className="table">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Name</th>
|
||
<th>Marke</th>
|
||
<th>Basiseinheit</th>
|
||
<th>Bestand</th>
|
||
<th>Mindest</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{products.map((p) => (
|
||
<tr key={p.id}>
|
||
<td className="thumb-cell">
|
||
{p.image_url ? <img className="thumb" src={p.image_url} alt="" /> : "📦"}
|
||
</td>
|
||
<td>{p.name}</td>
|
||
<td className="muted">{p.brand || "–"}</td>
|
||
<td>{unitShort(p.base_unit)}{p.package_size ? ` · Pkg ${p.package_size}` : ""}</td>
|
||
<td className={p.min_stock != null && p.stock < p.min_stock ? "strong row-warn-text" : ""}>
|
||
{fmt(p.stock)} {unitShort(p.base_unit)}
|
||
</td>
|
||
<td className="muted">{p.min_stock != null ? fmt(p.min_stock) : "–"}</td>
|
||
<td><Link to={`/products/${p.id}`}>Details</Link></td>
|
||
</tr>
|
||
))}
|
||
{products.length === 0 && (
|
||
<tr><td colSpan={7} className="muted center">Keine Produkte.</td></tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|