// ====== Orders page (kanban + drawer + new-order modal) ====== // Build a mods string from whichever fields are available. // Visibility is controlled by the showCardMods toggle — no filtering here. const getItemMods = (it) => { if (it.mods) return it.mods; const size = it.size_label || it.size; const sweet = it.sweetness_label || it.sweetness; const ice = it.ice_label || it.ice; const parts = [size, sweet ? `${sweet} sugar` : null, ice].filter(Boolean); return parts.length ? parts.join(" · ") : null; }; const channelIcon = (c) => c === "delivery" ? "pickup" : "store"; const channelLabel = (c) => c === "delivery" ? "Delivery" : "Pickup"; const formatScheduledTime = (iso) => { if (!iso) return null; return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }); }; const isDateOnlyScheduledTime = (date) => (date.getHours() === 0 && date.getMinutes() === 0) || (date.getHours() === 23 && date.getMinutes() === 59); const formatScheduledDateTime = (iso) => { if (!iso) return null; const d = new Date(iso); if (Number.isNaN(d.getTime())) return null; const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const tomorrow = new Date(today.getTime() + 864e5); const dDay = new Date(d.getFullYear(), d.getMonth(), d.getDate()); const timeSet = !isDateOnlyScheduledTime(d); const time = timeSet ? formatScheduledTime(iso) : null; const isToday = dDay.getTime() === today.getTime(); const isTomorrow = dDay.getTime() === tomorrow.getTime(); const dateLabel = isToday ? "Today" : isTomorrow ? "Tomorrow" : d.toLocaleDateString("en-US", { month: "short", day: "numeric" }); if (!dateLabel && !time) return null; if (!dateLabel) return time; if (!time) return dateLabel; return `${dateLabel}, ${time}`; }; const formatOrderDateTime = (value) => { if (!value) return null; const d = new Date(value); if (Number.isNaN(d.getTime())) return null; return d.toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit", }); }; const money = (value) => Number(value || 0).toFixed(2); const floorDiscount = (value) => Math.floor(Math.max(0, Number(value || 0))); const FALLBACK_ORDER_ITEM_TYPES = [ { id: "regular-sale", name: "Regular Sale", pricing_mode: "normal", adjustment_value: 0, stock_effect: "deduct", is_default: true, is_active: true }, ]; const activeFlag = (value) => value !== false && value !== "false" && value !== 0; const orderSubtotal = (order) => Number(order?.subtotal ?? (order?.items || []).reduce((sum, item) => ( sum + Number((item.line_total ?? (Number(item.price || 0) * Number(item.qty || 1))) || 0) ), 0)); const isRegularOrderItem = (item) => ( (item.pricing_mode || item.pricingMode || "normal") === "normal" && (item.line_type_name || item.lineTypeName || "Regular Sale") === "Regular Sale" ); const isIncludedDefaultAddOn = (item) => item?.is_included_addon === true || item?.isIncludedAddon === true; const visibleOrderItems = (items) => (items || []).filter(item => !isIncludedDefaultAddOn(item)); const orderItemLineTotal = (item) => Number( item.line_total ?? item.lineTotal ?? (Number(item.price || 0) * Number(item.qty || 1)) ); const orderDiscount = (order) => Math.max(0, Number(order?.discount_amount ?? order?.discount ?? 0)); const orderDiscountLabel = (order) => { const type = order?.discount_type || "fixed"; const value = Number(order?.discount_value ?? orderDiscount(order)); if (type === "percent" && value > 0) return `$${money(orderDiscount(order))} (${money(value).replace(/\.00$/, "")}%)`; return `$${money(orderDiscount(order))}`; }; const dateInputValue = (value) => { if (!value) return ""; const d = new Date(value); if (Number.isNaN(d.getTime())) return ""; return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; }; const todayInputValue = () => dateInputValue(new Date()); const PAYMENT_LABELS = { card: "Card", cash: "Cash", apple_pay: "Apple Pay", google_pay: "Google Pay", zelle: "Zelle", }; const PaymentBadge = ({ payment, compact }) => { if (!payment) return null; const label = PAYMENT_LABELS[payment.method] || payment.method; const detail = payment.brand && payment.last4 ? `${payment.brand} ····${payment.last4}` : null; return ( {compact ? label : (detail || label)} ); }; const SourceBadge = ({ source }) => { if (!source) return null; const dotColor = { "Counter": "var(--green-500)", "In-app": "var(--gold-500)", "Phone-in": "var(--green-300)", "Uber Eats": "#1f8a5b", "DoorDash": "#b35a4a", }[source] || "var(--gold-500)"; return ( {source} ); }; // ============================================================ // New Order modal // ============================================================ const glyphForName = (name, menuItems = []) => menuItems.find(m => m.name === name)?.glyph || "茶"; // Tier color helpers (also used in customers.jsx) const orderTierColor = (t) => t === "VIP" ? "var(--gold-600)" : t === "Regular" ? "var(--green-700)" : "var(--ink-500)"; const orderTierBg = (t) => t === "VIP" ? "rgba(200,162,92,0.18)" : t === "Regular" ? "rgba(53,97,72,0.10)" : "rgba(125,132,114,0.10)"; // Customer picker — search existing or enter new const CustomerPicker = ({ value, customers, onChange }) => { const [mode, setMode] = React.useState("existing"); const [query, setQuery] = React.useState(""); const [open, setOpen] = React.useState(false); const [matches, setMatches] = React.useState(() => customers.slice(0, 6)); const [loading, setLoading] = React.useState(false); const searchSeq = React.useRef(0); React.useEffect(() => { if (!query.trim()) setMatches(customers.slice(0, 6)); }, [customers, query]); React.useEffect(() => { const backend = window.TeaGangBackend; const term = query.trim(); const seq = ++searchSeq.current; if (!backend?.enabled || !backend.searchCustomers) { const q = normalizeVi(term); const localMatches = !q ? customers.slice(0, 6) : customers.filter(c => normalizeVi(c.name).includes(q) || c.phone.includes(term) || normalizeVi(c.email || "").includes(q) ).slice(0, 8); setMatches(localMatches); return; } setLoading(Boolean(term)); const timer = window.setTimeout(async () => { try { const rows = await backend.searchCustomers({ query: term, limit: term ? 8 : 6 }); if (seq !== searchSeq.current) return; setMatches(rows || []); } catch (error) { if (seq !== searchSeq.current) return; console.error("Could not search order customers.", error); setMatches([]); } finally { if (seq === searchSeq.current) setLoading(false); } }, 250); return () => window.clearTimeout(timer); }, [query, customers]); const pick = (c) => { onChange({ id: c.id, name: c.name, phone: c.phone, email: c.email, tier: c.tier, _existing: true }); setOpen(false); setQuery(""); }; const clearExisting = () => { onChange({ id: null, name: "", phone: "", email: "", _existing: false }); setQuery(""); }; return (
{mode === "existing" ? (
{value._existing ? (
{value.name.split(" ").map(n => n[0]).join("")}
{value.name} {value.tier && {value.tier}}
{value.phone}
) : (
{ setQuery(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} /> {loading && }
{open && matches.length > 0 && (
{matches.map(c => (
pick(c)}>
{c.name.split(" ").map(n => n[0]).join("")}
{c.name}
{c.phone} · {c.visits} visits
{c.tier === "VIP" && }
))}
)} {open && !loading && query.trim() && matches.length === 0 && (
No matching guest found
)} )}
) : (
onChange({ ...value, name: e.target.value, _existing: false, id: null })} style={{ padding: "8px 12px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", fontSize: 13, outline: "none" }} /> onChange({ ...value, phone: formatPhone(e.target.value), _existing: false, id: null })} style={{ padding: "8px 12px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", fontSize: 13, outline: "none" }} />
)}
); }; const ClockTimePicker = ({ value, onChange }) => { const parse = (v) => { if (!v) return { h: null, m: null, ampm: "AM" }; const [h24, m] = v.split(":").map(Number); return { h: h24 % 12 || 12, m, ampm: h24 >= 12 ? "PM" : "AM" }; }; const [t, setT] = React.useState(() => parse(value)); const [face, setFace] = React.useState("hour"); React.useEffect(() => { setT(parse(value)); setFace("hour"); }, [value]); const emit = (next) => { if (next.h == null || next.m == null) return; let h24 = next.h % 12; if (next.ampm === "PM") h24 += 12; onChange(`${String(h24).padStart(2,"0")}:${String(next.m).padStart(2,"0")}`); }; const pickH = (v) => { const n = { ...t, h: v }; setT(n); emit(n); setFace("minute"); }; const pickM = (v) => { const n = { ...t, m: v }; setT(n); emit(n); }; const pickAP = (v) => { const n = { ...t, ampm: v }; setT(n); emit(n); }; const ITEMS = face === "hour" ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] : [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]; const sel = face === "hour" ? t.h : t.m; const selIdx = ITEMS.indexOf(sel); const CX = 110, CY = 110, R = 82, BR = 17; const ang = (i) => (i / 12) * 2 * Math.PI - Math.PI / 2; const hx = selIdx >= 0 ? CX + R * Math.cos(ang(selIdx)) : CX; const hy = selIdx >= 0 ? CY + R * Math.sin(ang(selIdx)) : CY; return (
setFace("hour")} style={{ fontFamily: "var(--font-mono)", fontSize: 30, fontWeight: 600, cursor: "pointer", padding: "2px 8px", borderRadius: 8, background: face === "hour" ? "rgba(53,97,72,0.12)" : "transparent", color: face === "hour" ? "var(--green-700)" : "var(--ink-600)" }}> {t.h != null ? String(t.h).padStart(2,"0") : "--"} : setFace("minute")} style={{ fontFamily: "var(--font-mono)", fontSize: 30, fontWeight: 600, cursor: "pointer", padding: "2px 8px", borderRadius: 8, background: face === "minute" ? "rgba(53,97,72,0.12)" : "transparent", color: face === "minute" ? "var(--green-700)" : "var(--ink-600)" }}> {t.m != null ? String(t.m).padStart(2,"0") : "--"}
{["AM", "PM"].map(ap => ( ))}
{selIdx >= 0 && <> } {ITEMS.map((val, i) => { const a = ang(i), x = CX + R * Math.cos(a), y = CY + R * Math.sin(a); const isSel = selIdx === i; return ( face === "hour" ? pickH(val) : pickM(val)}> {!isSel && } {face === "minute" ? String(val).padStart(2,"0") : val} ); })}
); }; const DateFilterDialog = ({ config, initialValue, onApply, onCancel }) => { const [value, setValue] = React.useState(initialValue || ""); const [rangeValue, setRangeValue] = React.useState(initialValue || { from: "", to: "" }); const pickerRef = React.useRef(null); const endPickerRef = React.useRef(null); React.useEffect(() => { if (config?.kind === "range") { setRangeValue(initialValue || { from: "", to: "" }); } else { setValue(initialValue || ""); } }, [initialValue, config?.id]); if (!config) return null; const openPicker = (ref = pickerRef) => { const input = ref.current; if (!input) return; try { input.showPicker(); } catch { input.focus(); } }; const openFirstPicker = () => { const input = pickerRef.current; if (!input) return; try { input.showPicker(); } catch { input.focus(); } }; React.useEffect(() => { const timer = window.setTimeout(openFirstPicker, 80); return () => window.clearTimeout(timer); }, [config.id]); const canApply = config.kind === "range" ? Boolean(rangeValue.from && rangeValue.to) : Boolean(value); const apply = () => { if (!canApply) return; onApply(config.id, config.kind === "range" ? rangeValue : value); }; return ReactDOM.createPortal(
e.stopPropagation()} >
{config.eyebrow}

{config.title}

{config.kind === "range" ? (
setRangeValue(v => ({ ...v, from: e.target.value }))} />
setRangeValue(v => ({ ...v, to: e.target.value }))} />
) : (
setValue(e.target.value)} />
)} {config.kind === "range" && rangeValue.from && rangeValue.to && rangeValue.from > rangeValue.to && (
End day should be after start day.
)}
, document.body ); }; const NewOrderModal = ({ open, onClose, onCreate, onUpdate, nextOrderNumber, editingOrder, menuItems, categories, customers, orderSources, drinkOptions, orderItemTypes = [], }) => { const [tab, setTab] = React.useState("all"); const [cart, setCart] = React.useState([]); const [placing, setPlacing] = React.useState(false); const [showTimePicker, setShowTimePicker] = React.useState(false); const [editingIdx, setEditingIdx] = React.useState(null); // index into cart const [itemQuery, setItemQuery] = React.useState(""); const [modalItemTypes, setModalItemTypes] = React.useState(null); const defaultSource = orderSources[0] || { name: "Counter", id: null }; const [customer, setCustomer] = React.useState({ id: null, name: "", phone: "", email: "", tier: null, channel: "pickup", source: defaultSource.name || "Counter", source_id: defaultSource.id || null, note: "", scheduledDate: "", scheduledTime: "", _existing: false }); const isEdit = !!editingOrder; React.useEffect(() => { if (!open) return; let disposed = false; const backend = window.TeaGangBackend; setModalItemTypes(null); if (!backend?.enabled || !backend.fetchOrderItemTypes) { setModalItemTypes(FALLBACK_ORDER_ITEM_TYPES); return; } backend.fetchOrderItemTypes() .then(rows => { if (!disposed) setModalItemTypes(rows || []); }) .catch(error => { console.warn("Could not refresh order item types for modal.", error); if (!disposed) setModalItemTypes(orderItemTypes.length ? orderItemTypes : null); }); return () => { disposed = true; }; }, [open, orderItemTypes]); const normalizedItemTypes = React.useMemo(() => { const backend = window.TeaGangBackend; let rows = []; if (modalItemTypes !== null) { rows = modalItemTypes; } else if (orderItemTypes.length) { rows = orderItemTypes; } else if (!backend?.enabled || !backend.fetchOrderItemTypes) { rows = FALLBACK_ORDER_ITEM_TYPES; } return rows.map(type => ({ ...type, id: type.id || type.name, name: type.name || "Regular Sale", pricing_mode: type.pricing_mode || type.pricingMode || "normal", adjustment_value: Number(type.adjustment_value ?? type.adjustmentValue ?? 0), stock_effect: type.stock_effect || type.stockEffect || "deduct", is_default: type.is_default === true || type.isDefault === true, is_active: activeFlag(type.is_active) && activeFlag(type.isActive), })); }, [modalItemTypes, open, orderItemTypes]); const defaultItemType = React.useMemo( () => normalizedItemTypes.find(t => t.is_default) || normalizedItemTypes[0] || null, [normalizedItemTypes] ); const activeItemTypes = React.useMemo( () => normalizedItemTypes.filter(t => t.is_active !== false), [normalizedItemTypes] ); const adjustedUnitPriceForType = (type, original) => { const base = Math.max(0, Number(original || 0)); const value = Number(type?.adjustment_value || 0); const mode = type?.pricing_mode || "normal"; const adjusted = mode === "free" ? 0 : mode === "fixed_price" ? value : mode === "fixed_discount" ? base - value : mode === "percent_discount" ? base * (1 - Math.min(Math.max(value, 0), 100) / 100) : base; return +Math.max(0, adjusted).toFixed(2); }; const stockDeltaForType = (type, qty) => { const quantity = Number(qty || 1); const effect = type?.stock_effect || "deduct"; if (effect === "none") return 0; if (effect === "restock") return -quantity; return quantity; }; const applyItemType = (line, type = defaultItemType) => { if (!type) return line; const original = Number(line.originalUnitPrice ?? line.original_unit_price ?? line.price ?? (line.basePrice + (line.sizeDelta || 0)) ?? 0); const adjusted = adjustedUnitPriceForType(type, original); const qty = Number(line.qty || 1); return { ...line, lineTypeId: type.id, lineTypeName: type.name || "Regular Sale", pricingMode: type.pricing_mode || "normal", adjustmentValue: Number(type.adjustment_value || 0), stockEffect: type.stock_effect || "deduct", originalUnitPrice: original, adjustedUnitPrice: adjusted, lineDiscountAmount: Math.max(0, original - adjusted) * qty, stockQuantityDelta: stockDeltaForType(type, qty), }; }; // Reset on open React.useEffect(() => { if (!open) { setPlacing(false); setShowTimePicker(false); return; } setEditingIdx(null); setTab("all"); setItemQuery(""); if (editingOrder) { // Pre-populate from existing order — items are "locked" (qty/remove only) const lines = visibleOrderItems(editingOrder.items).map(it => ({ id: menuItems.find(m => m.name === it.name)?.id || it.menuItemId || "x", menuItemId: it.menuItemId, name: it.name, glyph: it.glyph || glyphForName(it.name, menuItems), basePrice: Number(it.original_unit_price ?? it.price ?? 0), line_total: it.line_total, sizeDelta: 0, size: "", sweetness: it.sweetness_label || null, ice: it.ice_label || null, addons: [], qty: it.qty, note: it.note || "", mods: it.mods, size_label: it.size_label || null, sweetness_level: it.sweetness_level || null, sweetness_label: it.sweetness_label || null, ice_level: it.ice_level || null, ice_label: it.ice_label || null, add_ons: it.add_ons || [], lineTypeId: it.line_type_id || null, lineTypeName: it.line_type_name || "Regular Sale", pricingMode: it.pricing_mode || "normal", adjustmentValue: Number(it.adjustment_value || 0), stockEffect: it.stock_effect || "deduct", originalUnitPrice: Number(it.original_unit_price ?? it.price ?? 0), adjustedUnitPrice: Number(it.adjusted_unit_price ?? it.price ?? 0), lineDiscountAmount: Number(it.line_discount_amount || 0), stockQuantityDelta: Number(it.stock_quantity_delta ?? it.qty ?? 1), locked: true, })); setCart(lines); const existingDiscount = Number(editingOrder.discount_amount ?? editingOrder.discount ?? 0); const safeDiscount = Number.isFinite(existingDiscount) ? Math.max(0, +existingDiscount.toFixed(2)) : 0; const existingDiscountType = editingOrder.discount_type === "percent" ? "percent" : "fixed"; const existingDiscountValue = Number( editingOrder.discount_value ?? (existingDiscountType === "percent" ? 0 : safeDiscount) ); const safeDiscountValue = Number.isFinite(existingDiscountValue) ? Math.max(0, +existingDiscountValue.toFixed(2)) : 0; const calculatedTotal = Math.max(0, +(lines.reduce((s, l) => s + Number(l.line_total ?? (l.basePrice * l.qty)), 0) - safeDiscount).toFixed(2)); setDiscountType(existingDiscountType); setDiscountValue(safeDiscountValue); setPriceOverride( editingOrder.total != null && Math.abs(Number(editingOrder.total || 0) - calculatedTotal) > 0.001 ? Number(editingOrder.total || 0) : null ); // Try to match an existing customer row by name const existing = customers.find(c => c.name === editingOrder.customer); const sourceName = editingOrder.source || "Counter"; const sourceId = editingOrder.source_id || orderSources.find(s => s.name === sourceName)?.id || null; setCustomer({ id: editingOrder.customer_id || existing?.id || null, name: editingOrder.customer === "Walk-in guest" ? "" : editingOrder.customer, phone: editingOrder.phone && editingOrder.phone !== "—" ? editingOrder.phone : "", email: existing?.email || "", tier: existing?.tier || null, channel: editingOrder.channel, source: sourceName, source_id: sourceId, note: editingOrder.note || "", scheduledDate: dateInputValue(editingOrder.scheduled_at), scheduledTime: editingOrder.scheduled_at ? (() => { const d = new Date(editingOrder.scheduled_at); return isDateOnlyScheduledTime(d) ? "" : d.toTimeString().slice(0, 5); })() : "", _existing: Boolean(editingOrder.customer_id || existing), }); } else { setCart([]); setDiscountType("fixed"); setDiscountValue(0); setPriceOverride(null); const source = orderSources[0] || { name: "Counter", id: null }; setCustomer({ id: null, name: "", phone: "", email: "", tier: null, channel: "pickup", source: source.name || "Counter", source_id: source.id || null, note: "", scheduledDate: "", scheduledTime: "", _existing: false }); } }, [open, editingOrder, orderSources]); const categoryItems = tab === "all" ? menuItems : menuItems.filter(m => m.cat === tab); const normalizedItemQuery = normalizeVi(itemQuery.trim()); const visibleItems = normalizedItemQuery ? categoryItems.filter(m => { const haystack = [ m.name, m.description, m.cat, m.category, m.label, ].map(normalizeVi).join(" "); return haystack.includes(normalizedItemQuery); }) : categoryItems; const sweetnessLevels = drinkOptions.filter(o => o.option_type === "sweetness"); const iceLevels = drinkOptions.filter(o => o.option_type === "ice"); const allowsSweetness = (item) => item?.item_type !== "addon" && item?.sweetness_enabled !== false; const allowsIce = (item) => item?.item_type !== "addon" && item?.ice_enabled !== false; const compatibleAddOnsFor = (item) => { const addonIds = Array.isArray(item?.addon_item_ids) ? item.addon_item_ids : Array.isArray(item?.addons) ? item.addons : []; if (!item || item.item_type === "addon" || !addonIds.length) return []; const compatibleIds = new Set(addonIds); return menuItems.filter(addOn => addOn.item_type === "addon" && addOn.available !== false && compatibleIds.has(addOn.id) ); }; const includedAddOnsFor = (item) => { const addonIds = Array.isArray(item?.included_addon_item_ids) ? item.included_addon_item_ids : []; if (!item || item.item_type === "addon" || !addonIds.length) return []; const includedIds = new Set(addonIds); return menuItems.filter(addOn => addOn.item_type === "addon" && addOn.available !== false && includedIds.has(addOn.id) ); }; const defaultSizeForItem = (item) => { const sizes = Array.isArray(item?.sizes) ? item.sizes : []; return sizes.find(size => String(size.label || "").toLowerCase() === "no size") || sizes[0] || null; }; const addOnUnitPrice = (addon) => Number(addon.price || addon.unit_price || addon.sizes?.[0]?.price || 0); const addOnQuantity = (addon) => Number(addon.quantity || 1); const addOnLabel = (addon) => addon.name || addon.menu_item_name || "Add-on"; const addOnPayload = (addon) => ({ menu_item_id: addon.menu_item_id || addon.id || null, menu_item_name: addOnLabel(addon), size_id: addon.size_id || addon.sizes?.[0]?.id || null, size_label: addon.size_label || addon.sizes?.[0]?.label || null, unit_price: addOnUnitPrice(addon), quantity: addOnQuantity(addon), }); const includedDefaultRowsForLine = (line) => { const menuItem = menuItems.find(item => item.id === (line.menuItemId || line.id)); if (!menuItem) return []; return includedAddOnsFor(menuItem).map(addOn => { const size = defaultSizeForItem(addOn); return { name: addOn.name, menuItemId: addOn.id, qty: Number(line.qty || 1), price: 0, mods: "", glyph: addOn.glyph, size: size?.label || null, size_label: size?.label || null, sweetness: null, sweetness_label: null, sweetness_level: null, ice: null, ice_label: null, ice_level: null, addons: [], add_ons: [], note: "", lineTypeId: null, lineTypeName: "Regular Sale", pricingMode: "normal", adjustmentValue: 0, stockEffect: "deduct", originalUnitPrice: 0, adjustedUnitPrice: 0, lineDiscountAmount: 0, stockQuantityDelta: Number(line.qty || 1), line_total: 0, is_included_addon: true, isIncludedAddon: true, }; }); }; const addToCart = (item) => { const sizeChoices = (item.sizes?.length ? item.sizes : [{ label: "No size", price: item.price }]) .map(s => ({ label: s.label, delta: +(Number(s.price || item.price) - item.price).toFixed(2) })); const def = sizeChoices[0]; const sweet = sweetnessLevels.find(s => s.is_default) || sweetnessLevels[0]; const ice = iceLevels.find(s => s.is_default) || iceLevels[0]; const entry = { id: item.id, menuItemId: item.id, name: item.name, glyph: item.glyph, basePrice: item.price, size: def.label, sizeDelta: def.delta, sweetness: allowsSweetness(item) ? sweet?.label : null, ice: allowsIce(item) ? ice?.label : null, addons: [], qty: 1, note: "", }; const typedEntry = applyItemType(entry); setCart(prev => { const next = [...prev, typedEntry]; setEditingIdx(next.length - 1); return next; }); }; const lineTotal = (l) => { const addOns = Array.isArray(l.addons) && l.addons.length ? l.addons : (Array.isArray(l.add_ons) ? l.add_ons : []); const unitPrice = Number(l.adjustedUnitPrice ?? l.basePrice + l.sizeDelta); const addonSum = addOns.reduce((s, a) => s + addOnUnitPrice(a) * addOnQuantity(a), 0); return (unitPrice + addonSum) * l.qty; }; const updateLine = (idx, patch) => { setCart(prev => prev.map((l, i) => { if (i !== idx) return l; const next = { ...l, ...patch }; if (patch.qty != null || patch.sizeDelta != null || patch.lineTypeId != null) { const type = normalizedItemTypes.find(t => t.id === next.lineTypeId) || defaultItemType; const original = patch.sizeDelta != null ? Number(next.basePrice || 0) + Number(next.sizeDelta || 0) : Number(next.originalUnitPrice ?? next.original_unit_price ?? next.basePrice ?? 0); return applyItemType({ ...next, originalUnitPrice: original }, type); } return next; })); }; const removeLine = (idx) => { setCart(prev => prev.filter((_, i) => i !== idx)); if (editingIdx === idx) setEditingIdx(null); else if (editingIdx > idx) setEditingIdx(editingIdx - 1); }; const setAddonQty = (idx, addon, qty) => { setCart(prev => prev.map((l, i) => { if (i !== idx) return l; if (qty <= 0) return { ...l, addons: l.addons.filter(a => a.id !== addon.id) }; const has = l.addons.some(a => a.id === addon.id); const normalized = { ...addon, price: addOnUnitPrice(addon), quantity: qty }; return { ...l, addons: has ? l.addons.map(a => a.id === addon.id ? { ...a, quantity: qty } : a) : [...l.addons, normalized], }; })); }; const subtotal = cart.reduce((s, l) => s + lineTotal(l), 0); const tax = 0; const grand = +(subtotal + tax).toFixed(2); const [priceOverride, setPriceOverride] = React.useState(null); const [discountType, setDiscountType] = React.useState("fixed"); const [discountValue, setDiscountValue] = React.useState(0); const [editingDiscount, setEditingDiscount] = React.useState(false); const [discountInput, setDiscountInput] = React.useState(""); const [editingTotal, setEditingTotal] = React.useState(false); const [totalInput, setTotalInput] = React.useState(""); const rawDiscountValue = Math.max(0, Number(discountValue || 0)); const effectiveDiscountValue = discountType === "percent" ? Math.min(rawDiscountValue, 100) : Math.min(rawDiscountValue, grand); const appliedDiscount = Math.min( floorDiscount(discountType === "percent" ? grand * effectiveDiscountValue / 100 : effectiveDiscountValue), grand ); const discountedGrand = Math.max(0, +(grand - appliedDiscount).toFixed(2)); const finalTotal = priceOverride != null ? priceOverride : discountedGrand; const priceDelta = priceOverride != null ? +(finalTotal - discountedGrand).toFixed(2) : 0; const fixedDiscountSuggestions = [1, 2, 3, 4, 5, 6, 8, 10, 15, 20].filter(v => v <= Math.max(1, grand)); const percentDiscountSuggestions = [5, 10, 15, 20, 25, 50]; const applyDiscountValue = (value) => { const max = discountType === "percent" ? 100 : grand; const next = Number(value); setDiscountValue(Number.isFinite(next) && next >= 0 ? +Math.min(next, max).toFixed(2) : 0); }; const scheduledAt = () => { if (!customer.scheduledDate && !customer.scheduledTime) return null; const date = customer.scheduledDate || todayInputValue(); const time = customer.scheduledTime || "23:59"; const [h, m] = time.split(":").map(Number); const d = new Date(`${date}T00:00:00`); d.setHours(Number.isFinite(h) ? h : 0, Number.isFinite(m) ? m : 0, 0, 0); return d.toISOString(); }; const editing = editingIdx != null && !cart[editingIdx]?.locked ? cart[editingIdx] : null; const editingMenuItem = editing ? menuItems.find(m => m.id === editing.id) : null; const editingSizeChoices = editingMenuItem ? (editingMenuItem.sizes?.length ? editingMenuItem.sizes : [{ label: "No size", price: editingMenuItem.price }]) .map(s => ({ label: s.label, delta: +(Number(s.price || editingMenuItem.price) - editingMenuItem.price).toFixed(2) })) : []; const editingAddOns = compatibleAddOnsFor(editingMenuItem); const placeOrder = async () => { if (!cart.length) return; // Auto-save new guest to customers table let resolvedCustomerId = customer.id || null; if (!customer._existing && customer.name && customer.name.trim()) { try { const saved = await window.TeaGangBackend?.saveCustomer?.({ name: customer.name, phone: customer.phone || "", email: customer.email || "", }); if (saved?.id) resolvedCustomerId = saved.id; } catch (e) { console.warn("Could not auto-save new customer:", e); } } const items = cart.flatMap(l => { if (l.locked) { const baseLine = { name: l.name, menuItemId: l.menuItemId || l.id, qty: l.qty, price: l.adjustedUnitPrice ?? l.basePrice, mods: l.mods || "", glyph: l.glyph, size: l.size_label, size_label: l.size_label, sweetness: l.sweetness_label, sweetness_label: l.sweetness_label, sweetness_level: l.sweetness_level, ice: l.ice_label, ice_label: l.ice_label, ice_level: l.ice_level, addons: l.add_ons || [], add_ons: l.add_ons || [], note: l.note || "", lineTypeId: l.lineTypeId, lineTypeName: l.lineTypeName, pricingMode: l.pricingMode, adjustmentValue: l.adjustmentValue, stockEffect: l.stockEffect, originalUnitPrice: l.originalUnitPrice, adjustedUnitPrice: l.adjustedUnitPrice, lineDiscountAmount: l.lineDiscountAmount, stockQuantityDelta: l.stockQuantityDelta, }; return [baseLine, ...includedDefaultRowsForLine(l)]; } const mods = [ l.size && l.size !== "No size" ? l.size : null, l.sweetness ? `${l.sweetness} sugar` : null, l.ice, ...l.addons.map(a => `+${addOnLabel(a)}${addOnQuantity(a) > 1 ? ` x${addOnQuantity(a)}` : ""}`), ].filter(Boolean).join(" · "); const addOns = l.addons.map(addOnPayload); const baseLine = { name: l.name, menuItemId: l.menuItemId || l.id, qty: l.qty, price: l.adjustedUnitPrice ?? (l.basePrice + l.sizeDelta), mods, glyph: l.glyph, size: l.size, sweetness: l.sweetness, ice: l.ice, addons: addOns, add_ons: addOns, lineTypeId: l.lineTypeId, lineTypeName: l.lineTypeName, pricingMode: l.pricingMode, adjustmentValue: l.adjustmentValue, stockEffect: l.stockEffect, originalUnitPrice: l.originalUnitPrice, adjustedUnitPrice: l.adjustedUnitPrice, lineDiscountAmount: l.lineDiscountAmount, stockQuantityDelta: l.stockQuantityDelta, }; return [baseLine, ...includedDefaultRowsForLine(l)]; }); if (isEdit) { onUpdate({ ...editingOrder, customer_id: resolvedCustomerId, customer: customer.name || "Walk-in guest", phone: customer.phone || "—", channel: customer.channel, source: customer.source, source_id: customer.source_id, note: customer.note, scheduled_at: scheduledAt(), items, discount_amount: appliedDiscount, discount_type: discountType, discount_value: effectiveDiscountValue, total: finalTotal, }); } else { onCreate({ id: `TG-${nextOrderNumber}`, order_number: nextOrderNumber, customer_id: resolvedCustomerId, customer: customer.name || "Walk-in guest", phone: customer.phone || "—", time: "Just now", waited: 0, channel: customer.channel, source: customer.source, source_id: customer.source_id, discount_amount: appliedDiscount, discount_type: discountType, discount_value: effectiveDiscountValue, total: finalTotal, status: "pending", note: customer.note, scheduled_at: scheduledAt(), items, }); } }; return (
e.stopPropagation()}> {/* LEFT — menu picker */}

