Refactor frontend into pages and components
This commit is contained in:
Zeeshaun
+93
-701
@@ -8,24 +8,16 @@ import {
|
||||
resetMenu,
|
||||
updateOrderStatus
|
||||
} from "./api.js";
|
||||
import logo from "../../assets/ranaze-logo-transparent.png";
|
||||
import heroCup from "../../assets/ranaze-bubble-tea-single-cup-transparent.png";
|
||||
|
||||
const queueStatuses = ["new", "making", "ready"];
|
||||
const orderIdleTimeoutMs = 90_000;
|
||||
const adminUnlockPressMs = 3_000;
|
||||
const adminPassword = "admin";
|
||||
const tabLabels = {
|
||||
queue: "Order Status",
|
||||
menu: "Menu Admin"
|
||||
};
|
||||
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: ""
|
||||
});
|
||||
import AppHeader from "./components/AppHeader.jsx";
|
||||
import MenuPage from "./pages/MenuPage.jsx";
|
||||
import OrderPage from "./pages/OrderPage.jsx";
|
||||
import QueuePage from "./pages/QueuePage.jsx";
|
||||
import {
|
||||
ADMIN_PASSWORD,
|
||||
ADMIN_UNLOCK_PRESS_MS,
|
||||
initialBuilder,
|
||||
ORDER_IDLE_TIMEOUT_MS
|
||||
} from "./lib/order.js";
|
||||
|
||||
export default function App() {
|
||||
const adminPressTimerRef = useRef(null);
|
||||
@@ -73,13 +65,13 @@ export default function App() {
|
||||
|
||||
let timeoutId = window.setTimeout(() => {
|
||||
setOrderMode(null);
|
||||
}, orderIdleTimeoutMs);
|
||||
}, ORDER_IDLE_TIMEOUT_MS);
|
||||
|
||||
function resetIdleTimer() {
|
||||
window.clearTimeout(timeoutId);
|
||||
timeoutId = window.setTimeout(() => {
|
||||
setOrderMode(null);
|
||||
}, orderIdleTimeoutMs);
|
||||
}, ORDER_IDLE_TIMEOUT_MS);
|
||||
}
|
||||
|
||||
const events = ["pointerdown", "keydown", "touchstart"];
|
||||
@@ -138,6 +130,30 @@ export default function App() {
|
||||
}
|
||||
}
|
||||
|
||||
function startAdminPress() {
|
||||
window.clearTimeout(adminPressTimerRef.current);
|
||||
setLogoPressing(true);
|
||||
adminPressTimerRef.current = window.setTimeout(() => {
|
||||
if (adminUnlocked) {
|
||||
setAdminUnlocked(false);
|
||||
setView("order");
|
||||
} else {
|
||||
const password = window.prompt("Enter admin password");
|
||||
if (password === ADMIN_PASSWORD) {
|
||||
setAdminUnlocked(true);
|
||||
} else if (password !== null && password !== "") {
|
||||
window.alert("Incorrect password");
|
||||
}
|
||||
}
|
||||
setLogoPressing(false);
|
||||
}, ADMIN_UNLOCK_PRESS_MS);
|
||||
}
|
||||
|
||||
function cancelAdminPress() {
|
||||
window.clearTimeout(adminPressTimerRef.current);
|
||||
setLogoPressing(false);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="page-state">Loading POS...</div>;
|
||||
}
|
||||
@@ -151,698 +167,74 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
|
||||
const modeDetails = {
|
||||
premade: {
|
||||
stepLabel: "House favorite",
|
||||
title: selectedDrink?.name || "Pick a house favorite",
|
||||
description: "Choose one of our ready-to-enjoy drinks and add it in one tap.",
|
||||
buttonLabel: "Add to my order"
|
||||
},
|
||||
simple: {
|
||||
stepLabel: "Quick customize",
|
||||
title: selectedDrink?.name || "Choose your drink",
|
||||
description: "Pick your drink, then make a few simple choices like size and sweetness.",
|
||||
buttonLabel: "Add to my order"
|
||||
},
|
||||
detailed: {
|
||||
stepLabel: "Build it your way",
|
||||
title: selectedDrink?.name || "Build your drink",
|
||||
description: "Customize every detail, including ice, toppings, and special requests.",
|
||||
buttonLabel: "Add to my order"
|
||||
}
|
||||
};
|
||||
const activeMode = orderMode ? modeDetails[orderMode] : null;
|
||||
|
||||
function startAdminPress() {
|
||||
window.clearTimeout(adminPressTimerRef.current);
|
||||
setLogoPressing(true);
|
||||
adminPressTimerRef.current = window.setTimeout(() => {
|
||||
if (adminUnlocked) {
|
||||
setAdminUnlocked(false);
|
||||
setView("order");
|
||||
} else {
|
||||
const password = window.prompt("Enter admin password");
|
||||
if (password === adminPassword) {
|
||||
setAdminUnlocked(true);
|
||||
} else if (password !== null && password !== "") {
|
||||
window.alert("Incorrect password");
|
||||
}
|
||||
}
|
||||
setLogoPressing(false);
|
||||
}, adminUnlockPressMs);
|
||||
}
|
||||
|
||||
function cancelAdminPress() {
|
||||
window.clearTimeout(adminPressTimerRef.current);
|
||||
setLogoPressing(false);
|
||||
}
|
||||
|
||||
function addLineToTicket(drink, lineBuilder) {
|
||||
setTicket((current) => [
|
||||
...current,
|
||||
{
|
||||
menuItemId: drink._id,
|
||||
name: drink.name,
|
||||
basePrice: drink.basePrice,
|
||||
...lineBuilder
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="topbar">
|
||||
<div className="brand-lockup">
|
||||
<button
|
||||
className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
|
||||
onPointerDown={startAdminPress}
|
||||
onPointerUp={cancelAdminPress}
|
||||
onPointerLeave={cancelAdminPress}
|
||||
onPointerCancel={cancelAdminPress}
|
||||
onContextMenu={(event) => event.preventDefault()}
|
||||
type="button"
|
||||
>
|
||||
<img src={logo} alt="Ranaze Bubble Tea & Slush" />
|
||||
</button>
|
||||
<div className="brand-copy">
|
||||
<p className="eyebrow">Ranaze Bubble Tea & Slush</p>
|
||||
<h1>Choose your drink</h1>
|
||||
<p className="muted">
|
||||
Fresh bubble tea, fruit slushes, and easy customizations made just the way you like them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{adminUnlocked && (
|
||||
<nav className="tabs">
|
||||
{visibleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
className={`tab ${view === tab ? "is-active" : ""}`}
|
||||
onClick={() => setView(tab)}
|
||||
>
|
||||
{tabLabels[tab]}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="tab admin-lock-btn"
|
||||
onClick={() => {
|
||||
setAdminUnlocked(false);
|
||||
setView("order");
|
||||
}}
|
||||
>
|
||||
Hide Admin
|
||||
</button>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
<AppHeader
|
||||
adminUnlocked={adminUnlocked}
|
||||
logoPressing={logoPressing}
|
||||
onLogoPointerDown={startAdminPress}
|
||||
onLogoPointerUp={cancelAdminPress}
|
||||
onLogoPointerLeave={cancelAdminPress}
|
||||
onLogoPointerCancel={cancelAdminPress}
|
||||
onHideAdmin={() => {
|
||||
setAdminUnlocked(false);
|
||||
setView("order");
|
||||
}}
|
||||
view={view}
|
||||
setView={setView}
|
||||
/>
|
||||
|
||||
{view === "order" && (
|
||||
<section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
|
||||
{orderMode && (
|
||||
<div className="order-toolbar">
|
||||
<button className="text-btn" onClick={() => {
|
||||
setOrderMode(null);
|
||||
setShowCart(false);
|
||||
}}>
|
||||
Back to drink options
|
||||
</button>
|
||||
<div className="order-toolbar-actions">
|
||||
{ticket.length > 0 && (
|
||||
<button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
|
||||
View Order ({ticket.length})
|
||||
</button>
|
||||
)}
|
||||
<p className="muted order-toolbar-note">
|
||||
This screen returns to the drink menu after 90 seconds of inactivity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!orderMode && (
|
||||
<section className="panel mode-launcher">
|
||||
<div className="mode-launcher-copy">
|
||||
<p className="eyebrow">Welcome to Ranaze</p>
|
||||
<h2>How would you like to choose your drink?</h2>
|
||||
<p className="muted">
|
||||
Start with a signature favorite, make a few quick changes, or fully customize your drink.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mode-hero">
|
||||
<div className="mode-hero-copy">
|
||||
<p className="eyebrow">Freshly made for you</p>
|
||||
<h3>Bubble tea, fruit tea, and slushes with easy customization.</h3>
|
||||
</div>
|
||||
<img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
|
||||
</div>
|
||||
<div className="mode-grid">
|
||||
<button className="mode-card" onClick={() => setOrderMode("premade")}>
|
||||
<p className="eyebrow">Fastest</p>
|
||||
<h3>House Favorites</h3>
|
||||
<p className="muted">Perfect if you want one of our signature drinks with no extra steps.</p>
|
||||
</button>
|
||||
<button className="mode-card" onClick={() => setOrderMode("simple")}>
|
||||
<p className="eyebrow">Easy</p>
|
||||
<h3>Quick Customization</h3>
|
||||
<p className="muted">Choose your drink, then adjust size and sweetness in just a few taps.</p>
|
||||
</button>
|
||||
<button className="mode-card" onClick={() => setOrderMode("detailed")}>
|
||||
<p className="eyebrow">Flexible</p>
|
||||
<h3>Build It Your Way</h3>
|
||||
<p className="muted">Fine-tune ice, toppings, and special instructions for the exact drink you want.</p>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{orderMode && !showCart && (
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">{activeMode.stepLabel}</p>
|
||||
<h2>Choose a drink</h2>
|
||||
<p className="muted builder-intro">{activeMode.description}</p>
|
||||
</div>
|
||||
<div className="builder-header-actions">
|
||||
<button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
|
||||
{ticket.length > 0 && (
|
||||
<button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="chip-row">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="drink-grid">
|
||||
{visibleMenu.map((drink) => (
|
||||
<button
|
||||
key={drink._id}
|
||||
className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
|
||||
onClick={() => {
|
||||
if (orderMode === "premade") {
|
||||
addLineToTicket(drink, initialBuilder(settings));
|
||||
return;
|
||||
}
|
||||
setSelectedDrinkId(drink._id);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
<div className="drink-card-badge">
|
||||
<span>{categoryMonogram(drink.category)}</span>
|
||||
</div>
|
||||
<div className="drink-card-copy">
|
||||
<p className="eyebrow">{drink.category}</p>
|
||||
<h3>{drink.name}</h3>
|
||||
<p className="muted">{drink.description}</p>
|
||||
</div>
|
||||
<strong>{formatCurrency(drink.basePrice)}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{orderMode === "premade" && (
|
||||
<div className="empty-state mode-note">
|
||||
Tap any drink to add it to your order. Use the order button whenever you are ready to review.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderMode && !showCart && orderMode !== "premade" && (
|
||||
<div className="panel">
|
||||
{selectedDrink && builder ? (
|
||||
<div className="inline-builder">
|
||||
<div className="inline-builder-header">
|
||||
<div>
|
||||
<p className="eyebrow">Your drink</p>
|
||||
<h3>{activeMode.title}</h3>
|
||||
</div>
|
||||
<div className="line-price">
|
||||
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{orderMode !== "premade" && (
|
||||
<OptionGroup
|
||||
label="Size"
|
||||
choices={settings.sizeOptions.map((option) => option.name)}
|
||||
value={builder.size}
|
||||
onChange={(size) => setBuilder((current) => ({ ...current, size }))}
|
||||
/>
|
||||
)}
|
||||
{orderMode !== "premade" && (
|
||||
<OptionGroup
|
||||
label="Sweetness"
|
||||
choices={settings.sweetnessOptions}
|
||||
value={builder.sweetness}
|
||||
onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
|
||||
/>
|
||||
)}
|
||||
{orderMode === "detailed" && (
|
||||
<OptionGroup
|
||||
label="Ice"
|
||||
choices={settings.iceOptions}
|
||||
value={builder.ice}
|
||||
onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
|
||||
/>
|
||||
)}
|
||||
{orderMode === "detailed" && (
|
||||
<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>
|
||||
)}
|
||||
{orderMode === "detailed" && (
|
||||
<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">
|
||||
<button
|
||||
className="primary-btn"
|
||||
onClick={() => {
|
||||
addLineToTicket(selectedDrink, builder);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
{activeMode.buttonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderMode && showCart && (
|
||||
<div className="panel cart-panel">
|
||||
<section className="ticket">
|
||||
<div className="ticket-header">
|
||||
<div>
|
||||
<p className="eyebrow">Your order</p>
|
||||
<h3>Review your drinks</h3>
|
||||
</div>
|
||||
<div className="ticket-header-actions">
|
||||
<button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
|
||||
<button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ticket-lines">
|
||||
{ticket.length === 0 && <div className="empty-state">Your order is empty.</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 extra toppings"}</p>
|
||||
{line.notes && <p className="muted">Special request: {line.notes}</p>}
|
||||
<div className="line-meta">
|
||||
<span>Drink 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">Name for the order</span>
|
||||
<input
|
||||
placeholder="Optional"
|
||||
value={customerName}
|
||||
maxLength="40"
|
||||
onChange={(event) => setCustomerName(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">How would you like to pay?</span>
|
||||
<select
|
||||
value={paymentMethod}
|
||||
onChange={(event) => setPaymentMethod(event.target.value)}
|
||||
>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="tab">Store 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");
|
||||
setShowCart(false);
|
||||
setOrderMode(null);
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Place my order
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<OrderPage
|
||||
menu={menu}
|
||||
settings={settings}
|
||||
selectedCategory={selectedCategory}
|
||||
setSelectedCategory={setSelectedCategory}
|
||||
selectedDrinkId={selectedDrinkId}
|
||||
setSelectedDrinkId={setSelectedDrinkId}
|
||||
builder={builder}
|
||||
setBuilder={setBuilder}
|
||||
ticket={ticket}
|
||||
setTicket={setTicket}
|
||||
orderMode={orderMode}
|
||||
setOrderMode={setOrderMode}
|
||||
showCart={showCart}
|
||||
setShowCart={setShowCart}
|
||||
customerName={customerName}
|
||||
setCustomerName={setCustomerName}
|
||||
paymentMethod={paymentMethod}
|
||||
setPaymentMethod={setPaymentMethod}
|
||||
createOrder={createOrder}
|
||||
setOrders={setOrders}
|
||||
setError={setError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{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>
|
||||
<QueuePage
|
||||
orders={orders}
|
||||
updateOrderStatus={updateOrderStatus}
|
||||
deleteOrder={deleteOrder}
|
||||
setOrders={setOrders}
|
||||
setError={setError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{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>
|
||||
<MenuPage
|
||||
menu={menu}
|
||||
menuForm={menuForm}
|
||||
setMenuForm={setMenuForm}
|
||||
createMenuItem={createMenuItem}
|
||||
deleteMenuItem={deleteMenuItem}
|
||||
resetMenu={resetMenu}
|
||||
setMenu={setMenu}
|
||||
setSelectedDrinkId={setSelectedDrinkId}
|
||||
settings={settings}
|
||||
setBuilder={setBuilder}
|
||||
setError={setError}
|
||||
/>
|
||||
)}
|
||||
</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 categoryMonogram(category) {
|
||||
const map = {
|
||||
"Milk Tea": "MT",
|
||||
"Fruit Tea": "FT",
|
||||
Specialty: "SP"
|
||||
};
|
||||
|
||||
return map[category] || category.slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import logo from "../../../assets/ranaze-logo-transparent.png";
|
||||
|
||||
const tabLabels = {
|
||||
queue: "Order Status",
|
||||
menu: "Menu Admin"
|
||||
};
|
||||
|
||||
export default function AppHeader({
|
||||
adminUnlocked,
|
||||
logoPressing,
|
||||
onLogoPointerDown,
|
||||
onLogoPointerUp,
|
||||
onLogoPointerLeave,
|
||||
onLogoPointerCancel,
|
||||
onHideAdmin,
|
||||
view,
|
||||
setView
|
||||
}) {
|
||||
const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
|
||||
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="brand-lockup">
|
||||
<button
|
||||
className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
|
||||
onPointerDown={onLogoPointerDown}
|
||||
onPointerUp={onLogoPointerUp}
|
||||
onPointerLeave={onLogoPointerLeave}
|
||||
onPointerCancel={onLogoPointerCancel}
|
||||
onContextMenu={(event) => event.preventDefault()}
|
||||
type="button"
|
||||
>
|
||||
<img src={logo} alt="Ranaze Bubble Tea & Slush" />
|
||||
</button>
|
||||
<div className="brand-copy">
|
||||
<p className="eyebrow">Ranaze Bubble Tea & Slush</p>
|
||||
<h1>Choose your drink</h1>
|
||||
<p className="muted">
|
||||
Fresh drinks.
|
||||
Made your way.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{adminUnlocked && (
|
||||
<nav className="tabs">
|
||||
{visibleTabs.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
className={`tab ${view === tab ? "is-active" : ""}`}
|
||||
onClick={() => setView(tab)}
|
||||
>
|
||||
{tabLabels[tab]}
|
||||
</button>
|
||||
))}
|
||||
<button className="tab admin-lock-btn" onClick={onHideAdmin}>
|
||||
Hide Admin
|
||||
</button>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default function SummaryCard({ label, value }) {
|
||||
return (
|
||||
<article className="summary-card">
|
||||
<p className="eyebrow">{label}</p>
|
||||
<strong>{value}</strong>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export function formatCurrency(value) {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD"
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function formatTime(value) {
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit"
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
export function titleCase(value) {
|
||||
return value.charAt(0).toUpperCase() + value.slice(1);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
export const ORDER_IDLE_TIMEOUT_MS = 90_000;
|
||||
export const ADMIN_UNLOCK_PRESS_MS = 3_000;
|
||||
export const ADMIN_PASSWORD = "admin";
|
||||
|
||||
export const HERO_CATEGORIES = [
|
||||
{ label: "Milk Tea", asset: "milk-tea", displayLabel: "Milk Tea" },
|
||||
{ label: "Fruit Tea", asset: "fruit-tea", displayLabel: "Fruit Tea" },
|
||||
{ label: "Specialty", asset: "slush", displayLabel: "Slush" }
|
||||
];
|
||||
|
||||
export function initialBuilder(settings) {
|
||||
return {
|
||||
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 function toppingTotal(toppings, settings) {
|
||||
return toppings.reduce((sum, toppingName) => {
|
||||
const topping = settings.toppings.find((item) => item.name === toppingName);
|
||||
return sum + (topping?.price ?? 0);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export function sizeDelta(size, settings) {
|
||||
return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
|
||||
}
|
||||
|
||||
export function lineTotal(drink, builder, settings) {
|
||||
return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
|
||||
}
|
||||
|
||||
export function ticketTotal(ticket, settings) {
|
||||
return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
|
||||
}
|
||||
|
||||
export function categoryMonogram(category) {
|
||||
const map = {
|
||||
"Milk Tea": "MT",
|
||||
"Fruit Tea": "FT",
|
||||
Specialty: "SP"
|
||||
};
|
||||
|
||||
return map[category] || category.slice(0, 2).toUpperCase();
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { formatCurrency } from "../lib/formatters.js";
|
||||
import { initialBuilder } from "../lib/order.js";
|
||||
|
||||
export default function MenuPage({
|
||||
menu,
|
||||
menuForm,
|
||||
setMenuForm,
|
||||
createMenuItem,
|
||||
deleteMenuItem,
|
||||
resetMenu,
|
||||
setMenu,
|
||||
setSelectedDrinkId,
|
||||
settings,
|
||||
setBuilder,
|
||||
setError
|
||||
}) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
import heroCup from "../../../assets/ranaze-bubble-tea-single-cup-transparent.png";
|
||||
import milkTeaBadge from "../../../assets/milk-tea-badge.png";
|
||||
import fruitTeaBadge from "../../../assets/fruit-tea-badge-transparent.png";
|
||||
import slushBadge from "../../../assets/slush-badge.png";
|
||||
import OptionGroup from "../components/OptionGroup.jsx";
|
||||
import {
|
||||
categoryMonogram,
|
||||
HERO_CATEGORIES,
|
||||
initialBuilder,
|
||||
lineTotal,
|
||||
ticketTotal
|
||||
} from "../lib/order.js";
|
||||
import { formatCurrency } from "../lib/formatters.js";
|
||||
|
||||
const heroCategoryImages = {
|
||||
"milk-tea": milkTeaBadge,
|
||||
"fruit-tea": fruitTeaBadge,
|
||||
slush: slushBadge
|
||||
};
|
||||
|
||||
export default function OrderPage({
|
||||
menu,
|
||||
settings,
|
||||
selectedCategory,
|
||||
setSelectedCategory,
|
||||
selectedDrinkId,
|
||||
setSelectedDrinkId,
|
||||
builder,
|
||||
setBuilder,
|
||||
ticket,
|
||||
setTicket,
|
||||
orderMode,
|
||||
setOrderMode,
|
||||
showCart,
|
||||
setShowCart,
|
||||
customerName,
|
||||
setCustomerName,
|
||||
paymentMethod,
|
||||
setPaymentMethod,
|
||||
createOrder,
|
||||
setOrders,
|
||||
setError
|
||||
}) {
|
||||
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;
|
||||
const activeMode = getModeDetails(orderMode, selectedDrink);
|
||||
|
||||
function addLineToTicket(drink, lineBuilder) {
|
||||
setTicket((current) => [
|
||||
...current,
|
||||
{
|
||||
menuItemId: drink._id,
|
||||
name: drink.name,
|
||||
basePrice: drink.basePrice,
|
||||
...lineBuilder
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
|
||||
{orderMode && (
|
||||
<div className="order-toolbar">
|
||||
<button className="text-btn" onClick={() => {
|
||||
setOrderMode(null);
|
||||
setShowCart(false);
|
||||
}}>
|
||||
Back to drink options
|
||||
</button>
|
||||
<div className="order-toolbar-actions">
|
||||
{ticket.length > 0 && (
|
||||
<button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
|
||||
View Order ({ticket.length})
|
||||
</button>
|
||||
)}
|
||||
<p className="muted order-toolbar-note">
|
||||
This screen returns to the drink menu after 90 seconds of inactivity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!orderMode && (
|
||||
<section className="panel mode-launcher">
|
||||
<div className="mode-launcher-copy">
|
||||
<p className="eyebrow">Welcome to Ranaze</p>
|
||||
<h2>Choose your drink.</h2>
|
||||
<div className="hero-copy-list muted">
|
||||
<p>Start fast.</p>
|
||||
<p>Customize if you want.</p>
|
||||
</div>
|
||||
<div className="hero-cta-row">
|
||||
<button className="primary-btn hero-primary-btn" onClick={() => setOrderMode("premade")}>
|
||||
Start Order
|
||||
</button>
|
||||
</div>
|
||||
<div className="hero-category-row">
|
||||
{HERO_CATEGORIES.map((category) => (
|
||||
<button
|
||||
key={category.label}
|
||||
className="hero-category-btn"
|
||||
onClick={() => {
|
||||
setSelectedCategory(category.label);
|
||||
setOrderMode("premade");
|
||||
}}
|
||||
>
|
||||
<img src={heroCategoryImages[category.asset]} alt="" />
|
||||
<span>{category.displayLabel}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mode-hero">
|
||||
<div className="mode-hero-copy">
|
||||
<p className="eyebrow">Freshly made for you</p>
|
||||
<div className="hero-copy-list muted">
|
||||
<p>Bubble tea.</p>
|
||||
<p>Fruit tea.</p>
|
||||
<p>Slushes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
|
||||
</div>
|
||||
<div className="mode-grid">
|
||||
<ModeCard
|
||||
eyebrow="Fastest"
|
||||
title="House Favorites"
|
||||
lines={["Signature drinks.", "No extra steps."]}
|
||||
cta="Choose favorites"
|
||||
onClick={() => setOrderMode("premade")}
|
||||
/>
|
||||
<ModeCard
|
||||
eyebrow="Easy"
|
||||
title="Quick Customization"
|
||||
lines={["Pick your drink.", "Adjust a few basics."]}
|
||||
cta="Start customizing"
|
||||
onClick={() => setOrderMode("simple")}
|
||||
/>
|
||||
<ModeCard
|
||||
eyebrow="Flexible"
|
||||
title="Build It Your Way"
|
||||
lines={["Full control.", "Every detail matters."]}
|
||||
cta="Build my drink"
|
||||
onClick={() => setOrderMode("detailed")}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{orderMode && !showCart && (
|
||||
<div className="panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">{activeMode.stepLabel}</p>
|
||||
<h2>Choose a drink</h2>
|
||||
<p className="muted builder-intro">{activeMode.description}</p>
|
||||
</div>
|
||||
<div className="builder-header-actions">
|
||||
<button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
|
||||
{ticket.length > 0 && (
|
||||
<button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="chip-row">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="drink-grid">
|
||||
{visibleMenu.map((drink) => (
|
||||
<button
|
||||
key={drink._id}
|
||||
className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
|
||||
onClick={() => {
|
||||
if (orderMode === "premade") {
|
||||
addLineToTicket(drink, initialBuilder(settings));
|
||||
return;
|
||||
}
|
||||
setSelectedDrinkId(drink._id);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
<div className="drink-card-badge">
|
||||
<span>{categoryMonogram(drink.category)}</span>
|
||||
</div>
|
||||
<div className="drink-card-copy">
|
||||
<p className="eyebrow">{drink.category}</p>
|
||||
<h3>{drink.name}</h3>
|
||||
<p className="muted">{drink.description}</p>
|
||||
</div>
|
||||
<strong>{formatCurrency(drink.basePrice)}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{orderMode === "premade" && (
|
||||
<div className="empty-state mode-note">
|
||||
Tap any drink to add it to your order. Use the order button whenever you are ready to review.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderMode && !showCart && orderMode !== "premade" && (
|
||||
<div className="panel">
|
||||
{selectedDrink && builder ? (
|
||||
<div className="inline-builder">
|
||||
<div className="inline-builder-header">
|
||||
<div>
|
||||
<p className="eyebrow">Your drink</p>
|
||||
<h3>{activeMode.title}</h3>
|
||||
</div>
|
||||
<div className="line-price">
|
||||
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 }))}
|
||||
/>
|
||||
{orderMode === "detailed" && (
|
||||
<OptionGroup
|
||||
label="Ice"
|
||||
choices={settings.iceOptions}
|
||||
value={builder.ice}
|
||||
onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
|
||||
/>
|
||||
)}
|
||||
{orderMode === "detailed" && (
|
||||
<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>
|
||||
)}
|
||||
{orderMode === "detailed" && (
|
||||
<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">
|
||||
<button
|
||||
className="primary-btn"
|
||||
onClick={() => {
|
||||
addLineToTicket(selectedDrink, builder);
|
||||
setBuilder(initialBuilder(settings));
|
||||
}}
|
||||
>
|
||||
{activeMode.buttonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orderMode && showCart && (
|
||||
<div className="panel cart-panel">
|
||||
<section className="ticket">
|
||||
<div className="ticket-header">
|
||||
<div>
|
||||
<p className="eyebrow">Your order</p>
|
||||
<h3>Review your drinks</h3>
|
||||
</div>
|
||||
<div className="ticket-header-actions">
|
||||
<button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
|
||||
<button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ticket-lines">
|
||||
{ticket.length === 0 && <div className="empty-state">Your order is empty.</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 extra toppings"}</p>
|
||||
{line.notes && <p className="muted">Special request: {line.notes}</p>}
|
||||
<div className="line-meta">
|
||||
<span>Drink 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">Name for the order</span>
|
||||
<input
|
||||
placeholder="Optional"
|
||||
value={customerName}
|
||||
maxLength="40"
|
||||
onChange={(event) => setCustomerName(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">How would you like to pay?</span>
|
||||
<select
|
||||
value={paymentMethod}
|
||||
onChange={(event) => setPaymentMethod(event.target.value)}
|
||||
>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="tab">Store 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");
|
||||
setShowCart(false);
|
||||
setOrderMode(null);
|
||||
} catch (requestError) {
|
||||
setError(requestError.message);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Place my order
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function getModeDetails(orderMode, selectedDrink) {
|
||||
const modeDetails = {
|
||||
premade: {
|
||||
stepLabel: "House favorite",
|
||||
title: selectedDrink?.name || "Pick a house favorite",
|
||||
description: "Ready to enjoy. One quick tap.",
|
||||
buttonLabel: "Add to my order"
|
||||
},
|
||||
simple: {
|
||||
stepLabel: "Quick customize",
|
||||
title: selectedDrink?.name || "Choose your drink",
|
||||
description: "Pick your drink. Choose size and sweetness.",
|
||||
buttonLabel: "Add to my order"
|
||||
},
|
||||
detailed: {
|
||||
stepLabel: "Build it your way",
|
||||
title: selectedDrink?.name || "Build your drink",
|
||||
description: "Customize it all. Ice, toppings, and special requests.",
|
||||
buttonLabel: "Add to my order"
|
||||
}
|
||||
};
|
||||
|
||||
return modeDetails[orderMode];
|
||||
}
|
||||
|
||||
function ModeCard({ eyebrow, title, lines, cta, onClick }) {
|
||||
return (
|
||||
<button className="mode-card" onClick={onClick}>
|
||||
<p className="eyebrow">{eyebrow}</p>
|
||||
<h3>{title}</h3>
|
||||
<div className="mode-card-list muted">
|
||||
{lines.map((line) => (
|
||||
<p key={line}>{line}</p>
|
||||
))}
|
||||
</div>
|
||||
<span className="mode-card-cta">{cta}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import SummaryCard from "../components/SummaryCard.jsx";
|
||||
import { formatCurrency, formatTime, titleCase } from "../lib/formatters.js";
|
||||
|
||||
const queueStatuses = ["new", "making", "ready"];
|
||||
|
||||
export default function QueuePage({
|
||||
orders,
|
||||
updateOrderStatus,
|
||||
deleteOrder,
|
||||
setOrders,
|
||||
setError
|
||||
}) {
|
||||
return (
|
||||
<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={order}
|
||||
onAdvance={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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
+138
-34
@@ -2,8 +2,8 @@
|
||||
--bg: #f5eedf;
|
||||
--panel: rgba(255, 251, 244, 0.92);
|
||||
--panel-strong: #f8ecda;
|
||||
--ink: #171717;
|
||||
--muted: #6f6657;
|
||||
--ink: #111111;
|
||||
--muted: #4f4f4f;
|
||||
--accent: #101010;
|
||||
--accent-soft: #f4ddae;
|
||||
--warm: #f6b33e;
|
||||
@@ -19,11 +19,13 @@ body::before {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 249, 239, 0.88), rgba(245, 231, 208, 0.94)),
|
||||
radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.15), transparent 18%),
|
||||
radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.22), transparent 20%),
|
||||
radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.16), transparent 18%),
|
||||
radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.12), transparent 18%);
|
||||
radial-gradient(circle at center, rgba(255, 252, 247, 0.82) 0%, rgba(255, 252, 247, 0.9) 32%, rgba(255, 252, 247, 0) 58%),
|
||||
linear-gradient(180deg, rgba(255, 249, 239, 0.92), rgba(245, 231, 208, 0.95)),
|
||||
radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.09), transparent 20%),
|
||||
radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.13), transparent 22%),
|
||||
radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.1), transparent 20%),
|
||||
radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.07), transparent 20%);
|
||||
filter: blur(10px);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -35,9 +37,10 @@ body::before {
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
line-height: 1.5;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(246, 179, 62, 0.22), transparent 28%),
|
||||
radial-gradient(circle at right center, rgba(244, 221, 174, 0.38), transparent 22%),
|
||||
radial-gradient(circle at top left, rgba(246, 179, 62, 0.14), transparent 28%),
|
||||
radial-gradient(circle at right center, rgba(244, 221, 174, 0.22), transparent 22%),
|
||||
linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
|
||||
}
|
||||
|
||||
@@ -54,16 +57,16 @@ button {
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding: 1.25rem;
|
||||
padding: 0.9rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 1.1rem 1.35rem;
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 0.85rem 1.05rem;
|
||||
border: 1px solid rgba(16, 16, 16, 0.08);
|
||||
border-radius: 30px;
|
||||
background:
|
||||
@@ -78,6 +81,23 @@ button {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p,
|
||||
label,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -86,8 +106,8 @@ button {
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 32px;
|
||||
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 248, 232, 0.72));
|
||||
@@ -133,6 +153,17 @@ button {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.hero-copy-list,
|
||||
.mode-card-list {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.hero-copy-list p,
|
||||
.mode-card-list p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
@@ -214,8 +245,8 @@ button {
|
||||
.mode-launcher {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
padding: 1.4rem;
|
||||
gap: 0.85rem;
|
||||
padding: 1rem 1.05rem;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
|
||||
linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
|
||||
@@ -224,26 +255,82 @@ button {
|
||||
.mode-launcher-copy {
|
||||
max-width: 48rem;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
gap: 0.3rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.mode-launcher-copy h2 {
|
||||
font-size: clamp(2rem, 3.4vw, 3.3rem);
|
||||
line-height: 0.96;
|
||||
font-size: clamp(1.65rem, 2.8vw, 2.45rem);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.hero-cta-row {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.hero-primary-btn {
|
||||
min-width: 220px;
|
||||
padding: 18px 28px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #171311, #2a201a);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 18px 34px rgba(23, 19, 17, 0.24);
|
||||
}
|
||||
|
||||
.hero-category-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.hero-category-btn {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: 0.65rem;
|
||||
min-height: 148px;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(17, 17, 17, 0.1);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 235, 209, 0.96));
|
||||
color: #111111;
|
||||
box-shadow: 0 14px 28px rgba(83, 61, 24, 0.1);
|
||||
text-align: center;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.hero-category-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(23, 19, 17, 0.24);
|
||||
box-shadow: 0 20px 34px rgba(83, 61, 24, 0.16);
|
||||
}
|
||||
|
||||
.hero-category-btn img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.hero-category-btn span {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.mode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.mode-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 150px;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 1.1rem 1.25rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
border-radius: 26px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(247, 221, 161, 0.36));
|
||||
border: 1px solid rgba(16, 16, 16, 0.06);
|
||||
@@ -252,17 +339,18 @@ button {
|
||||
.mode-hero-copy {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
padding: 0.75rem 0.9rem;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.mode-hero-copy h3 {
|
||||
.mode-hero-copy p {
|
||||
margin: 0;
|
||||
font-size: clamp(1.2rem, 2vw, 1.8rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.mode-hero-image {
|
||||
width: 100%;
|
||||
max-height: 220px;
|
||||
max-height: 150px;
|
||||
object-fit: contain;
|
||||
justify-self: end;
|
||||
filter: drop-shadow(0 22px 24px rgba(83, 61, 24, 0.16));
|
||||
@@ -272,20 +360,21 @@ button {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
align-content: start;
|
||||
padding: 1.25rem;
|
||||
min-height: 200px;
|
||||
padding: 1rem;
|
||||
min-height: 150px;
|
||||
border: 1px solid rgba(16, 16, 16, 0.08);
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
text-align: left;
|
||||
box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.mode-card:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
border-color: rgba(246, 179, 62, 0.5);
|
||||
box-shadow: 0 16px 32px rgba(83, 61, 24, 0.14);
|
||||
box-shadow: 0 22px 38px rgba(83, 61, 24, 0.18);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.mode-card h3,
|
||||
@@ -293,6 +382,20 @@ button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mode-card-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
min-height: 46px;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #171311, #2a201a);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 12px 24px rgba(23, 19, 17, 0.18);
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.queue-card header,
|
||||
.menu-form,
|
||||
@@ -306,7 +409,7 @@ button {
|
||||
.panel-header {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: start;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.builder-header-actions {
|
||||
@@ -565,6 +668,7 @@ select {
|
||||
.topbar,
|
||||
.screen,
|
||||
.mode-hero,
|
||||
.hero-category-row,
|
||||
.mode-grid,
|
||||
.queue-columns,
|
||||
.menu-item,
|
||||
|
||||
Reference in New Issue
Block a user