const { useState, useEffect, useRef, useCallback, useMemo } = React; /* ── Utilities ─────────────────────────────────────── */ function nameToColor(name) { let h = 0; for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h); return `oklch(0.72 0.12 ${Math.abs(h % 360)})`; } function nameToInitials(name) { if (name === "Guest") return "G"; if (name === "LounaCOFFEE") return "LC"; return name.slice(0, 2).toUpperCase(); } function textOnColor(hex) { const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16); return (0.299*r + 0.587*g + 0.114*b) / 255 > 0.55 ? '#333' : '#fff'; } /* ── Header ────────────────────────────────────────── */ function Header({ screen, onBack, onCarWash, accentColor }) { const isCW = screen === 'carwash' || screen === 'carwash-person'; const now = new Date(); const mo = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; const period = `${mo[now.getMonth()]} ${now.getFullYear()}`; return (
{screen !== "shop" && ( )}
Yellow Snack Overflow
Billing  {period}
); } /* ── Item Card ─────────────────────────────────────── */ function ItemCard({ item, qty, onAdd, onRemove, onConfigure, configQty = 0, accent }) { const cc = CATEGORY_COLORS[item.category] || { bg: "#f3f4f6", fg: "#6b7280" }; const isCfg = item.configurable; const totalQty = isCfg ? configQty : qty; const inCart = totalQty > 0; const [pulse, setPulse] = useState(false); const handleClick = () => { if (isCfg) { onConfigure && onConfigure(item); return; } onAdd(item.id); setPulse(true); setTimeout(() => setPulse(false), 200); }; const displayPrice = isCfg ? item.steps.reduce((s, step) => s + (step.required && step.options.length ? Math.min(...step.options.map(o => o.price)) : 0), 0) : item.price; return (
{inCart && {totalQty}} {isCfg && Customise}
{item.image_url ? {item.name} : {item.name[0]}product photo}
{item.name}
{item.subtitle &&
{item.subtitle}
}
{isCfg && from } R{displayPrice.toFixed(2)}
{inCart && !isCfg && (
e.stopPropagation()}> {qty}
)}
); } /* ── Shop Screen ───────────────────────────────────── */ function ShopScreen({ cart, configCart, onAdd, onRemove, onConfigure, accent }) { const [cat, setCat] = useState("all"); const items = cat === "all" ? SNACK_ITEMS : SNACK_ITEMS.filter(i => i.category === cat); const cfgQtyMap = useMemo(() => { const m = {}; (configCart || []).forEach(ci => { m[ci.itemId] = (m[ci.itemId] || 0) + ci.qty; }); return m; }, [configCart]); return (
{CATEGORIES.map(c => ( ))}
{items.map(i => ( ))}
); } /* ── Cart Bar ──────────────────────────────────────── */ function CartBar({ cart, configCart, onCheckout, onClear, accent }) { const [open, setOpen] = useState(false); const rows = Object.entries(cart).filter(([,q]) => q > 0).map(([id, q]) => { const it = SNACK_ITEMS.find(x => x.id === +id); return { ...it, qty: q, line: it.price * q }; }); const cfgRows = (configCart || []).map(ci => ({ id: ci.uid, name: ci.name, desc: ci.summaryLines.map(l => l.name).join(", "), summaryLines: ci.summaryLines, configurable: true, qty: ci.qty, price: ci.unitPrice, line: ci.unitPrice * ci.qty, })); const allRows = [...rows, ...cfgRows]; const total = allRows.reduce((s, r) => s + r.line, 0); const count = allRows.reduce((s, r) => s + r.qty, 0); if (count === 0) return null; return (
{open && (
{allRows.map(r => (
{r.qty}× {r.name}{r.desc &&
{r.desc}
}
R{r.line.toFixed(2)}
))}
)}
); } /* ── Person Picker ─────────────────────────────────── */ function PersonScreen({ items, total, onSelect, accent, title, subtitle }) { const [q, setQ] = useState(""); const ref = useRef(null); useEffect(() => { ref.current && ref.current.focus(); }, []); const list = q ? EMPLOYEES.filter(n => n.toLowerCase().includes(q.toLowerCase())) : EMPLOYEES; return (

{title || "Who's buying?"}

{subtitle || `${items.length} item${items.length !== 1 ? 's' : ''} · R${total.toFixed(2)}`}

setQ(e.target.value)} /> {q && }
{list.map(name => ( ))} {list.length === 0 &&

No employees found

}
); } /* ── Confirm Dialog ────────────────────────────────── */ function ConfirmDialog({ person, items, total, tab, onConfirm, onCancel, accent }) { return (
e.stopPropagation()}>
{nameToInitials(person)}
{person}
Current tab: R{tab.toFixed(2)}
{items.map(r => (
{r.qty}× {r.name}{r.desc &&
{r.desc}
}
R{r.line.toFixed(2)}
))}
TotalR{total.toFixed(2)}
New tab: R{(tab + total).toFixed(2)}
); } /* ── Success: Modal ────────────────────────────────── */ function SuccessModal({ person, items, total, newTab, onDismiss, accent }) { const [pct, setPct] = useState(100); const timer = useRef(null); useEffect(() => { const dur = 5000, iv = 50, step = 100 / dur * iv; timer.current = setInterval(() => setPct(p => { if (p <= 0) { clearInterval(timer.current); onDismiss(); return 0; } return p - step; }), iv); return () => clearInterval(timer.current); }, [onDismiss]); return (
e.stopPropagation()}>

Sale Complete

{nameToInitials(person)}
Charged to {person}
R{total.toFixed(2)}
{items.map(r =>
{r.qty}× {r.name}R{r.line.toFixed(2)}
)}
Monthly tab: R{newTab.toFixed(2)}
); } /* ── Success: Toast ────────────────────────────────── */ function SuccessToast({ person, total, newTab, onDismiss, accent }) { const [pct, setPct] = useState(100); useEffect(() => { const dur = 4000, iv = 50, step = 100 / dur * iv; const t = setInterval(() => setPct(p => { if (p <= 0) { clearInterval(t); onDismiss(); return 0; } return p - step; }), iv); return () => clearInterval(t); }, [onDismiss]); return (
R{total.toFixed(2)} charged to {person}
Monthly tab: R{newTab.toFixed(2)}
); } /* ── Success: Full-screen ──────────────────────────── */ function SuccessFullScreen({ person, total, newTab, onDismiss, accent }) { const [phase, setPhase] = useState("enter"); useEffect(() => { const t1 = setTimeout(() => setPhase("show"), 80); const t2 = setTimeout(() => setPhase("exit"), 3000); const t3 = setTimeout(onDismiss, 3500); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [onDismiss]); return (
R{total.toFixed(2)}
Charged to {person}
Monthly tab: R{newTab.toFixed(2)}
); } /* ── Export to window ──────────────────────────────── */ Object.assign(window, { Header, ShopScreen, CartBar, PersonScreen, ConfirmDialog, SuccessModal, SuccessToast, SuccessFullScreen, nameToColor, nameToInitials, textOnColor, ItemCard, });