Initial commit

2026-05-05 15:47:17 +00:00
commit 398df1d2e3
17 changed files with 4184 additions and 0 deletions
@@ -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
  }
 });
@@ -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
  }
 ];
@@ -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);
 }