/* Relay — Catalog screen */ function CatalogScreen() { const { CATALOG } = window.RelayData; const [items, setItems] = React.useState(() => CATALOG.map((c) => ({ ...c }))); const [type, setType] = React.useState("food"); const [cat, setCat] = React.useState("all"); const [search, setSearch] = React.useState(""); const [view, setView] = React.useState("grid"); const categories = React.useMemo(() => { const set = new Set(items.filter((i) => i.type === type).map((i) => i.category)); return ["all", ...[...set].sort()]; }, [items, type]); React.useEffect(() => { setCat("all"); }, [type]); const shown = items.filter((i) => i.type === type && (cat === "all" || i.category === cat) && (!search.trim() || (i.name + " " + i.sku).toLowerCase().includes(search.trim().toLowerCase()))); const toggleAvail = (id) => setItems((prev) => prev.map((i) => i.id === id ? { ...i, available: !i.available } : i)); const available = items.filter((i) => i.type === type && i.available).length; const total = items.filter((i) => i.type === type).length; return ( } subtitle="Tüm kanallarda ve POS'ta satışı yapılabilir ürünler."> Ürün ekle
setSearch(e.target.value)} placeholder="Katalogda ara…" style={{ padding: "8px 12px 8px 34px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border)", background: "var(--surface)", fontSize: 13, width: 200, outline: "none" }} />
{available} / {total} kullanılabilir }, { id: "list", label: "Liste", icon: }]} value={view} onChange={setView} />
{/* category chips */}
{categories.map((c) => ( ))}
{view === "grid" ? (
{shown.map((it) => (
{it.category}
{it.name}
{it.sku}{it.type === "retail" && it.stock != null ? ` · ${it.stock} stokta` : ""}
AED {it.price} toggleAvail(it.id)} />
))} {shown.length === 0 &&
Ürün bulunamadı.
}
) : (
ÜrünKategoriSKUFiyatKullanılabilirlik
{shown.map((it) => (
{it.name} {it.category} {it.sku} AED {it.price} toggleAvail(it.id)} />
))} {shown.length === 0 &&
Ürün bulunamadı.
}
)} ); } function AvailToggle({ on, onClick }) { return ( ); } Object.assign(window, { CatalogScreen });