Initial commit
This commit is contained in:
Zeeshaun
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
client/dist
|
||||
.env
|
||||
@@ -0,0 +1,70 @@
|
||||
# Ranaze POS
|
||||
|
||||
Self-hosted tablet-first POS for a boba shop.
|
||||
|
||||
## Stack
|
||||
|
||||
- Frontend: `React` + `Vite`
|
||||
- Backend: `Express`
|
||||
- Database: self-hosted `MongoDB` via `Mongoose`
|
||||
|
||||
## Features
|
||||
|
||||
- Customer order builder for drinks, size, sweetness, ice, toppings, and notes
|
||||
- Ticket flow with cash, tab, and pay-later placeholders
|
||||
- Live order queue with `new`, `making`, `ready`, and `completed` statuses
|
||||
- Menu management persisted in MongoDB
|
||||
- Seeded default drinks on first launch
|
||||
|
||||
## Project layout
|
||||
|
||||
- `client/`: React tablet UI
|
||||
- `server/`: Express API and Mongo models
|
||||
|
||||
## Environment
|
||||
|
||||
Create `.env` in the repo root:
|
||||
|
||||
```env
|
||||
MONGODB_URI=mongodb://localhost:27017/ranaze-pos
|
||||
PORT=4000
|
||||
```
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Run in development
|
||||
|
||||
Terminal 1:
|
||||
|
||||
```bash
|
||||
npm run dev:server
|
||||
```
|
||||
|
||||
Terminal 2:
|
||||
|
||||
```bash
|
||||
npm run dev:client
|
||||
```
|
||||
|
||||
Open `http://localhost:5173`.
|
||||
|
||||
## Build and run
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
The production server serves the built frontend from `client/dist`.
|
||||
|
||||
## What is still missing
|
||||
|
||||
- Credit card processing
|
||||
- Receipt and label printing
|
||||
- Employee authentication and permissions
|
||||
- Multi-location inventory tracking
|
||||
- Hardware integrations for cash drawer and scanners
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ranaze POS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
root: "client",
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": "http://localhost:4000"
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: "dist",
|
||||
emptyOutDir: true
|
||||
}
|
||||
});
|
||||
Generated
+2788
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "ranaze-pos",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev:client": "vite --config client/vite.config.js",
|
||||
"dev:server": "node --watch server/index.js",
|
||||
"build": "vite build --config client/vite.config.js",
|
||||
"start": "node server/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.4.5",
|
||||
"express": "^4.21.2",
|
||||
"mongoose": "^8.9.5",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"vite": "^5.4.11"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import dotenv from "dotenv";
|
||||
|
||||
dotenv.config();
|
||||
|
||||
export const config = {
|
||||
port: Number(process.env.PORT || 4000),
|
||||
mongoUri: process.env.MONGODB_URI || "mongodb://localhost:27017/ranaze-pos"
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import mongoose from "mongoose";
|
||||
import { config } from "./config.js";
|
||||
|
||||
export async function connectToDatabase() {
|
||||
await mongoose.connect(config.mongoUri);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
export const defaultSettings = {
|
||||
sizeOptions: [
|
||||
{ name: "Regular", delta: 0 },
|
||||
{ name: "Large", delta: 1 }
|
||||
],
|
||||
sweetnessOptions: ["0%", "25%", "50%", "75%", "100%"],
|
||||
iceOptions: ["No Ice", "Less Ice", "Regular Ice"],
|
||||
toppings: [
|
||||
{ name: "Boba", price: 0.75 },
|
||||
{ name: "Pudding", price: 0.85 },
|
||||
{ name: "Cheese Foam", price: 1.25 },
|
||||
{ name: "Lychee Jelly", price: 0.75 }
|
||||
]
|
||||
};
|
||||
|
||||
export const defaultMenu = [
|
||||
{
|
||||
name: "Classic Milk Tea",
|
||||
category: "Milk Tea",
|
||||
description: "Black tea, milk, and brown sugar tapioca.",
|
||||
basePrice: 5.5
|
||||
},
|
||||
{
|
||||
name: "Taro Milk Tea",
|
||||
category: "Milk Tea",
|
||||
description: "Creamy taro with optional boba or pudding.",
|
||||
basePrice: 6
|
||||
},
|
||||
{
|
||||
name: "Mango Green Tea",
|
||||
category: "Fruit Tea",
|
||||
description: "Bright green tea with mango puree.",
|
||||
basePrice: 5.75
|
||||
},
|
||||
{
|
||||
name: "Strawberry Yakult",
|
||||
category: "Specialty",
|
||||
description: "Strawberry fruit tea with probiotic yogurt.",
|
||||
basePrice: 6.25
|
||||
}
|
||||
];
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
import cors from "cors";
|
||||
import express from "express";
|
||||
import path from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { connectToDatabase } from "./db.js";
|
||||
import { config } from "./config.js";
|
||||
import { MenuItem } from "./models/MenuItem.js";
|
||||
import { Order } from "./models/Order.js";
|
||||
import {
|
||||
computeOrderTotal,
|
||||
ensureSeedMenu,
|
||||
getSettings,
|
||||
nextOrderNumber,
|
||||
resetMenuToDefaults
|
||||
} from "./services.js";
|
||||
|
||||
const app = express();
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
const clientDist = path.resolve(__dirname, "../client/dist");
|
||||
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
app.get("/api/health", (_request, response) => {
|
||||
response.json({ ok: true });
|
||||
});
|
||||
|
||||
app.get("/api/bootstrap", async (_request, response, next) => {
|
||||
try {
|
||||
await ensureSeedMenu();
|
||||
const [menu, orders] = await Promise.all([
|
||||
MenuItem.find().sort({ category: 1, name: 1 }),
|
||||
Order.find({ status: { $ne: "completed" } }).sort({ createdAt: -1 })
|
||||
]);
|
||||
response.json({
|
||||
menu,
|
||||
orders,
|
||||
settings: getSettings()
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/api/menu", async (request, response, next) => {
|
||||
try {
|
||||
const { name, category, description = "", basePrice } = request.body;
|
||||
if (!name || !category || typeof basePrice !== "number" || Number.isNaN(basePrice)) {
|
||||
return response.status(400).json({ error: "Invalid menu item payload." });
|
||||
}
|
||||
const menuItem = await MenuItem.create({ name, category, description, basePrice });
|
||||
response.status(201).json({ menuItem });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.delete("/api/menu/:menuItemId", async (request, response, next) => {
|
||||
try {
|
||||
await MenuItem.findByIdAndDelete(request.params.menuItemId);
|
||||
response.json({ ok: true });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/api/menu/reset", async (_request, response, next) => {
|
||||
try {
|
||||
const menu = await resetMenuToDefaults();
|
||||
response.json({ menu });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.post("/api/orders", async (request, response, next) => {
|
||||
try {
|
||||
const { customerName = "", paymentMethod = "cash", lines } = request.body;
|
||||
if (!Array.isArray(lines) || lines.length === 0) {
|
||||
return response.status(400).json({ error: "Orders require at least one line item." });
|
||||
}
|
||||
const total = computeOrderTotal(lines);
|
||||
const order = await Order.create({
|
||||
number: await nextOrderNumber(),
|
||||
customerName,
|
||||
paymentMethod,
|
||||
lines,
|
||||
total
|
||||
});
|
||||
response.status(201).json({ order });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.patch("/api/orders/:orderId/status", async (request, response, next) => {
|
||||
try {
|
||||
const { status } = request.body;
|
||||
const order = await Order.findByIdAndUpdate(
|
||||
request.params.orderId,
|
||||
{ status },
|
||||
{ new: true, runValidators: true }
|
||||
);
|
||||
response.json({ order });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.delete("/api/orders/:orderId", async (request, response, next) => {
|
||||
try {
|
||||
await Order.findByIdAndDelete(request.params.orderId);
|
||||
response.json({ ok: true });
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
});
|
||||
|
||||
app.use(express.static(clientDist));
|
||||
|
||||
app.get("*", (request, response, next) => {
|
||||
if (request.path.startsWith("/api/")) {
|
||||
return next();
|
||||
}
|
||||
response.sendFile(path.join(clientDist, "index.html"));
|
||||
});
|
||||
|
||||
app.use((error, _request, response, _next) => {
|
||||
console.error(error);
|
||||
response.status(500).json({ error: error.message || "Internal server error" });
|
||||
});
|
||||
|
||||
connectToDatabase()
|
||||
.then(() => {
|
||||
app.listen(config.port, () => {
|
||||
console.log(`Ranaze POS server listening on port ${config.port}`);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to connect to MongoDB", error);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import mongoose from "mongoose";
|
||||
|
||||
const menuItemSchema = new mongoose.Schema(
|
||||
{
|
||||
name: { type: String, required: true, trim: true },
|
||||
category: { type: String, required: true, trim: true },
|
||||
description: { type: String, default: "", trim: true },
|
||||
basePrice: { type: Number, required: true, min: 0 }
|
||||
},
|
||||
{ timestamps: true }
|
||||
);
|
||||
|
||||
export const MenuItem = mongoose.model("MenuItem", menuItemSchema);
|
||||
@@ -0,0 +1,37 @@
|
||||
import mongoose from "mongoose";
|
||||
|
||||
const orderLineSchema = new mongoose.Schema(
|
||||
{
|
||||
menuItemId: { type: mongoose.Schema.Types.ObjectId, ref: "MenuItem", required: true },
|
||||
name: { type: String, required: true },
|
||||
basePrice: { type: Number, required: true },
|
||||
size: { type: String, required: true },
|
||||
sweetness: { type: String, required: true },
|
||||
ice: { type: String, required: true },
|
||||
toppings: { type: [String], default: [] },
|
||||
notes: { type: String, default: "" }
|
||||
},
|
||||
{ _id: false }
|
||||
);
|
||||
|
||||
const orderSchema = new mongoose.Schema(
|
||||
{
|
||||
number: { type: Number, required: true, unique: true },
|
||||
customerName: { type: String, default: "", trim: true },
|
||||
paymentMethod: {
|
||||
type: String,
|
||||
enum: ["cash", "tab", "unpaid"],
|
||||
default: "cash"
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
enum: ["new", "making", "ready", "completed"],
|
||||
default: "new"
|
||||
},
|
||||
lines: { type: [orderLineSchema], required: true },
|
||||
total: { type: Number, required: true, min: 0 }
|
||||
},
|
||||
{ timestamps: true }
|
||||
);
|
||||
|
||||
export const Order = mongoose.model("Order", orderSchema);
|
||||
@@ -0,0 +1,35 @@
|
||||
import { defaultMenu, defaultSettings } from "./defaults.js";
|
||||
import { MenuItem } from "./models/MenuItem.js";
|
||||
import { Order } from "./models/Order.js";
|
||||
|
||||
export function getSettings() {
|
||||
return defaultSettings;
|
||||
}
|
||||
|
||||
export async function ensureSeedMenu() {
|
||||
const count = await MenuItem.countDocuments();
|
||||
if (count === 0) {
|
||||
await MenuItem.insertMany(defaultMenu);
|
||||
}
|
||||
}
|
||||
|
||||
export async function resetMenuToDefaults() {
|
||||
await MenuItem.deleteMany({});
|
||||
await MenuItem.insertMany(defaultMenu);
|
||||
return MenuItem.find().sort({ category: 1, name: 1 });
|
||||
}
|
||||
|
||||
export async function nextOrderNumber() {
|
||||
const latest = await Order.findOne().sort({ number: -1 }).lean();
|
||||
return (latest?.number ?? 1000) + 1;
|
||||
}
|
||||
|
||||
export function computeOrderTotal(lines, settings = defaultSettings) {
|
||||
return lines.reduce((sum, line) => {
|
||||
const sizeDelta = settings.sizeOptions.find((option) => option.name === line.size)?.delta ?? 0;
|
||||
const toppings = line.toppings.reduce((toppingSum, toppingName) => {
|
||||
return toppingSum + (settings.toppings.find((item) => item.name === toppingName)?.price ?? 0);
|
||||
}, 0);
|
||||
return sum + line.basePrice + sizeDelta + toppings;
|
||||
}, 0);
|
||||
}
|
||||
Reference in New Issue
Block a user