Initial commit
This commit is contained in:
Zeeshaun
@@ -0,0 +1,606 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
createMenuItem,
|
||||
createOrder,
|
||||
deleteMenuItem,
|
||||
deleteOrder,
|
||||
fetchBootstrap,
|
||||
resetMenu,
|
||||
updateOrderStatus
|
||||
} from "./api.js";
|
||||
|
||||
const queueStatuses = ["new", "making", "ready"];
|
||||
|
||||
const initialBuilder = (settings) => ({
|
||||
size: settings.sizeOptions[0]?.name ?? "Regular",
|
||||
sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
|
||||
ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
|
||||
toppings: [],
|
||||
notes: ""
|
||||
});
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState("order");
|
||||
const [menu, setMenu] = useState([]);
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [settings, setSettings] = useState(null);
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [selectedDrinkId, setSelectedDrinkId] = useState(null);
|
||||
const [builder, setBuilder] = useState(null);
|
||||
const [ticket, setTicket] = useState([]);
|
||||
const [customerName, setCustomerName] = useState("");
|
||||
const [paymentMethod, setPaymentMethod] = useState("cash");
|
||||
const [menuForm, setMenuForm] = useState({
|
||||
name: "",
|
||||
category: "",
|
||||
description: "",
|
||||
price: ""
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
loadBootstrap();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!settings) {
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleMenu = menu.filter((item) => {
|
||||
return selectedCategory === "All" || item.category === selectedCategory;
|
||||
});
|
||||
const selectedExists = visibleMenu.some((item) => item._id === selectedDrinkId);
|
||||
const fallbackDrink = visibleMenu[0] || menu[0] || null;
|
||||
|
||||
if (!selectedExists && fallbackDrink) {
|
||||
setSelectedDrinkId(fallbackDrink._id);
|
||||
setBuilder(initialBuilder(settings));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!builder && fallbackDrink) {
|
||||
setBuilder(initialBuilder(settings));
|
||||
}
|
||||
}, [menu, selectedCategory, selectedDrinkId, settings, builder]);
|
||||
|
||||
async function loadBootstrap() {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
const data = await fetchBootstrap();
|
||||
setMenu(data.menu);
|
||||
setOrders(data.orders);
|
||||
setSettings(data.settings);
|
||||
setSelectedDrinkId(data.menu[0]?._id ?? null);
|
||||
if (data.settings) {
|
||||
setBuilder(initialBuilder(data.settings));
|
||||
}
|
||||
} catch (loadError) {
|
||||
setError(loadError.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="page-state">Loading POS...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="page-state">
|
||||
<p>{error}</p>
|
||||
<button className="primary-btn" onClick={loadBootstrap}>Retry</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const categories = ["All", ...new Set(menu.map((item) => item.category))];
|
||||
const visibleMenu = menu.filter((item) => {
|
||||
return selectedCategory === "All" || item.category === selectedCategory;
|
||||
});
|
||||
const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="topbar">
|
||||
<div>
|
||||
<p className="eyebrow">Self-hosted boba POS</p>
|
||||
<h1>Ranaze</h1>
|
||||
</div>
|
||||
<nav className="tabs">
|
||||
{["order", "queue", "menu"].map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
className={`tab ${view === tab ? "is-active" : ""}`}
|
||||
onClick={() => setView(tab)}
|
||||
>
|
||||
{titleCase(tab)}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{view === "order" && (
|
||||
<section className="screen">
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Step 1</p>
|
||||
<h2>Choose drinks</h2>
|
||||
</div>
|
||||
<div className="chip-row">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="drink-grid">
|
||||
{visibleMenu.map((drink) => (
|
||||
<button
|
||||
key={drink._id}
|
||||
className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
|
||||
onClick={() => {
|
||||
setSelectedDrinkId(drink._id);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
<p className="eyebrow">{drink.category}</p>
|
||||
<h3>{drink.name}</h3>
|
||||
<p className="muted">{drink.description}</p>
|
||||
<strong>{formatCurrency(drink.basePrice)}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Step 2</p>
|
||||
<h2>{selectedDrink?.name || "Select a drink"}</h2>
|
||||
</div>
|
||||
<div className="ticket-total">{formatCurrency(ticketTotal(ticket, settings))}</div>
|
||||
</div>
|
||||
|
||||
{selectedDrink && builder ? (
|
||||
<>
|
||||
<OptionGroup
|
||||
label="Size"
|
||||
choices={settings.sizeOptions.map((option) => option.name)}
|
||||
value={builder.size}
|
||||
onChange={(size) => setBuilder((current) => ({ ...current, size }))}
|
||||
/>
|
||||
<OptionGroup
|
||||
label="Sweetness"
|
||||
choices={settings.sweetnessOptions}
|
||||
value={builder.sweetness}
|
||||
onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
|
||||
/>
|
||||
<OptionGroup
|
||||
label="Ice"
|
||||
choices={settings.iceOptions}
|
||||
value={builder.ice}
|
||||
onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
|
||||
/>
|
||||
<div className="field">
|
||||
<span className="field-label">Toppings</span>
|
||||
<div className="choice-grid">
|
||||
{settings.toppings.map((topping) => {
|
||||
const checked = builder.toppings.includes(topping.name);
|
||||
return (
|
||||
<label key={topping.name} className="checkbox-tile">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
setBuilder((current) => ({
|
||||
...current,
|
||||
toppings: checked
|
||||
? current.toppings.filter((item) => item !== topping.name)
|
||||
: [...current.toppings, topping.name]
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<span>{topping.name} (+{formatCurrency(topping.price)})</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<label className="field">
|
||||
<span className="field-label">Special instructions</span>
|
||||
<textarea
|
||||
value={builder.notes}
|
||||
rows="3"
|
||||
onChange={(event) => {
|
||||
const notes = event.target.value;
|
||||
setBuilder((current) => ({ ...current, notes }));
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div className="builder-actions">
|
||||
<div className="line-price">
|
||||
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
|
||||
</div>
|
||||
<button
|
||||
className="primary-btn"
|
||||
onClick={() => {
|
||||
setTicket((current) => [
|
||||
...current,
|
||||
{
|
||||
menuItemId: selectedDrink._id,
|
||||
name: selectedDrink.name,
|
||||
basePrice: selectedDrink.basePrice,
|
||||
...builder
|
||||
}
|
||||
]);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
Add to ticket
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="empty-state">Add menu items to start taking orders.</div>
|
||||
)}
|
||||
|
||||
<section className="ticket">
|
||||
<div className="ticket-header">
|
||||
<div>
|
||||
<p className="eyebrow">Step 3</p>
|
||||
<h3>Current ticket</h3>
|
||||
</div>
|
||||
<button className="text-btn" onClick={() => setTicket([])}>Clear</button>
|
||||
</div>
|
||||
|
||||
<div className="ticket-lines">
|
||||
{ticket.length === 0 && <div className="empty-state">No items in the ticket.</div>}
|
||||
{ticket.map((line, index) => (
|
||||
<article key={`${line.menuItemId}-${index}`} className="ticket-line">
|
||||
<header>
|
||||
<strong>{line.name}</strong>
|
||||
<button
|
||||
className="text-btn"
|
||||
onClick={() => {
|
||||
setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</header>
|
||||
<p>{line.size} • {line.sweetness} • {line.ice}</p>
|
||||
<p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No toppings"}</p>
|
||||
{line.notes && <p className="muted">Note: {line.notes}</p>}
|
||||
<div className="line-meta">
|
||||
<span>Line total</span>
|
||||
<strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="checkout-form">
|
||||
<label className="field">
|
||||
<span className="field-label">Customer name</span>
|
||||
<input
|
||||
value={customerName}
|
||||
maxLength="40"
|
||||
onChange={(event) => setCustomerName(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">Payment</span>
|
||||
<select
|
||||
value={paymentMethod}
|
||||
onChange={(event) => setPaymentMethod(event.target.value)}
|
||||
>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="tab">House Tab</option>
|
||||
<option value="unpaid">Pay Later</option>
|
||||
</select>
|
||||
</label>
|
||||
<button
|
||||
className="primary-btn"
|
||||
disabled={ticket.length === 0}
|
||||
onClick={async () => {
|
||||
try {
|
||||
const payload = {
|
||||
customerName,
|
||||
paymentMethod,
|
||||
lines: ticket
|
||||
};
|
||||
const response = await createOrder(payload);
|
||||
setOrders((current) => [response.order, ...current]);
|
||||
setTicket([]);
|
||||
setCustomerName("");
|
||||
setPaymentMethod("cash");
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Place order
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{view === "queue" && (
|
||||
<section className="queue-screen">
|
||||
<div className="queue-summary">
|
||||
<SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
|
||||
<SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
|
||||
<SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
|
||||
<SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
|
||||
</div>
|
||||
<div className="queue-columns">
|
||||
{queueStatuses.map((status) => (
|
||||
<section key={status} className="queue-column">
|
||||
<div className="column-head">
|
||||
<p className="eyebrow">{titleCase(status)}</p>
|
||||
<h3>{orders.filter((order) => order.status === status).length} orders</h3>
|
||||
</div>
|
||||
{orders.filter((order) => order.status === status).map((order) => (
|
||||
<article key={order._id} className="queue-card">
|
||||
<header>
|
||||
<div>
|
||||
<p className="eyebrow">Order #{order.number}</p>
|
||||
<h3>{order.customerName || "Walk-in"}</h3>
|
||||
</div>
|
||||
<strong>{formatCurrency(order.total)}</strong>
|
||||
</header>
|
||||
<p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
|
||||
<div>
|
||||
{order.lines.map((line, index) => (
|
||||
<p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="status-actions">
|
||||
{nextStatusButton(order, async (newStatus) => {
|
||||
try {
|
||||
const response = await updateOrderStatus(order._id, newStatus);
|
||||
setOrders((current) => current.map((item) => {
|
||||
return item._id === response.order._id ? response.order : item;
|
||||
}));
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
})}
|
||||
<button
|
||||
className="status-btn danger"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await deleteOrder(order._id);
|
||||
setOrders((current) => current.filter((item) => item._id !== order._id));
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
{orders.filter((order) => order.status === status).length === 0 && (
|
||||
<div className="empty-state">No orders in {status}.</div>
|
||||
)}
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{view === "menu" && (
|
||||
<section className="menu-screen">
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Menu management</p>
|
||||
<h2>Drinks and pricing</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu-form">
|
||||
<label className="field">
|
||||
<span className="field-label">Drink name</span>
|
||||
<input
|
||||
value={menuForm.name}
|
||||
onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">Category</span>
|
||||
<input
|
||||
value={menuForm.category}
|
||||
onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">Description</span>
|
||||
<textarea
|
||||
rows="3"
|
||||
value={menuForm.description}
|
||||
onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">Base price</span>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={menuForm.price}
|
||||
onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="primary-btn"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const response = await createMenuItem({
|
||||
name: menuForm.name,
|
||||
category: menuForm.category,
|
||||
description: menuForm.description,
|
||||
basePrice: Number(menuForm.price)
|
||||
});
|
||||
setMenu((current) => [...current, response.menuItem]);
|
||||
setMenuForm({ name: "", category: "", description: "", price: "" });
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Add drink
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Saved in Mongo</p>
|
||||
<h2>Current menu</h2>
|
||||
</div>
|
||||
<button
|
||||
className="text-btn"
|
||||
onClick={async () => {
|
||||
try {
|
||||
const response = await resetMenu();
|
||||
setMenu(response.menu);
|
||||
setSelectedDrinkId(response.menu[0]?._id ?? null);
|
||||
setBuilder(initialBuilder(settings));
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Reset defaults
|
||||
</button>
|
||||
</div>
|
||||
<div className="menu-list">
|
||||
{menu.map((drink) => (
|
||||
<article key={drink._id} className="menu-item">
|
||||
<div>
|
||||
<p className="eyebrow">{drink.category}</p>
|
||||
<h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
|
||||
<p className="muted">{drink.description}</p>
|
||||
</div>
|
||||
<div className="menu-item-actions">
|
||||
<button
|
||||
className="text-btn"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await deleteMenuItem(drink._id);
|
||||
setMenu((current) => current.filter((item) => item._id !== drink._id));
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OptionGroup({ label, choices, value, onChange }) {
|
||||
return (
|
||||
<div className="field">
|
||||
<span className="field-label">{label}</span>
|
||||
<div className="choice-row">
|
||||
{choices.map((choice) => (
|
||||
<button
|
||||
key={choice}
|
||||
className={`choice-btn ${choice === value ? "is-active" : ""}`}
|
||||
onClick={() => onChange(choice)}
|
||||
>
|
||||
{choice}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryCard({ label, value }) {
|
||||
return (
|
||||
<article className="summary-card">
|
||||
<p className="eyebrow">{label}</p>
|
||||
<strong>{value}</strong>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function nextStatusButton(order, onAdvance) {
|
||||
const map = {
|
||||
new: "making",
|
||||
making: "ready",
|
||||
ready: "completed"
|
||||
};
|
||||
const next = map[order.status];
|
||||
if (!next) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<button className="status-btn" onClick={() => onAdvance(next)}>
|
||||
{next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function toppingTotal(toppings, settings) {
|
||||
return toppings.reduce((sum, toppingName) => {
|
||||
const topping = settings.toppings.find((item) => item.name === toppingName);
|
||||
return sum + (topping?.price ?? 0);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function sizeDelta(size, settings) {
|
||||
return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
|
||||
}
|
||||
|
||||
function lineTotal(drink, builder, settings) {
|
||||
return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
|
||||
}
|
||||
|
||||
function ticketTotal(ticket, settings) {
|
||||
return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
|
||||
}
|
||||
|
||||
function formatCurrency(value) {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD"
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function formatTime(value) {
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit"
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function titleCase(value) {
|
||||
return value.charAt(0).toUpperCase() + value.slice(1);
|
||||
}
|
||||
Reference in New Issue
Block a user