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);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
const jsonHeaders = {
|
||||
"Content-Type": "application/json"
|
||||
};
|
||||
|
||||
async function parseResponse(response) {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || "Request failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function fetchBootstrap() {
|
||||
const response = await fetch("/api/bootstrap");
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function createOrder(payload) {
|
||||
const response = await fetch("/api/orders", {
|
||||
method: "POST",
|
||||
headers: jsonHeaders,
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function updateOrderStatus(orderId, status) {
|
||||
const response = await fetch(`/api/orders/${orderId}/status`, {
|
||||
method: "PATCH",
|
||||
headers: jsonHeaders,
|
||||
body: JSON.stringify({ status })
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function deleteOrder(orderId) {
|
||||
const response = await fetch(`/api/orders/${orderId}`, {
|
||||
method: "DELETE"
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function createMenuItem(payload) {
|
||||
const response = await fetch("/api/menu", {
|
||||
method: "POST",
|
||||
headers: jsonHeaders,
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function deleteMenuItem(menuItemId) {
|
||||
const response = await fetch(`/api/menu/${menuItemId}`, {
|
||||
method: "DELETE"
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
|
||||
export async function resetMenu() {
|
||||
const response = await fetch("/api/menu/reset", {
|
||||
method: "POST"
|
||||
});
|
||||
return parseResponse(response);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.jsx";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,307 @@
|
||||
:root {
|
||||
--bg: #f3eadf;
|
||||
--panel: #fffaf2;
|
||||
--panel-strong: #f7efe3;
|
||||
--ink: #1f2923;
|
||||
--muted: #677168;
|
||||
--accent: #2f5d50;
|
||||
--accent-soft: #dbe8e2;
|
||||
--warm: #c9784d;
|
||||
--line: #d9cfbf;
|
||||
--danger: #b1463a;
|
||||
--shadow: 0 18px 40px rgba(59, 47, 34, 0.12);
|
||||
font-family: "Trebuchet MS", "Avenir Next", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(201, 120, 77, 0.18), transparent 28%),
|
||||
linear-gradient(180deg, #f9f3ea, #efe3d3 55%, #eadcc8);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid rgba(47, 93, 80, 0.15);
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 250, 242, 0.92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.topbar h1,
|
||||
.panel h2,
|
||||
.panel h3 {
|
||||
margin: 0.2rem 0 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabs,
|
||||
.choice-row,
|
||||
.chip-row,
|
||||
.builder-actions,
|
||||
.ticket-header,
|
||||
.line-meta,
|
||||
.status-actions,
|
||||
.menu-item-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.screen {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.queue-screen,
|
||||
.menu-screen {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.summary-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid rgba(47, 93, 80, 0.1);
|
||||
border-radius: 28px;
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.panel-header,
|
||||
.queue-card header,
|
||||
.menu-form,
|
||||
.checkout-form,
|
||||
.menu-item,
|
||||
.ticket-line {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tab,
|
||||
.choice-btn,
|
||||
.chip,
|
||||
.text-btn,
|
||||
.status-btn {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.tab.is-active,
|
||||
.choice-btn.is-active,
|
||||
.chip.is-active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.text-btn {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
padding: 0.95rem 1.2rem;
|
||||
background: var(--warm);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.primary-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.drink-grid,
|
||||
.queue-columns,
|
||||
.ticket-lines,
|
||||
.menu-list,
|
||||
.choice-grid,
|
||||
.queue-summary {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.drink-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.drink-card,
|
||||
.queue-card,
|
||||
.menu-item,
|
||||
.ticket-line {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.drink-card.is-selected {
|
||||
border-color: var(--accent);
|
||||
box-shadow: inset 0 0 0 2px rgba(47, 93, 80, 0.15);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.choice-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.checkbox-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 0.9rem 1rem;
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.ticket-line header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.ticket-total,
|
||||
.line-price {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.queue-summary {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.queue-columns {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.queue-column {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.column-head {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px;
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.status-btn.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.empty-state,
|
||||
.page-state {
|
||||
padding: 1.25rem;
|
||||
border-radius: 20px;
|
||||
background: var(--panel-strong);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.page-state {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar,
|
||||
.screen,
|
||||
.queue-columns,
|
||||
.menu-item,
|
||||
.panel-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1 1 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user