{isEdit ? `Edit Order` : "New Order"}

{isEdit ? <>Order {editingOrder.id} · {editingOrder.time} : <>Build a cup — order #{nextOrderNumber}}
{categories.map(c => ( setTab(c.id)}> {c.label} {c.count} ))}
setItemQuery(e.target.value)} /> {itemQuery && ( )}
{visibleItems.length === 0 ? (
No menu items found
) : (
{visibleItems.map(m => ( ))}
)}
{editing && (
Customize · {editing.name}
{editingSizeChoices.map(s => ( ))}
{allowsSweetness(editingMenuItem) && (
{sweetnessLevels.map(s => ( ))}
)} {allowsIce(editingMenuItem) && (
{iceLevels.map(s => ( ))}
)} {editingAddOns.length > 0 && (
{editingAddOns.map(a => { const selectedAddOn = editing.addons.find(x => x.id === a.id); const qty = selectedAddOn?.quantity || 0; const on = qty > 0; const addOnPrice = addOnUnitPrice(a); return (
{on && } {a.name} +${addOnPrice.toFixed(2)}
{qty}
); })}
)}
updateLine(editingIdx, { note: e.target.value })} style={{ flex: 1, padding: "7px 10px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", fontSize: 12.5, outline: "none" }} />
)}
{/* RIGHT — cart + customer */}
Customer
setCustomer({ ...customer, ...v })} />
{[ { id: "pickup", label: "Pickup", icon: "store" }, { id: "delivery", label: "Delivery", icon: "pickup" }, ].map(o => ( ))}
{customer.channel === "delivery" ? "Delivery date" : "Pickup date"}
setCustomer({ ...customer, scheduledDate: e.target.value })} style={{ minWidth: 0 }} />
{customer.scheduledDate && ( )}
{customer.channel === "delivery" ? "Delivery time" : "Pickup time"} {customer.scheduledTime && ( )}
{showTimePicker && ( setCustomer({ ...customer, scheduledTime: v })} /> )}
setCustomer({ ...customer, note: e.target.value })} style={{ padding: "8px 12px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", fontSize: 13, outline: "none" }} />
{cart.length === 0 ? (
茶
an empty cup awaits
Tap drinks on the left to add them.
) : cart.map((l, i) => { const baseMods = l.locked ? [] : [ l.size, l.sweetness ? `${l.sweetness} sugar` : null, l.ice, ].filter(Boolean); const addOnMods = l.locked ? [] : l.addons.map(a => `+${addOnLabel(a)}${addOnQuantity(a) > 1 ? ` x${addOnQuantity(a)}` : ""}`); const noteMod = !l.locked && l.note ? `“${l.note}”` : null; const mods = l.locked ? l.mods : [...baseMods, noteMod].filter(Boolean).join(" · "); const isActive = !l.locked && editingIdx === i; const currentLineType = normalizedItemTypes.find(t => t.id === l.lineTypeId); const lineItemTypes = currentLineType && !activeItemTypes.some(t => t.id === currentLineType.id) ? [...activeItemTypes, currentLineType] : activeItemTypes; return (
{l.glyph}
!l.locked && setEditingIdx(i)}>
{l.name}
{mods || (!addOnMods.length && Tap to customize)} {l.locked && · existing} {addOnMods.map(addOn => (
{addOn}
))}
{lineItemTypes.length > 0 && ( )} {lineItemTypes.length === 0 && l.locked && l.lineTypeName && l.lineTypeName !== "Regular Sale" && (
{l.lineTypeName}
)}
{l.qty}
${lineTotal(l).toFixed(2)} removeLine(i)}>Remove
); })}
Subtotal${money(subtotal)}
Tax${money(tax)}
Discount {appliedDiscount > 0 ? `−$${money(appliedDiscount)}${discountType === "percent" ? ` (${money(effectiveDiscountValue).replace(/\.00$/, "")}%)` : ""}` : "$0.00"} {appliedDiscount > 0 && ( )}
{editingDiscount && (
{discountType === "fixed" ? "Fixed amount" : "Percent discount"}
{(discountType === "fixed" ? fixedDiscountSuggestions : percentDiscountSuggestions).map(value => ( ))}
{discountType === "fixed" ? "$" : "%"} setDiscountInput("")} onChange={e => setDiscountInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") { applyDiscountValue(parseFloat(discountInput)); setEditingDiscount(false); } if (e.key === "Escape") setEditingDiscount(false); }} />
)} {priceDelta !== 0 && (
{priceDelta < 0 ? "Custom total adjustment" : "Custom total surcharge"} {priceDelta < 0 ? `−$${Math.abs(priceDelta).toFixed(2)}` : `+$${priceDelta.toFixed(2)}`}
)}
Total {editingTotal ? ( $ setTotalInput(e.target.value)} onBlur={() => { const val = parseFloat(totalInput); if (!isNaN(val) && val >= 0) setPriceOverride(+val.toFixed(2)); else setPriceOverride(null); setEditingTotal(false); }} onKeyDown={e => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") { setPriceOverride(null); setEditingTotal(false); } }} /> ) : ( ${money(finalTotal)} {priceOverride != null && ( )} )}
); }; // ============================================================ // Main Orders page // ============================================================ const ORDERS_FILTER_STORAGE_KEY = "teaGangOrdersFiltersV1"; const ORDERS_FILTER_CHANGED_EVENT = "teaGangOrdersFiltersChanged"; const ORDERS_FILTER_PREF_KEY = "ordersFiltersV1"; const ORDERS_SORT_STORAGE_KEY = "teaGangOrdersSortV1"; const ORDERS_RECEIPT_SETTINGS_STORAGE_KEY = "teaGangOrdersReceiptSettingsV1"; const PRINT_BRIDGE_URL = "http://127.0.0.1:8766/print"; const DASHBOARD_FILTER_STORAGE_KEY_FOR_ORDER_CARDS = "teaGangDashboardFiltersV1"; const DEFAULT_ORDERS_SORT = { ordersSortDir: "desc", chipsSort: "count", chipsSortDir: "desc", detailSort: "count", detailSortDir: "desc", showCardMods: true, cardCategoryStyle: "lines", }; const readOrdersSort = () => { try { const saved = JSON.parse(window.localStorage.getItem(ORDERS_SORT_STORAGE_KEY) || "{}"); return { ordersSortDir: saved.ordersSortDir === "asc" ? "asc" : "desc", chipsSort: saved.chipsSort === "alpha" ? "alpha" : "count", chipsSortDir: saved.chipsSortDir === "asc" ? "asc" : "desc", detailSort: saved.detailSort === "alpha" ? "alpha" : "count", detailSortDir: saved.detailSortDir === "asc" ? "asc" : "desc", showCardMods: saved.showCardMods !== false, cardCategoryStyle: saved.cardCategoryStyle === "labels" ? "labels" : "lines", }; } catch { return { ...DEFAULT_ORDERS_SORT }; } }; const DEFAULT_RECEIPT_SETTINGS = { paperWidth: "80", showOrderNumber: true, showOrderType: true, showScheduledTime: true, showCustomer: true, showNote: true, showItemDetails: false, showThankYou: true, footer: "Thank you!", }; const readReceiptSettings = () => { try { const saved = JSON.parse(window.localStorage.getItem(ORDERS_RECEIPT_SETTINGS_STORAGE_KEY) || "{}"); return { ...DEFAULT_RECEIPT_SETTINGS, ...saved }; } catch { return { ...DEFAULT_RECEIPT_SETTINGS }; } }; // Maps store-wide receipt settings (store_settings table) <-> local receiptSettings keys const RECEIPT_SETTING_DB_COLUMNS = { paperWidth: "receipt_paper_width", showOrderNumber: "receipt_show_order_number", showOrderType: "receipt_show_order_type", showScheduledTime: "receipt_show_scheduled_time", showCustomer: "receipt_show_customer", showNote: "receipt_show_note", showItemDetails: "receipt_show_item_details", showThankYou: "receipt_show_thank_you", footer: "receipt_footer_text", }; const receiptSettingsFromStoreSettings = (settings) => { const next = {}; for (const [key, column] of Object.entries(RECEIPT_SETTING_DB_COLUMNS)) { if (settings && Object.prototype.hasOwnProperty.call(settings, column)) { next[key] = settings[column]; } } return next; }; const readDashboardCategoryOrderForOrderCards = () => { try { const saved = JSON.parse(window.localStorage.getItem(DASHBOARD_FILTER_STORAGE_KEY_FOR_ORDER_CARDS) || "{}"); return Array.isArray(saved.reportCategoryOrder) ? saved.reportCategoryOrder.filter(Boolean) : []; } catch { return []; } }; const ORDERS_DATE_FILTERS = new Set(["all", "today", "week", "month", "custom-day", "custom-week", "custom-month", "custom-range"]); const ORDERS_CHANNEL_FILTERS = new Set(["all", "pickup", "delivery"]); const DEFAULT_ORDERS_FILTERS = { dateFilter: "today", dateBasis: "scheduled", customDate: "", customRange: { from: "", to: "" }, channelFilter: "all", sourceFilter: "all", query: "", collapseAllByDefault: true, }; const normalizeOrdersFilters = (saved = {}) => ({ dateFilter: ORDERS_DATE_FILTERS.has(saved.dateFilter) || String(saved.dateFilter || "").startsWith("custom-range:") ? saved.dateFilter : "today", customDate: typeof saved.customDate === "string" ? saved.customDate : "", customRange: saved.customRange && typeof saved.customRange === "object" ? { from: saved.customRange.from || "", to: saved.customRange.to || "" } : { from: "", to: "" }, dateBasis: saved.dateBasis === "created" ? "created" : "scheduled", channelFilter: ORDERS_CHANNEL_FILTERS.has(saved.channelFilter) ? saved.channelFilter : "all", sourceFilter: typeof saved.sourceFilter === "string" ? saved.sourceFilter : "all", query: typeof saved.query === "string" ? saved.query : "", collapseAllByDefault: saved.collapseAllByDefault !== false, }); const readOrdersFilters = () => { try { const raw = window.localStorage.getItem(ORDERS_FILTER_STORAGE_KEY); if (!raw) return { ...DEFAULT_ORDERS_FILTERS, customRange: { ...DEFAULT_ORDERS_FILTERS.customRange } }; const saved = raw ? JSON.parse(raw) : {}; return normalizeOrdersFilters(saved); } catch { return { ...DEFAULT_ORDERS_FILTERS, customRange: { ...DEFAULT_ORDERS_FILTERS.customRange } }; } }; const buildOrdersFilters = ({ dateFilter, dateBasis, customDate, customRange, channelFilter, sourceFilter, query, collapseAllByDefault, }) => ({ dateFilter, dateBasis, customDate, customRange, channelFilter, sourceFilter, query, collapseAllByDefault, }); const Orders = () => { const initialFilters = React.useMemo(readOrdersFilters, []); const [orders, setOrders] = React.useState([]); const [menuItems, setMenuItems] = React.useState([]); const [categories, setCategories] = React.useState([{ id: "all", label: "All", count: 0 }]); const [customers, setCustomers] = React.useState([]); const [orderSources, setOrderSources] = React.useState([]); const [drinkOptions, setDrinkOptions] = React.useState([]); const [orderItemTypes, setOrderItemTypes] = React.useState([]); const [nextNumber, setNextNumber] = React.useState(1); const [selectedId, setSelectedId] = React.useState(null); const [modalOpen, setModalOpen] = React.useState(false); const [editingOrder, setEditingOrder] = React.useState(null); const [dateFilter, setDateFilter] = React.useState(initialFilters.dateFilter); const [dateBasis, setDateBasis] = React.useState(initialFilters.dateBasis); const [customDate, setCustomDate] = React.useState(initialFilters.customDate); const [customRange, setCustomRange] = React.useState(initialFilters.customRange); const [customDateRanges, setCustomDateRanges] = React.useState(() => window.TeaGangCustomDateRanges?.readLocal?.() || []); const [dateDialog, setDateDialog] = React.useState(null); const [moving, setMoving] = React.useState(false); const [groupMenu, setGroupMenu] = React.useState(null); // { top, right, colId, list } const [groupSummary, setGroupSummary] = React.useState(null); // { customer, list } const [collapsedGroups, setCollapsedGroups] = React.useState(new Set()); // keys: `${colId}__${groupKey}` const [collapseAllByDefault, setCollapseAllByDefault] = React.useState(initialFilters.collapseAllByDefault); const [channelFilter, setChannelFilter] = React.useState(initialFilters.channelFilter); const [sourceFilter, setSourceFilter] = React.useState(initialFilters.sourceFilter); const dashboardCategoryOrder = React.useMemo(readDashboardCategoryOrderForOrderCards, []); const initialSort = React.useMemo(readOrdersSort, []); const [ordersSortDir, setOrdersSortDir] = React.useState(initialSort.ordersSortDir); const [chipsSort, setChipsSort] = React.useState(initialSort.chipsSort); const [chipsSortDir, setChipsSortDir] = React.useState(initialSort.chipsSortDir); const [detailSort, setDetailSort] = React.useState(initialSort.detailSort); const [detailSortDir, setDetailSortDir] = React.useState(initialSort.detailSortDir); const [showCardMods, setShowCardMods] = React.useState(initialSort.showCardMods); const [cardCategoryStyle, setCardCategoryStyle] = React.useState(initialSort.cardCategoryStyle); const [receiptSettings, setReceiptSettings] = React.useState(readReceiptSettings); const receiptSettingsLoadedRef = React.useRef(false); const [printingOrderId, setPrintingOrderId] = React.useState(null); const [printerIp, setPrinterIp] = React.useState(""); const [printerIpSaving, setPrinterIpSaving] = React.useState(false); const [printerIpError, setPrinterIpError] = React.useState(""); const [printNotice, setPrintNotice] = React.useState(null); const [printPreviewOrder, setPrintPreviewOrder] = React.useState(null); const previewCanvasRef = React.useRef(null); const previewFrameRef = React.useRef(null); const [previewScale, setPreviewScale] = React.useState(0.72); const [previewContentHeight, setPreviewContentHeight] = React.useState(760); const printNoticeTimerRef = React.useRef(null); const [sortPanelOpen, setSortPanelOpen] = React.useState(false); const sortPanelRef = React.useRef(null); const sortPrefsLoadedRef = React.useRef(false); const filtersPrefsLoadedRef = React.useRef(false); const ordersLoadSeqRef = React.useRef(0); const showPrintNotice = React.useCallback((message, title = "Print warning") => { if (printNoticeTimerRef.current) window.clearTimeout(printNoticeTimerRef.current); setPrintNotice({ id: Date.now(), title, message }); printNoticeTimerRef.current = window.setTimeout(() => setPrintNotice(null), 5000); }, []); React.useEffect(() => { if (!sortPanelOpen) return; const handler = (e) => { if (!sortPanelRef.current?.contains(e.target)) setSortPanelOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [sortPanelOpen]); React.useEffect(() => () => { if (printNoticeTimerRef.current) window.clearTimeout(printNoticeTimerRef.current); }, []); // Load sort prefs from Supabase on mount (remote wins over localStorage) React.useEffect(() => { const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.fetchUserPreferences) { sortPrefsLoadedRef.current = true; return; } let disposed = false; backend.fetchUserPreferences("web").then(remote => { if (disposed) return; const saved = remote?.ordersSortV1; if (!saved) return; if (saved.ordersSortDir === "asc" || saved.ordersSortDir === "desc") setOrdersSortDir(saved.ordersSortDir); if (saved.chipsSort === "alpha" || saved.chipsSort === "count") setChipsSort(saved.chipsSort); if (saved.chipsSortDir === "asc" || saved.chipsSortDir === "desc") setChipsSortDir(saved.chipsSortDir); if (saved.detailSort === "alpha" || saved.detailSort === "count") setDetailSort(saved.detailSort); if (saved.detailSortDir === "asc" || saved.detailSortDir === "desc") setDetailSortDir(saved.detailSortDir); if (typeof saved.showCardMods === "boolean") setShowCardMods(saved.showCardMods); if (saved.cardCategoryStyle === "labels" || saved.cardCategoryStyle === "lines") setCardCategoryStyle(saved.cardCategoryStyle); }).catch(err => { console.warn("Could not load sort prefs from Supabase.", err); }).finally(() => { if (!disposed) sortPrefsLoadedRef.current = true; }); return () => { disposed = true; }; }, []); // eslint-disable-line // Save sort prefs to localStorage immediately and Supabase with debounce React.useEffect(() => { const sortPrefs = { ordersSortDir, chipsSort, chipsSortDir, detailSort, detailSortDir, showCardMods, cardCategoryStyle }; window.localStorage.setItem(ORDERS_SORT_STORAGE_KEY, JSON.stringify(sortPrefs)); const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.fetchUserPreferences || !backend.upsertUserPreferences) return; if (!sortPrefsLoadedRef.current) return; const timer = window.setTimeout(async () => { try { const remote = await backend.fetchUserPreferences("web") || {}; await backend.upsertUserPreferences({ ...remote, ordersSortV1: sortPrefs }, "web"); } catch (err) { console.warn("Could not save sort prefs to Supabase.", err); } }, 1000); return () => window.clearTimeout(timer); }, [ordersSortDir, chipsSort, chipsSortDir, detailSort, detailSortDir, showCardMods, cardCategoryStyle]); // Save receipt settings to localStorage as an offline cache. React.useEffect(() => { window.localStorage.setItem(ORDERS_RECEIPT_SETTINGS_STORAGE_KEY, JSON.stringify(receiptSettings)); }, [receiptSettings]); // Load printer IP and receipt settings from the store-wide settings on mount // so all devices/users for this store share the same printing configuration. React.useEffect(() => { let disposed = false; const loadStoreSettings = async () => { const backend = window.TeaGangBackend; const localIp = window.localStorage.getItem("teaGangPrinterIp") || ""; if (!backend?.enabled || !backend.fetchStoreSettings) { if (!disposed) setPrinterIp(localIp); receiptSettingsLoadedRef.current = true; return; } try { const settings = await backend.fetchStoreSettings(); if (disposed) return; const nextIp = settings?.printer_ip || ""; setPrinterIp(nextIp); if (nextIp) window.localStorage.setItem("teaGangPrinterIp", nextIp); else window.localStorage.removeItem("teaGangPrinterIp"); setPrinterIpError(""); setReceiptSettings(prev => ({ ...prev, ...receiptSettingsFromStoreSettings(settings) })); } catch (err) { console.warn("Could not load printer IP.", err); if (!disposed) { setPrinterIp(localIp); setPrinterIpError(err.message || "Could not load printer IP."); } } finally { if (!disposed) receiptSettingsLoadedRef.current = true; } }; loadStoreSettings(); return () => { disposed = true; }; }, []); // Push receipt setting changes to the store-wide settings, debounced. React.useEffect(() => { if (!receiptSettingsLoadedRef.current) return; const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.updateStoreSettings) return; const payload = {}; for (const [key, column] of Object.entries(RECEIPT_SETTING_DB_COLUMNS)) { payload[column] = receiptSettings[key]; } const timer = window.setTimeout(() => { backend.updateStoreSettings(payload).catch(err => console.warn("Could not save receipt settings.", err)); }, 600); return () => window.clearTimeout(timer); }, [receiptSettings]); const orderNumberValue = (order) => Number(order.order_number || String(order.id || "").replace(/\D/g, "") || 0); const addedDateValue = (order) => { const ts = order.created_at ? new Date(order.created_at).getTime() : NaN; return Number.isFinite(ts) ? ts : orderNumberValue(order); }; const completedDateValue = (order) => { const ts = order.completed_at ? new Date(order.completed_at).getTime() : NaN; return Number.isFinite(ts) ? ts : addedDateValue(order); }; const scheduledSortParts = (order) => { if (!order.scheduled_at) return { scheduled: false, day: 0, hasTime: false, time: 0 }; const d = new Date(order.scheduled_at); if (Number.isNaN(d.getTime())) return { scheduled: false, day: 0, hasTime: false, time: 0 }; const day = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); const hasTime = !isDateOnlyScheduledTime(d); return { scheduled: true, day, hasTime, time: hasTime ? d.getHours() * 60 + d.getMinutes() : Infinity, }; }; const compareScheduledDate = (a, b, asc) => { const sa = scheduledSortParts(a); const sb = scheduledSortParts(b); if (sa.scheduled !== sb.scheduled) return sa.scheduled ? -1 : 1; const dir = asc ? 1 : -1; if (!sa.scheduled && !sb.scheduled) return (addedDateValue(a) - addedDateValue(b)) * dir; if (sa.day !== sb.day) return (sa.day - sb.day) * dir; if (sa.hasTime !== sb.hasTime) return sa.hasTime ? -1 : 1; if (sa.time !== sb.time) return (sa.time - sb.time) * dir; return (addedDateValue(a) - addedDateValue(b)) * dir; }; const applyOrdersSort = (list, status) => { const asc = ordersSortDir === "asc"; return [...list].sort((a, b) => { if (status === "completed") { const cmp = completedDateValue(a) - completedDateValue(b); return asc ? cmp : -cmp; } if (dateBasis === "scheduled") return compareScheduledDate(a, b, asc); const cmp = addedDateValue(a) - addedDateValue(b); return asc ? cmp : -cmp; }); }; const applyChipsSort = (entries) => { const asc = chipsSortDir === "asc"; return [...entries].sort(([nA, qA], [nB, qB]) => chipsSort === "alpha" ? (asc ? nA.localeCompare(nB) : nB.localeCompare(nA)) : (asc ? qA - qB : qB - qA) ); }; const applyDetailSort = (items) => { const asc = detailSortDir === "asc"; return [...items].sort((a, b) => detailSort === "alpha" ? (asc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)) : (asc ? (a.qty || 1) - (b.qty || 1) : (b.qty || 1) - (a.qty || 1)) ); }; const menuItemForOrderItem = (item) => menuItems.find(m => m.id === item.menuItemId || m.id === item.menu_item_id || m.name === item.name ); const categoryForOrderItem = (item) => { const menuItem = menuItemForOrderItem(item); const categoryId = menuItem?.cat || menuItem?.category_id || menuItem?.category || item.cat || item.category_id || item.category || "uncategorized"; return categories.find(c => c.id === categoryId) || { id: categoryId, label: "Uncategorized", sort_order: 999999 }; }; const categoryRankForOrderItem = (item) => { const cat = categoryForOrderItem(item); const savedIndex = dashboardCategoryOrder.indexOf(cat.id); if (savedIndex !== -1) return savedIndex; const sortOrder = Number(cat.sort_order); return 100000 + (Number.isFinite(sortOrder) ? sortOrder : 999999); }; const applyCardItemSort = (items) => { const base = applyDetailSort(items); const baseIndex = new Map(base.map((item, index) => [item, index])); return [...base].sort((a, b) => { const catCmp = categoryRankForOrderItem(a) - categoryRankForOrderItem(b); if (catCmp !== 0) return catCmp; return baseIndex.get(a) - baseIndex.get(b); }); }; const groupCardItemsByCategory = (items) => { const groups = []; const groupIndex = {}; applyCardItemSort(items).forEach(item => { const cat = categoryForOrderItem(item); if (!(cat.id in groupIndex)) { groupIndex[cat.id] = groups.length; groups.push({ id: cat.id, label: cat.label || "Uncategorized", items: [] }); } groups[groupIndex[cat.id]].items.push(item); }); return groups; }; const groupSummaryItemsByCategory = (groupOrders, predicate = () => true) => { const byName = {}; groupOrders.forEach(o => visibleOrderItems(o.items).filter(predicate).forEach(item => { if (!byName[item.name]) byName[item.name] = { ...item, qty: 0, line_total: undefined, lineTotal: undefined }; byName[item.name].qty += item.qty || 1; })); return groupCardItemsByCategory(Object.values(byName)); }; const toggleGroup = (key) => { setCollapseAllByDefault(false); setCollapsedGroups(prev => { const next = new Set(prev); next.has(key) ? next.delete(key) : next.add(key); return next; }); }; const toggleColAll = (colId, groups) => { const keys = groups.map(g => `${colId}__${g.key}`); const allCollapsed = keys.every(k => collapsedGroups.has(k)); setCollapseAllByDefault(false); setCollapsedGroups(prev => { const next = new Set(prev); if (allCollapsed) { keys.forEach(k => next.delete(k)); } else { keys.forEach(k => next.add(k)); } return next; }); }; const groupedKeysForColumn = (colId, source) => { const groups = []; const seen = new Set(); source .filter(o => o.status === colId) .forEach(o => { const name = o.customer || "Walk-in guest"; const isAnon = !o.customer || o.customer === "Walk-in guest" || o.customer === "Walk-in"; const key = isAnon ? `anon-${o.dbId || o.id}` : name; if (!seen.has(key)) { seen.add(key); groups.push(`${colId}__${key}`); } }); return groups; }; const groupedKeysForAllColumns = (source = filtered) => cols.flatMap(col => groupedKeysForColumn(col.id, source)); const toggleAllColumns = () => { const keys = groupedKeysForAllColumns(); if (!keys.length) return; const allCollapsed = keys.every(k => collapsedGroups.has(k)); setCollapseAllByDefault(!allCollapsed); setCollapsedGroups(prev => { const next = new Set(prev); if (allCollapsed) keys.forEach(k => next.delete(k)); else keys.forEach(k => next.add(k)); return next; }); }; const [dialog, setDialog] = React.useState(null); // { title, message, onConfirm } const showConfirm = (title, message, onConfirm, confirmLabel, cancelLabel) => setDialog({ title, message, onConfirm, confirmLabel, cancelLabel }); const [query, setQuery] = React.useState(initialFilters.query); React.useEffect(() => { let disposed = false; const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.fetchUserPreferences) { filtersPrefsLoadedRef.current = true; return; } backend.fetchUserPreferences("web").then(remote => { if (disposed) return; const saved = remote?.[ORDERS_FILTER_PREF_KEY]; if (saved && typeof saved === "object") { const next = normalizeOrdersFilters(saved); setDateFilter(next.dateFilter); setDateBasis(next.dateBasis); setCustomDate(next.customDate); setCustomRange(next.customRange); setChannelFilter(next.channelFilter); setSourceFilter(next.sourceFilter); setQuery(next.query); setCollapseAllByDefault(next.collapseAllByDefault); } }).catch(err => { console.warn("Could not load order filter prefs from Supabase.", err); }).finally(() => { if (!disposed) filtersPrefsLoadedRef.current = true; }); return () => { disposed = true; }; }, []); // eslint-disable-line const notifyOrder = React.useCallback((title, message, tone = "success") => { window.TeaGangNotify?.(title, message, tone); }, []); const orderNoticeSubject = (order) => `${order?.id || "Order"} of ${order?.customer || "Walk-in guest"}`; const orderGroupNoticeSubject = (groupOrders) => { const name = groupOrders[0]?.customer || "Walk-in guest"; const codes = groupOrders.map(o => o.id).filter(Boolean).join(", "); return `${codes || `${groupOrders.length} orders`} of ${name}`; }; const stockAffectingStatuses = new Set(["ready", "completed"]); const orderAffectsStock = (order) => stockAffectingStatuses.has(order?.status); const confirmStockRollback = (count = 1) => { const subject = count === 1 ? "this order" : `${count} orders`; return window.confirm( `Rollback stock count for ${subject}?\n\nThis adds the order item quantities back to menu stock count.` ); }; const statusNoticeVerb = (status) => ({ ready: "ready", completed: "completed", pending: "pending", }[status] || "updated"); const beginLocalOrderMutation = React.useCallback(() => { window.TeaGangSuppressOrderRealtime?.(); }, []); const rangeRef = React.useRef({}); const getRange = (filter, date) => { const namedRange = window.TeaGangCustomDateRanges?.findByFilter?.(customDateRanges, filter); if (namedRange) return window.TeaGangCustomDateRanges.range(namedRange); const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const day = 864e5; switch (filter) { case "all": return {}; case "today": return { dateFrom: today, dateTo: new Date(today.getTime() + day) }; case "week": { const s = new Date(today); s.setDate(today.getDate() - ((today.getDay() || 7) - 1)); return { dateFrom: s, dateTo: new Date(today.getTime() + day) }; } case "month": return { dateFrom: new Date(now.getFullYear(), now.getMonth()), dateTo: new Date(today.getTime() + day) }; case "custom-day": if (!date) return {}; { const d = new Date(date + "T00:00:00"); return { dateFrom: d, dateTo: new Date(d.getTime() + day) }; } case "custom-week": if (!date) return {}; { const d = new Date(date + "T00:00:00"); const s = new Date(d); s.setDate(d.getDate() - ((d.getDay() || 7) - 1)); return { dateFrom: s, dateTo: new Date(s.getTime() + 7 * day) }; } case "custom-month": if (!date) return {}; { const [y, m] = date.split("-").map(Number); return { dateFrom: new Date(y, m - 1), dateTo: new Date(y, m) }; } case "custom-range": { if (!customRange.from || !customRange.to || customRange.from > customRange.to) return {}; const from = new Date(customRange.from + "T00:00:00"); const to = new Date(customRange.to + "T00:00:00"); return { dateFrom: from, dateTo: new Date(to.getTime() + day) }; } default: return {}; } }; React.useEffect(() => { let disposed = false; const loadRanges = async () => { const ranges = await window.TeaGangCustomDateRanges?.load?.(); if (!disposed) setCustomDateRanges(ranges || []); }; loadRanges(); const onChanged = () => loadRanges(); window.addEventListener(window.TeaGangCustomDateRanges?.event || "teaGangCustomDateRangesChanged", onChanged); return () => { disposed = true; window.removeEventListener(window.TeaGangCustomDateRanges?.event || "teaGangCustomDateRangesChanged", onChanged); }; }, []); React.useEffect(() => { rangeRef.current = getRange(dateFilter, customDate); loadOrders(); }, [dateFilter, dateBasis, customDate, customRange, customDateRanges]); // eslint-disable-line React.useEffect(() => { const filterPrefs = buildOrdersFilters({ dateFilter, dateBasis, customDate, customRange, channelFilter, sourceFilter, query, collapseAllByDefault, }); window.localStorage.setItem(ORDERS_FILTER_STORAGE_KEY, JSON.stringify(filterPrefs)); window.dispatchEvent(new CustomEvent(ORDERS_FILTER_CHANGED_EVENT, { detail: filterPrefs })); const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.fetchUserPreferences || !backend.upsertUserPreferences) return; if (!filtersPrefsLoadedRef.current) return; const timer = window.setTimeout(async () => { try { const remote = await backend.fetchUserPreferences("web") || {}; await backend.upsertUserPreferences({ ...remote, [ORDERS_FILTER_PREF_KEY]: filterPrefs }, "web"); } catch (err) { console.warn("Could not save order filter prefs to Supabase.", err); } }, 1000); return () => window.clearTimeout(timer); }, [dateFilter, dateBasis, customDate, customRange, channelFilter, sourceFilter, query, collapseAllByDefault]); const loadOrderItemTypes = React.useCallback(async () => { const backend = window.TeaGangBackend; if (!backend?.enabled || !backend.fetchOrderItemTypes) { setOrderItemTypes(prev => prev.length ? prev : FALLBACK_ORDER_ITEM_TYPES); return FALLBACK_ORDER_ITEM_TYPES; } try { const rows = await backend.fetchOrderItemTypes(); const nextRows = rows || []; setOrderItemTypes(nextRows); return nextRows; } catch (error) { console.warn("Order item types unavailable.", error); setOrderItemTypes(prev => prev); return []; } }, []); const loadOrders = React.useCallback(async () => { const backend = window.TeaGangBackend; if (!backend?.enabled) return; const loadSeq = ordersLoadSeqRef.current + 1; ordersLoadSeqRef.current = loadSeq; try { const [orderRows, menu, customerRows, sourceRows, optionRows, itemTypeRows, orderNumber] = await Promise.all([ backend.fetchOrders({ ...rangeRef.current, dateBasis }), backend.fetchMenu(), backend.searchCustomers?.({ query: "", limit: 50 }) || backend.fetchCustomers(), backend.fetchOrderSources(), backend.fetchDrinkOptions(), loadOrderItemTypes(), backend.nextOrderNumber(), ]); if (loadSeq !== ordersLoadSeqRef.current) return; setOrders(orderRows); setMenuItems(menu.items || []); setCategories(menu.cats || [{ id: "all", label: "All", count: 0 }]); setCustomers(customerRows || []); setOrderSources(sourceRows || []); setDrinkOptions(optionRows || []); setOrderItemTypes(itemTypeRows || []); setNextNumber(orderNumber || 1); if (collapseAllByDefault) { setCollapsedGroups(new Set(groupedKeysForAllColumns(orderRows || []))); } } catch (error) { if (loadSeq !== ordersLoadSeqRef.current) return; console.error("Orders backend unavailable.", error); setOrders([]); } }, [collapseAllByDefault, dateBasis, loadOrderItemTypes]); React.useEffect(() => { loadOrders(); }, [loadOrders]); React.useEffect(() => { const backend = window.TeaGangBackend; if (!backend?.subscribeToStoreData) return undefined; let disposed = false; let subscription = null; const refreshSoon = () => { if (!disposed) { loadOrders(); } }; backend .subscribeToStoreData(refreshSoon, ["orders", "order_items", "store_order_item_types"]) .then((nextSubscription) => { if (disposed) { nextSubscription?.unsubscribe?.(); return; } subscription = nextSubscription; }) .catch((error) => { console.warn("Orders realtime unavailable.", error); }); return () => { disposed = true; subscription?.unsubscribe?.(); }; }, [loadOrders]); const selected = orders.find(o => (o.dbId || o.id) === selectedId); const selectedItems = React.useMemo(() => { if (!selected?.items?.length) return selected?.items || []; return applyDetailSort(visibleOrderItems(selected.items)); }, [selected, detailSort, detailSortDir]); // eslint-disable-line const selectedRegularItems = React.useMemo( () => selectedItems.filter(isRegularOrderItem), [selectedItems] ); const selectedPromotionItems = React.useMemo( () => selectedItems.filter(item => !isRegularOrderItem(item)), [selectedItems] ); const selectedRegularGroups = React.useMemo( () => groupCardItemsByCategory(selectedRegularItems), [selectedRegularItems, cardCategoryStyle, dashboardCategoryOrder, menuItems, categories, detailSort, detailSortDir] // eslint-disable-line ); const selectedPromotionGroups = React.useMemo( () => groupCardItemsByCategory(selectedPromotionItems), [selectedPromotionItems, cardCategoryStyle, dashboardCategoryOrder, menuItems, categories, detailSort, detailSortDir] // eslint-disable-line ); const renderDrawerItem = (it, index, keyPrefix, promotion = false) => { const menuItem = menuItemForOrderItem(it); const imageUrl = it.image_url || menuItem?.image_url || null; const imageZoom = Number(it.image_zoom ?? menuItem?.image_zoom ?? 1); const itemId = it.menuItemId || it.menu_item_id || menuItem?.id || it.id || it.name; return (
{imageUrl ? : (it.glyph || glyphForName(it.name, menuItems))}
{it.name}
{showCardMods && getItemMods(it) &&
{getItemMods(it)}
}
×{it.qty}
${orderItemLineTotal(it).toFixed(2)}
); }; const updateReceiptSetting = (key, value) => { setReceiptSettings(prev => ({ ...prev, [key]: value })); }; const updatePrinterIp = (value) => { setPrinterIp(value); setPrinterIpError(""); }; const savePrinterIp = async () => { const backend = window.TeaGangBackend; const nextIp = String(printerIp || "").trim(); setPrinterIpSaving(true); setPrinterIpError(""); try { if (backend?.enabled && backend.updateStoreSettings) { const saved = await backend.updateStoreSettings({ printer_ip: nextIp }); const savedIp = saved?.printer_ip || ""; setPrinterIp(savedIp); if (savedIp) window.localStorage.setItem("teaGangPrinterIp", savedIp); else window.localStorage.removeItem("teaGangPrinterIp"); } else { setPrinterIp(nextIp); if (nextIp) window.localStorage.setItem("teaGangPrinterIp", nextIp); else window.localStorage.removeItem("teaGangPrinterIp"); } } catch (err) { console.warn("Could not save printer IP.", err); setPrinterIpError(err.message || "Could not save printer IP."); } finally { setPrinterIpSaving(false); } }; const loadLatestPrinterIp = async () => { const backend = window.TeaGangBackend; const fallbackIp = String(printerIp || window.localStorage.getItem("teaGangPrinterIp") || "").trim(); if (!backend?.enabled || !backend.fetchStoreSettings) return fallbackIp; try { const settings = await backend.fetchStoreSettings(); const latestIp = String(settings?.printer_ip || "").trim(); setPrinterIp(latestIp); if (latestIp) window.localStorage.setItem("teaGangPrinterIp", latestIp); else window.localStorage.removeItem("teaGangPrinterIp"); setPrinterIpError(""); return latestIp || fallbackIp; } catch (err) { console.warn("Could not refresh printer IP before printing.", err); setPrinterIpError(err.message || "Could not load printer IP."); return fallbackIp; } }; const receiptEscape = (value) => String(value ?? "").replace(/[&<>"']/g, ch => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'", }[ch])); const receiptItemLines = (items, showDetails) => items.map(item => { const mods = showDetails ? getItemMods(item) : null; return `
${receiptEscape(item.qty || 1)} × ${receiptEscape(item.name)} $${money(orderItemLineTotal(item))}
${mods ? `
${receiptEscape(mods)}
` : ""}
`; }).join(""); const receiptItemsWithCategorySeparators = (items, showDetails) => { const groups = groupCardItemsByCategory(items); return groups.map((group, index) => ` ${index > 0 ? `
` : ""} ${receiptItemLines(group.items, showDetails)} `).join(""); }; const foldReceiptText = (value) => String(value ?? "") .replace(/đ/g, "d") .replace(/Đ/g, "D") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^\x20-\x7E\n]/g, ""); const escposText = (value) => Array.from(String(value ?? ""), ch => ch.charCodeAt(0) & 0xFF); const escposLine = (left, right = "", width = 42) => { const l = foldReceiptText(left); const r = foldReceiptText(right); if (!r) return `${l}\n`; const gap = Math.max(1, width - l.length - r.length); return `${l}${" ".repeat(gap)}${r}\n`; }; const pushEscposWrappedItem = (lines, qty, name, price, width = 42) => { const prefix = `${qty}x `; const right = `$${money(price)}`; const available = Math.max(8, width - prefix.length - right.length - 1); const cleanName = foldReceiptText(name); const words = cleanName.split(/\s+/).filter(Boolean); let current = ""; words.forEach(word => { const next = current ? `${current} ${word}` : word; if (next.length > available && current) { lines.push(`${prefix}${current}\n`); current = word; } else { current = next; } }); if (!current) current = cleanName.slice(0, available); lines.push(escposLine(`${prefix}${current}`, right, width)); }; const buildDirectReceiptBytes = (order) => { const settings = receiptSettings; const sortedItems = applyDetailSort(visibleOrderItems(order.items)); const regular = sortedItems.filter(isRegularOrderItem); const promotion = sortedItems.filter(item => !isRegularOrderItem(item)); const scheduled = formatScheduledDateTime(order.scheduled_at); const orderNumber = order.order_number || String(order.id || "").replace(/\D/g, "") || order.id; const promoLoss = promotion.reduce((sum, item) => { const saved = Number(item.line_discount_amount || item.lineDiscountAmount || 0); if (saved > 0) return sum + saved; const qty = Number(item.qty || 1); const original = Number(item.original_unit_price ?? item.originalUnitPrice ?? item.price ?? 0); const adjusted = Number(item.adjusted_unit_price ?? item.adjustedUnitPrice ?? item.price ?? 0); return sum + Math.max(0, original - adjusted) * qty; }, 0); const discount = orderDiscount(order); const displaySubtotal = Number(order.total || 0) + promoLoss + discount; const storeName = window.localStorage.getItem("teaGangStoreName") || "The Tea Gang"; const lines = []; const separator = "-".repeat(42); const sectionSeparator = "- ".repeat(21).trim(); const addItems = (items, showDetails) => { const groups = groupCardItemsByCategory(items); groups.forEach((group, index) => { if (index > 0) lines.push(`${separator}\n`); group.items.forEach(item => { pushEscposWrappedItem(lines, item.qty || 1, item.name, orderItemLineTotal(item)); const mods = showDetails ? getItemMods(item) : null; if (mods) lines.push(` ${foldReceiptText(mods)}\n`); }); }); }; lines.push("\x1B\x40"); lines.push("\x1B\x61\x01"); lines.push("\x1B\x45\x01"); lines.push(`${foldReceiptText(storeName)}\n`); lines.push("\x1B\x45\x00"); lines.push("Customer Receipt\n\n"); lines.push("\x1B\x61\x00"); if (settings.showOrderNumber) lines.push(escposLine("Order #", orderNumber, 42)); if (settings.showOrderType) lines.push(escposLine("Type", order.channel === "delivery" ? "Delivery" : "Pick Up", 42)); if (settings.showScheduledTime && scheduled) lines.push(escposLine("Scheduled", scheduled, 42)); if (settings.showCustomer) lines.push(escposLine("Customer", order.customer || "Walk-in guest", 42)); if (settings.showNote && order.note) lines.push(escposLine("Note", order.note, 42)); lines.push(`${sectionSeparator}\n`); addItems(regular, settings.showItemDetails); if (promotion.length) { lines.push(`${sectionSeparator}\n`); lines.push("PROMOTIONS & COMPS\n"); addItems(promotion, false); } lines.push(`${sectionSeparator}\n`); if (promoLoss > 0 || discount > 0) lines.push(escposLine("SUBTOTAL", `$${money(displaySubtotal)}`, 42)); if (promoLoss > 0) lines.push(escposLine("PROMOS / COMPS", `-$${money(promoLoss)}`, 42)); if (discount > 0) lines.push(escposLine("DISCOUNT", `-${orderDiscountLabel(order)}`, 42)); lines.push(escposLine("TOTAL", `$${money(order.total || 0)}`, 42)); if (settings.showThankYou) { lines.push("\n\x1B\x61\x01"); lines.push(`${foldReceiptText(settings.footer || "Thank you!")}\n`); } lines.push("\n\n\n\x1D\x56\x42\x00"); return lines.flatMap(escposText); }; const buildReceiptHtml = (order, activePrinterIp = "", autoPrint = true) => { const settings = receiptSettings; const sortedItems = applyDetailSort(visibleOrderItems(order.items)); const regular = sortedItems.filter(isRegularOrderItem); const promotion = sortedItems.filter(item => !isRegularOrderItem(item)); const width = settings.paperWidth === "58" ? "58mm" : "80mm"; const previewWidth = "560px"; const scheduled = formatScheduledDateTime(order.scheduled_at); const orderNumber = order.order_number || String(order.id || "").replace(/\D/g, "") || order.id; const promoLoss = promotion.reduce((sum, item) => { const saved = Number(item.line_discount_amount || item.lineDiscountAmount || 0); if (saved > 0) return sum + saved; const qty = Number(item.qty || 1); const original = Number(item.original_unit_price ?? item.originalUnitPrice ?? item.price ?? 0); const adjusted = Number(item.adjusted_unit_price ?? item.adjustedUnitPrice ?? item.price ?? 0); return sum + Math.max(0, original - adjusted) * qty; }, 0); const discount = orderDiscount(order); const displaySubtotal = Number(order.total || 0) + promoLoss + discount; const storeName = window.localStorage.getItem("teaGangStoreName") || "The Tea Gang"; const orderTypeIcon = order.channel === "delivery" ? `` : ``; const cupIcon = ``; return ` ${receiptEscape(activePrinterIp ? `Printer ${activePrinterIp}` : "Printer not set")} · ${receiptEscape(order.id)} Receipt
${receiptEscape(storeName)}
Customer Receipt
${settings.showOrderNumber ? `
Order #${receiptEscape(orderNumber)}
` : ""} ${settings.showOrderType ? `
Type${orderTypeIcon}${receiptEscape(order.channel === "delivery" ? "Delivery" : "Pick Up")}
` : ""} ${settings.showScheduledTime && scheduled ? `
Scheduled${receiptEscape(scheduled)}
` : ""} ${settings.showCustomer ? `
Customer${receiptEscape(order.customer || "Walk-in guest")}
` : ""} ${settings.showNote && order.note ? `
Note${receiptEscape(order.note)}
` : ""}
${receiptItemsWithCategorySeparators(regular, settings.showItemDetails)} ${promotion.length ? `
PROMOTIONS & COMPS
${receiptItemsWithCategorySeparators(promotion, false)}` : ""}
${(promoLoss > 0 || discount > 0) ? `
SUBTOTAL$${money(displaySubtotal)}
` : ""} ${promoLoss > 0 ? `
PROMOS / COMPS-$${money(promoLoss)}
` : ""} ${discount > 0 ? `
DISCOUNT-${orderDiscountLabel(order)}
` : ""}
TOTAL$${money(order.total || 0)}
${settings.showThankYou ? `
${cupIcon}${receiptEscape(settings.footer || "Thank you!")}
` : ""}
${autoPrint ? `` : ""} `; }; const printReceipt = async (order) => { if (!order || printingOrderId) return false; setPrintingOrderId(order.dbId || order.id); try { const activePrinterIp = await loadLatestPrinterIp(); if (!activePrinterIp) { showPrintNotice("No printer IP set. Add it in Order settings."); return false; } const response = await fetch(PRINT_BRIDGE_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ip: activePrinterIp, port: 9100, bytes: buildDirectReceiptBytes(order), }), }); const result = await response.json().catch(() => ({})); if (!response.ok || result.ok === false) { throw new Error(result.error || "Print bridge failed."); } return true; } catch (err) { const message = err instanceof TypeError ? "Print bridge is not running." : (err.message || "Could not print directly."); showPrintNotice(message); return false; } finally { setTimeout(() => setPrintingOrderId(null), 500); } }; const openReceiptPrintPreview = async (order) => { if (!order) return; setPrintPreviewOrder(order); loadLatestPrinterIp(); }; // Scale the receipt preview to fill its canvas width without horizontal scrolling. React.useEffect(() => { if (!printPreviewOrder) return; setPreviewContentHeight(760); const el = previewCanvasRef.current; if (!el) return; const update = () => { const available = el.clientWidth - 24; // account for canvas padding setPreviewScale(Math.min(1, Math.max(0.4, available / 560))); }; update(); const ro = new ResizeObserver(update); ro.observe(el); return () => ro.disconnect(); }, [printPreviewOrder]); const handlePreviewLoad = () => { const doc = previewFrameRef.current?.contentDocument; const height = doc?.documentElement?.scrollHeight || doc?.body?.scrollHeight; if (height) setPreviewContentHeight(height); }; const openBrowserPrintPreview = async (order) => { if (!order) return; const activePrinterIp = await loadLatestPrinterIp(); const printWindow = window.open("", "_blank", "width=640,height=720"); if (!printWindow) { showPrintNotice("Could not open receipt preview. Allow popups for this site."); return; } printWindow.document.open(); printWindow.document.write(buildReceiptHtml(order, activePrinterIp)); printWindow.document.close(); }; const printTestReceipt = () => { const sample = { id: "TEST", customer: "Walk-in guest", channel: "pickup", source: "Counter", scheduled_at: new Date().toISOString(), total: 7, items: [{ id: "test", name: "Test Milk Tea", qty: 1, price: 7, line_total: 7, pricing_mode: "normal", line_type_name: "Regular Sale" }], }; printReceipt(sample); }; const cols = [ { id: "pending", title: "Pending", icon: "bell", hint: "Awaiting brew" }, { id: "ready", title: "Ready", icon: "check", hint: "Awaiting pickup" }, { id: "completed", title: "Completed", icon: "clock", hint: "Handed off" }, ]; // Search filter — matches customer name OR any order-item name (Vietnamese/accent insensitive) const q = normalizeVi(query.trim()); const searchFiltered = q ? orders.filter(o => normalizeVi(o.customer || "").includes(q) || normalizeVi(o.id || "").includes(q) || visibleOrderItems(o.items).some(it => normalizeVi(it.name || "").includes(q)) ) : orders; const filtered = searchFiltered.filter(o => { const channelOk = channelFilter === "all" || o.channel === channelFilter; const sourceOk = sourceFilter === "all" || o.source_id === sourceFilter || o.source === sourceFilter; return channelOk && sourceOk; }); const removeGroup = (groupOrders) => { if (moving) return; setGroupMenu(null); const name = groupOrders[0]?.customer || "Walk-in guest"; showConfirm( "Remove all orders?", `Remove all ${groupOrders.length} order${groupOrders.length > 1 ? "s" : ""} for ${name}? This cannot be undone.`, async () => { const stockOrders = groupOrders.filter(orderAffectsStock); const rollbackStock = stockOrders.length ? confirmStockRollback(stockOrders.length) : false; setMoving(true); beginLocalOrderMutation(); try { for (const o of groupOrders) { await window.TeaGangBackend.deleteOrder(o, { rollbackStock: rollbackStock && orderAffectsStock(o), }); } await loadOrders(); notifyOrder("Orders removed", `${orderGroupNoticeSubject(groupOrders)} are removed.`); } catch (e) { console.error("Could not remove group.", e); } finally { setMoving(false); setSelectedId(null); } }, "Remove all", "Keep" ); }; const moveGroup = async (groupOrders, status, payment) => { if (moving) return; setGroupMenu(null); setMoving(true); beginLocalOrderMutation(); try { for (const o of groupOrders) { await window.TeaGangBackend.updateOrderStatus(o, status, payment); } await loadOrders(); notifyOrder( "Orders updated", `${orderGroupNoticeSubject(groupOrders)} are ${statusNoticeVerb(status)}.` ); } catch (e) { console.error("Could not update group.", e); } finally { setMoving(false); } }; const move = async (id, next, payment) => { const order = orders.find(o => (o.dbId || o.id) === id); if (!order || moving) return; setMoving(true); beginLocalOrderMutation(); try { await window.TeaGangBackend.updateOrderStatus(order, next, payment); await loadOrders(); notifyOrder("Order updated", `${orderNoticeSubject(order)} is ${statusNoticeVerb(next)}.`); } catch (error) { console.error("Could not update order status.", error); } finally { setMoving(false); } }; const removeOrder = async (id) => { const order = orders.find(o => (o.dbId || o.id) === id); if (!order || moving) return; showConfirm( "Remove order?", `Remove ${order.id} of ${order.customer}? This cannot be undone.`, async () => { const rollbackStock = orderAffectsStock(order) ? confirmStockRollback(1) : false; setMoving(true); beginLocalOrderMutation(); try { await window.TeaGangBackend.deleteOrder(order, { rollbackStock }); await loadOrders(); notifyOrder("Order removed", `${orderNoticeSubject(order)} is removed.`); } catch (error) { console.error("Could not delete order.", error); } finally { setMoving(false); setSelectedId(null); } }, "Remove", "Keep" ); }; const nextStatus = (cur) => cur === "pending" ? "ready" : cur === "ready" ? "completed" : "completed"; const nextLabel = (cur) => cur === "pending" ? "Mark ready" : cur === "ready" ? "Hand off & complete" : "Completed"; const totalToday = orders.length; const inFlight = orders.filter(o => o.status !== "completed").length; const nextOrderNumber = nextNumber; const createOrder = async (newOrder) => { try { beginLocalOrderMutation(); const saved = await window.TeaGangBackend.saveOrder(newOrder); await loadOrders(); setSelectedId(saved.dbId || saved.id); notifyOrder("Order added", `${orderNoticeSubject(saved || newOrder)} is added.`); } catch (error) { console.error("Could not create order.", error); } setModalOpen(false); }; const updateOrder = async (updated) => { try { beginLocalOrderMutation(); await window.TeaGangBackend.saveOrder(updated); await loadOrders(); notifyOrder("Order edited", `${orderNoticeSubject(updated)} is edited.`); } catch (error) { console.error("Could not update order.", error); } setEditingOrder(null); setModalOpen(false); }; const startNewOrder = async () => { setEditingOrder(null); await loadOrderItemTypes(); setModalOpen(true); }; const startEdit = async (order) => { await loadOrderItemTypes(); setEditingOrder(order); setModalOpen(true); }; const closeModal = () => { setModalOpen(false); setEditingOrder(null); }; return (
Order queue

Today's Orders

{q ? ( {filtered.length} match{filtered.length !== 1 ? "es" : ""} for "{query}" · {orders.length} total today ) : ( {inFlight} in flight · {totalToday} total today · avg fulfillment 4m 18s )}
setQuery(e.target.value)} /> {query && ( )}
{/* Date filter bar */} {(() => { const chips = [ { id: "all", label: "All" }, { id: "today", label: "Today" }, { id: "week", label: "This week" }, { id: "month", label: "This month" }, ]; const fmtDay = v => new Date(v + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" }); const fmtWeek = v => { const d = new Date(v + "T00:00:00"); const s = new Date(d); s.setDate(d.getDate() - d.getDay()); return "Wk of " + s.toLocaleDateString("en-US", { month: "short", day: "numeric" }); }; const fmtMonth = v => { const [y, m] = v.split("-"); return new Date(+y, +m - 1).toLocaleDateString("en-US", { month: "short", year: "numeric" }); }; const fmtRange = r => r.from && r.to ? `${fmtDay(r.from)} - ${fmtDay(r.to)}` : "Date range"; const chipStyle = (id) => ({ display: "inline-flex", alignItems: "center", gap: 5, padding: "5px 13px", borderRadius: 999, fontSize: 12.5, fontWeight: 600, cursor: "pointer", border: `1px solid ${dateFilter === id ? "var(--green-700)" : "var(--line)"}`, background: dateFilter === id ? "var(--green-700)" : "var(--cream-50)", color: dateFilter === id ? "white" : "var(--ink-700)" }); const basisBtn = (id) => ({ display: "inline-flex", alignItems: "center", gap: 5, padding: "5px 11px", borderRadius: 999, fontSize: 12.5, fontWeight: 700, cursor: "pointer", border: `1px solid ${dateBasis === id ? "var(--gold-600)" : "var(--line)"}`, background: dateBasis === id ? "rgba(200,162,92,0.18)" : "var(--cream-50)", color: dateBasis === id ? "var(--green-800)" : "var(--ink-600)" }); const customPickers = [ { id: "custom-day", label: dateFilter === "custom-day" && customDate ? fmtDay(customDate) : "Day", icon: "calendar", type: "date", eyebrow: "Date filter", title: "Choose a day", inputLabel: "Day" }, { id: "custom-week", label: dateFilter === "custom-week" && customDate ? fmtWeek(customDate) : "Week", icon: "calendar", type: "date", eyebrow: "Date filter", title: "Choose a week", inputLabel: "Any day in the week" }, { id: "custom-month", label: dateFilter === "custom-month" && customDate ? fmtMonth(customDate) : "Month", icon: "calendar", type: "month", eyebrow: "Date filter", title: "Choose a month", inputLabel: "Month" }, { id: "custom-range", label: dateFilter === "custom-range" ? fmtRange(customRange) : "Date range", icon: "calendar", type: "date", eyebrow: "Date filter", title: "Choose a date range", inputLabel: "Range", kind: "range" }, ]; const namedRanges = customDateRanges.map(range => ({ id: window.TeaGangCustomDateRanges.filterId(range), label: range.name, })); const selectCustomDate = (id, value) => { if (!value) return; setDateFilter(id); if (id === "custom-range") { setCustomRange(value); setCustomDate(""); } else { setCustomDate(value); } setDateDialog(null); }; return (
Organize by Added date filter {chips.map(c => ( ))} {namedRanges.map(c => ( ))} {customPickers.map(p => ( ))} {dateDialog && ( setDateDialog(null)} /> )}
); })()} {(() => { const allGroupKeys = groupedKeysForAllColumns(); const allCollapsed = allGroupKeys.length > 0 && allGroupKeys.every(k => collapsedGroups.has(k)); const sourceOptions = Array.from(new Map([ ...orderSources.map(s => [s.id || s.name || s, { id: s.id || s.name || s, label: s.name || s }]), ...orders.filter(o => o.source).map(o => [o.source_id || o.source, { id: o.source_id || o.source, label: o.source }]), ]).values()); return (
{[ { id: "all", label: "All" }, { id: "pickup", label: "Pickup" }, { id: "delivery", label: "Delivery" }, ].map(f => ( ))}
{sortPanelOpen && (() => { const chip = (active) => ({ padding: "4px 11px", borderRadius: 999, fontSize: 12, fontWeight: 600, cursor: "pointer", border: `1px solid ${active ? "var(--green-700)" : "var(--line)"}`, background: active ? "var(--green-700)" : "var(--cream-50)", color: active ? "white" : "var(--ink-700)", }); const dirBtn = (active) => ({ display: "inline-flex", alignItems: "center", gap: 4, padding: "4px 11px", borderRadius: 999, fontSize: 12, fontWeight: 600, cursor: "pointer", border: `1px solid ${active ? "var(--green-700)" : "var(--line)"}`, background: active ? "var(--green-700)" : "var(--cream-50)", color: active ? "white" : "var(--ink-700)", }); const label = { fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 6, display: "block" }; const row = { display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 6 }; return (
Order settings
Orders
Group summary chips
{[["count","By count"],["alpha","A – Z"]].map(([id,lbl]) => ( ))}
Order detail items
{[["count","By count"],["alpha","A – Z"]].map(([id,lbl]) => ( ))}
Card details
{[["labels","Category labels"],["lines","Thin lines"]].map(([id,lbl]) => ( ))}
Receipt printing
updatePrinterIp(e.target.value)} onKeyDown={e => { if (e.key === "Enter") savePrinterIp(); }} inputMode="text" autoCorrect="off" spellCheck="false" placeholder="Printer IP address" className="mono" style={{ width: "100%", border: "1px solid var(--line)", borderRadius: "var(--r-md)", background: "var(--cream-50)", color: "var(--ink-800)", padding: "7px 10px", fontSize: 12.5 }} /> {printerIpError &&
{printerIpError}
}
{[["80","80mm"],["58","58mm"]].map(([id,lbl]) => ( ))}
{[ ["showOrderNumber", "Show order number"], ["showOrderType", "Show pickup/delivery"], ["showScheduledTime", "Show scheduled time"], ["showCustomer", "Show customer"], ["showNote", "Show note"], ["showItemDetails", "Show item details"], ["showThankYou", "Show thank you"], ].map(([key, text]) => ( ))}