Move page controls into main content

client/src/App.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   createMenuItem,
   createOrder,
@@ -8,20 +8,23 @@ import {
   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: ""
-});
+import MenuPage from "./pages/MenuPage.jsx";
+import OrderPage from "./pages/OrderPage.jsx";
+import QueuePage from "./pages/QueuePage.jsx";
+import {
+  ADMIN_PASSWORD,
+  ADMIN_UNLOCK_PRESS_MS,
+  initialBuilder,
+  ORDER_IDLE_TIMEOUT_MS
+} from "./lib/order.js";
 
 export default function App() {
+  const adminPressTimerRef = useRef(null);
   const [view, setView] = useState("order");
   const [orderMode, setOrderMode] = useState(null);
+  const [showCart, setShowCart] = useState(false);
+  const [adminUnlocked, setAdminUnlocked] = useState(false);
+  const [logoPressing, setLogoPressing] = useState(false);
   const [menu, setMenu] = useState([]);
   const [orders, setOrders] = useState([]);
   const [settings, setSettings] = useState(null);
@@ -44,6 +47,47 @@ export default function App() {
     loadBootstrap();
   }, []);
 
+  useEffect(() => {
+    return () => window.clearTimeout(adminPressTimerRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (!adminUnlocked && view !== "order") {
+      setView("order");
+    }
+  }, [adminUnlocked, view]);
+
+  useEffect(() => {
+    if (view !== "order" || !orderMode) {
+      return;
+    }
+
+    let timeoutId = window.setTimeout(() => {
+      setOrderMode(null);
+    }, ORDER_IDLE_TIMEOUT_MS);
+
+    function resetIdleTimer() {
+      window.clearTimeout(timeoutId);
+      timeoutId = window.setTimeout(() => {
+        setOrderMode(null);
+      }, ORDER_IDLE_TIMEOUT_MS);
+    }
+
+    const events = ["pointerdown", "keydown", "touchstart"];
+    events.forEach((eventName) => window.addEventListener(eventName, resetIdleTimer, { passive: true }));
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      events.forEach((eventName) => window.removeEventListener(eventName, resetIdleTimer));
+    };
+  }, [view, orderMode]);
+
+  useEffect(() => {
+    if (!orderMode) {
+      setShowCart(false);
+    }
+  }, [orderMode]);
+
   useEffect(() => {
     if (!settings) {
       return;
@@ -85,6 +129,30 @@ export default function App() {
     }
   }
 
+  function startAdminPress() {
+    window.clearTimeout(adminPressTimerRef.current);
+    setLogoPressing(true);
+    adminPressTimerRef.current = window.setTimeout(() => {
+      if (adminUnlocked) {
+        setAdminUnlocked(false);
+        setView("order");
+      } else {
+        const password = window.prompt("Enter admin password");
+        if (password === ADMIN_PASSWORD) {
+          setAdminUnlocked(true);
+        } else if (password !== null && password !== "") {
+          window.alert("Incorrect password");
+        }
+      }
+      setLogoPressing(false);
+    }, ADMIN_UNLOCK_PRESS_MS);
+  }
+
+  function cancelAdminPress() {
+    window.clearTimeout(adminPressTimerRef.current);
+    setLogoPressing(false);
+  }
+
   if (loading) {
     return <div className="page-state">Loading POS...</div>;
   }
@@ -98,583 +166,95 @@ export default function App() {
     );
   }
 
-  const categories = ["All", ...new Set(menu.map((item) => item.category))];
-  const visibleMenu = menu.filter((item) => {
-    return selectedCategory === "All" || item.category === selectedCategory;
-  });
-  const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
-  const modeDetails = {
-    premade: {
-      stepLabel: "Quick pick",
-      title: "Pick a house favorite",
-      description: "Choose a ready-to-go drink and add it to the ticket in one tap.",
-      buttonLabel: "Add this drink"
-    },
-    simple: {
-      stepLabel: "Quick customize",
-      title: selectedDrink?.name || "Choose a drink",
-      description: "Make a few easy choices and keep the line moving.",
-      buttonLabel: "Add customized drink"
-    },
-    detailed: {
-      stepLabel: "Full customize",
-      title: selectedDrink?.name || "Choose a drink",
-      description: "Adjust every detail, including toppings and special instructions.",
-      buttonLabel: "Add fully customized drink"
-    }
-  };
-  const activeMode = orderMode ? modeDetails[orderMode] : 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">
-          {!orderMode && (
-            <section className="panel mode-launcher">
-              <div className="mode-launcher-copy">
-                <p className="eyebrow">Start a new order</p>
-                <h2>How would you like to order today?</h2>
-                <p className="muted">
-                  Pick the path that feels easiest for your guest. You can switch anytime during the order.
-                </p>
-              </div>
-              <div className="mode-grid">
-                <button className="mode-card" onClick={() => setOrderMode("premade")}>
-                  <p className="eyebrow">Fastest</p>
-                  <h3>Pre-Made Recipes</h3>
-                  <p className="muted">Best for guests who want a house favorite with no extra decisions.</p>
-                </button>
-                <button className="mode-card" onClick={() => setOrderMode("simple")}>
-                  <p className="eyebrow">Easy</p>
-                  <h3>Simple Customization</h3>
-                  <p className="muted">Choose a drink, pick a size and sweetness level, and place it quickly.</p>
-                </button>
-                <button className="mode-card" onClick={() => setOrderMode("detailed")}>
-                  <p className="eyebrow">Flexible</p>
-                  <h3>Detailed Customization</h3>
-                  <p className="muted">Fine-tune ice, toppings, and special instructions for exact orders.</p>
-                </button>
-              </div>
-            </section>
-          )}
-
-          {orderMode && (
-          <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>
-          )}
-
-          {orderMode && (
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">Step 2 • {activeMode.stepLabel}</p>
-                <h2>{activeMode.title}</h2>
-                <p className="muted builder-intro">{activeMode.description}</p>
-              </div>
-              <div className="builder-header-actions">
-                <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
-                <div className="ticket-total">{formatCurrency(ticketTotal(ticket, settings))}</div>
-              </div>
-            </div>
-
-            {selectedDrink && builder ? (
-              <>
-                {orderMode !== "premade" && (
-                  <OptionGroup
-                    label="Size"
-                    choices={settings.sizeOptions.map((option) => option.name)}
-                    value={builder.size}
-                    onChange={(size) => setBuilder((current) => ({ ...current, size }))}
-                  />
-                )}
-                {orderMode !== "premade" && (
-                  <OptionGroup
-                    label="Sweetness"
-                    choices={settings.sweetnessOptions}
-                    value={builder.sweetness}
-                    onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
-                  />
-                )}
-                {orderMode === "detailed" && (
-                  <OptionGroup
-                    label="Ice"
-                    choices={settings.iceOptions}
-                    value={builder.ice}
-                    onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
-                  />
-                )}
-                {orderMode === "detailed" && (
-                  <div className="field">
-                    <span className="field-label">Toppings</span>
-                    <div className="choice-grid">
-                      {settings.toppings.map((topping) => {
-                        const checked = builder.toppings.includes(topping.name);
-                        return (
-                          <label key={topping.name} className="checkbox-tile">
-                            <input
-                              type="checkbox"
-                              checked={checked}
-                              onChange={() => {
-                                setBuilder((current) => ({
-                                  ...current,
-                                  toppings: checked
-                                    ? current.toppings.filter((item) => item !== topping.name)
-                                    : [...current.toppings, topping.name]
-                                }));
-                              }}
-                            />
-                            <span>{topping.name} (+{formatCurrency(topping.price)})</span>
-                          </label>
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-                {orderMode === "detailed" && (
-                  <label className="field">
-                    <span className="field-label">Special instructions</span>
-                    <textarea
-                      value={builder.notes}
-                      rows="3"
-                      onChange={(event) => {
-                        const notes = event.target.value;
-                        setBuilder((current) => ({ ...current, notes }));
-                      }}
-                    />
-                  </label>
-                )}
-                {orderMode === "premade" && (
-                  <div className="empty-state mode-note">
-                    This version uses the house recipe exactly as listed on the menu.
-                  </div>
-                )}
-                <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));
-                    }}
-                  >
-                    {activeMode.buttonLabel}
-                  </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>
+        <OrderPage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
+          menu={menu}
+          settings={settings}
+          selectedCategory={selectedCategory}
+          setSelectedCategory={setSelectedCategory}
+          selectedDrinkId={selectedDrinkId}
+          setSelectedDrinkId={setSelectedDrinkId}
+          builder={builder}
+          setBuilder={setBuilder}
+          ticket={ticket}
+          setTicket={setTicket}
+          orderMode={orderMode}
+          setOrderMode={setOrderMode}
+          showCart={showCart}
+          setShowCart={setShowCart}
+          customerName={customerName}
+          setCustomerName={setCustomerName}
+          paymentMethod={paymentMethod}
+          setPaymentMethod={setPaymentMethod}
+          createOrder={createOrder}
+          setOrders={setOrders}
+          setError={setError}
+        />
       )}
 
       {view === "queue" && (
-        <section className="queue-screen">
-          <div className="queue-summary">
-            <SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
-            <SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
-            <SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
-            <SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
-          </div>
-          <div className="queue-columns">
-            {queueStatuses.map((status) => (
-              <section key={status} className="queue-column">
-                <div className="column-head">
-                  <p className="eyebrow">{titleCase(status)}</p>
-                  <h3>{orders.filter((order) => order.status === status).length} orders</h3>
-                </div>
-                {orders.filter((order) => order.status === status).map((order) => (
-                  <article key={order._id} className="queue-card">
-                    <header>
-                      <div>
-                        <p className="eyebrow">Order #{order.number}</p>
-                        <h3>{order.customerName || "Walk-in"}</h3>
-                      </div>
-                      <strong>{formatCurrency(order.total)}</strong>
-                    </header>
-                    <p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
-                    <div>
-                      {order.lines.map((line, index) => (
-                        <p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
-                      ))}
-                    </div>
-                    <div className="status-actions">
-                      {nextStatusButton(order, async (newStatus) => {
-                        try {
-                          const response = await updateOrderStatus(order._id, newStatus);
-                          setOrders((current) => current.map((item) => {
-                            return item._id === response.order._id ? response.order : item;
-                          }));
-                        } catch (requestError) {
-                          setError(requestError.message);
-                        }
-                      })}
-                      <button
-                        className="status-btn danger"
-                        onClick={async () => {
-                          try {
-                            await deleteOrder(order._id);
-                            setOrders((current) => current.filter((item) => item._id !== order._id));
-                          } catch (requestError) {
-                            setError(requestError.message);
-                          }
-                        }}
-                      >
-                        Delete
-                      </button>
-                    </div>
-                  </article>
-                ))}
-                {orders.filter((order) => order.status === status).length === 0 && (
-                  <div className="empty-state">No orders in {status}.</div>
-                )}
-              </section>
-            ))}
-          </div>
-        </section>
+        <QueuePage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
+          orders={orders}
+          updateOrderStatus={updateOrderStatus}
+          deleteOrder={deleteOrder}
+          setOrders={setOrders}
+          setError={setError}
+        />
       )}
 
       {view === "menu" && (
-        <section className="menu-screen">
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">Menu management</p>
-                <h2>Drinks and pricing</h2>
-              </div>
-            </div>
-            <div className="menu-form">
-              <label className="field">
-                <span className="field-label">Drink name</span>
-                <input
-                  value={menuForm.name}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Category</span>
-                <input
-                  value={menuForm.category}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Description</span>
-                <textarea
-                  rows="3"
-                  value={menuForm.description}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
-                />
-              </label>
-              <label className="field">
-                <span className="field-label">Base price</span>
-                <input
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  value={menuForm.price}
-                  onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
-                />
-              </label>
-              <button
-                className="primary-btn"
-                onClick={async () => {
-                  try {
-                    const response = await createMenuItem({
-                      name: menuForm.name,
-                      category: menuForm.category,
-                      description: menuForm.description,
-                      basePrice: Number(menuForm.price)
-                    });
-                    setMenu((current) => [...current, response.menuItem]);
-                    setMenuForm({ name: "", category: "", description: "", price: "" });
-                  } catch (requestError) {
-                    setError(requestError.message);
-                  }
-                }}
-              >
-                Add drink
-              </button>
-            </div>
-          </div>
-
-          <div className="panel">
-            <div className="panel-header">
-              <div>
-                <p className="eyebrow">Saved in Mongo</p>
-                <h2>Current menu</h2>
-              </div>
-              <button
-                className="text-btn"
-                onClick={async () => {
-                  try {
-                    const response = await resetMenu();
-                    setMenu(response.menu);
-                    setSelectedDrinkId(response.menu[0]?._id ?? null);
-                    setBuilder(initialBuilder(settings));
-                  } catch (requestError) {
-                    setError(requestError.message);
-                  }
-                }}
-              >
-                Reset defaults
-              </button>
-            </div>
-            <div className="menu-list">
-              {menu.map((drink) => (
-                <article key={drink._id} className="menu-item">
-                  <div>
-                    <p className="eyebrow">{drink.category}</p>
-                    <h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
-                    <p className="muted">{drink.description}</p>
-                  </div>
-                  <div className="menu-item-actions">
-                    <button
-                      className="text-btn"
-                      onClick={async () => {
-                        try {
-                          await deleteMenuItem(drink._id);
-                          setMenu((current) => current.filter((item) => item._id !== drink._id));
-                        } catch (requestError) {
-                          setError(requestError.message);
-                        }
-                      }}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                </article>
-              ))}
-            </div>
-          </div>
-        </section>
+        <MenuPage
+          adminUnlocked={adminUnlocked}
+          logoPressing={logoPressing}
+          onLogoPointerDown={startAdminPress}
+          onLogoPointerUp={cancelAdminPress}
+          onLogoPointerLeave={cancelAdminPress}
+          onLogoPointerCancel={cancelAdminPress}
+          onHideAdmin={() => {
+            setAdminUnlocked(false);
+            setView("order");
+          }}
+          view={view}
+          setView={setView}
+          menu={menu}
+          menuForm={menuForm}
+          setMenuForm={setMenuForm}
+          createMenuItem={createMenuItem}
+          deleteMenuItem={deleteMenuItem}
+          resetMenu={resetMenu}
+          setMenu={setMenu}
+          setSelectedDrinkId={setSelectedDrinkId}
+          settings={settings}
+          setBuilder={setBuilder}
+          setError={setError}
+        />
       )}
     </div>
   );
 }
-
-function OptionGroup({ label, choices, value, onChange }) {
-  return (
-    <div className="field">
-      <span className="field-label">{label}</span>
-      <div className="choice-row">
-        {choices.map((choice) => (
-          <button
-            key={choice}
-            className={`choice-btn ${choice === value ? "is-active" : ""}`}
-            onClick={() => onChange(choice)}
-          >
-            {choice}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function SummaryCard({ label, value }) {
-  return (
-    <article className="summary-card">
-      <p className="eyebrow">{label}</p>
-      <strong>{value}</strong>
-    </article>
-  );
-}
-
-function 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);
-}

client/src/components/OptionGroup.jsx

@@ -0,0 +1,18 @@
+export default function OptionGroup({ label, choices, value, onChange }) {
+  return (
+    <div className="field">
+      <span className="field-label">{label}</span>
+      <div className="choice-row">
+        {choices.map((choice) => (
+          <button
+            key={choice}
+            className={`choice-btn ${choice === value ? "is-active" : ""}`}
+            onClick={() => onChange(choice)}
+          >
+            {choice}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/PageBar.jsx

@@ -0,0 +1,52 @@
+import logo from "../../../assets/ranaze-logo-transparent.png";
+
+const tabLabels = {
+  queue: "Order Status",
+  menu: "Menu Admin"
+};
+
+export default function PageBar({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView
+}) {
+  const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
+
+  return (
+    <div className="page-bar">
+      <button
+        className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
+        onPointerDown={onLogoPointerDown}
+        onPointerUp={onLogoPointerUp}
+        onPointerLeave={onLogoPointerLeave}
+        onPointerCancel={onLogoPointerCancel}
+        onContextMenu={(event) => event.preventDefault()}
+        type="button"
+      >
+        <img src={logo} alt="Ranaze Bubble Tea & Slush" />
+      </button>
+      {adminUnlocked && (
+        <nav className="tabs">
+          {visibleTabs.map((tab) => (
+            <button
+              key={tab}
+              className={`tab ${view === tab ? "is-active" : ""}`}
+              onClick={() => setView(tab)}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+          <button className="tab admin-lock-btn" onClick={onHideAdmin}>
+            Hide Admin
+          </button>
+        </nav>
+      )}
+    </div>
+  );
+}

client/src/components/SummaryCard.jsx

@@ -0,0 +1,8 @@
+export default function SummaryCard({ label, value }) {
+  return (
+    <article className="summary-card">
+      <p className="eyebrow">{label}</p>
+      <strong>{value}</strong>
+    </article>
+  );
+}

client/src/lib/formatters.js

@@ -0,0 +1,17 @@
+export function formatCurrency(value) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD"
+  }).format(value);
+}
+
+export function formatTime(value) {
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+export function titleCase(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}

client/src/lib/order.js

@@ -0,0 +1,48 @@
+export const ORDER_IDLE_TIMEOUT_MS = 90_000;
+export const ADMIN_UNLOCK_PRESS_MS = 3_000;
+export const ADMIN_PASSWORD = "admin";
+
+export const HERO_CATEGORIES = [
+  { label: "Milk Tea", asset: "milk-tea", displayLabel: "Milk Tea" },
+  { label: "Fruit Tea", asset: "fruit-tea", displayLabel: "Fruit Tea" },
+  { label: "Specialty", asset: "slush", displayLabel: "Slush" }
+];
+
+export function initialBuilder(settings) {
+  return {
+    size: settings.sizeOptions[0]?.name ?? "Regular",
+    sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
+    ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
+    toppings: [],
+    notes: ""
+  };
+}
+
+export function toppingTotal(toppings, settings) {
+  return toppings.reduce((sum, toppingName) => {
+    const topping = settings.toppings.find((item) => item.name === toppingName);
+    return sum + (topping?.price ?? 0);
+  }, 0);
+}
+
+export function sizeDelta(size, settings) {
+  return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
+}
+
+export function lineTotal(drink, builder, settings) {
+  return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
+}
+
+export function ticketTotal(ticket, settings) {
+  return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
+}
+
+export function categoryMonogram(category) {
+  const map = {
+    "Milk Tea": "MT",
+    "Fruit Tea": "FT",
+    Specialty: "SP"
+  };
+
+  return map[category] || category.slice(0, 2).toUpperCase();
+}

client/src/pages/MenuPage.jsx

@@ -0,0 +1,153 @@
+import PageBar from "../components/PageBar.jsx";
+import { formatCurrency } from "../lib/formatters.js";
+import { initialBuilder } from "../lib/order.js";
+
+export default function MenuPage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
+  menu,
+  menuForm,
+  setMenuForm,
+  createMenuItem,
+  deleteMenuItem,
+  resetMenu,
+  setMenu,
+  setSelectedDrinkId,
+  settings,
+  setBuilder,
+  setError
+}) {
+  return (
+    <section className="menu-screen">
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
+      <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>
+  );
+}

client/src/pages/OrderPage.jsx

@@ -0,0 +1,401 @@
+import milkTeaBadge from "../../../assets/milk-tea-badge.png";
+import fruitTeaBadge from "../../../assets/fruit-tea-badge-transparent.png";
+import slushBadge from "../../../assets/slush-badge.png";
+import OptionGroup from "../components/OptionGroup.jsx";
+import PageBar from "../components/PageBar.jsx";
+import {
+  categoryMonogram,
+  HERO_CATEGORIES,
+  initialBuilder,
+  lineTotal,
+  ticketTotal
+} from "../lib/order.js";
+import { formatCurrency } from "../lib/formatters.js";
+
+const heroCategoryImages = {
+  "milk-tea": milkTeaBadge,
+  "fruit-tea": fruitTeaBadge,
+  slush: slushBadge
+};
+
+export default function OrderPage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
+  menu,
+  settings,
+  selectedCategory,
+  setSelectedCategory,
+  selectedDrinkId,
+  setSelectedDrinkId,
+  builder,
+  setBuilder,
+  ticket,
+  setTicket,
+  orderMode,
+  setOrderMode,
+  showCart,
+  setShowCart,
+  customerName,
+  setCustomerName,
+  paymentMethod,
+  setPaymentMethod,
+  createOrder,
+  setOrders,
+  setError
+}) {
+  const categories = ["All", ...new Set(menu.map((item) => item.category))];
+  const visibleMenu = menu.filter((item) => {
+    return selectedCategory === "All" || item.category === selectedCategory;
+  });
+  const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
+  const activeMode = getModeDetails(orderMode, selectedDrink);
+
+  function addLineToTicket(drink, lineBuilder) {
+    setTicket((current) => [
+      ...current,
+      {
+        menuItemId: drink._id,
+        name: drink.name,
+        basePrice: drink.basePrice,
+        ...lineBuilder
+      }
+    ]);
+  }
+
+  return (
+    <section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
+      {orderMode && (
+        <div className="order-toolbar">
+          <button className="text-btn" onClick={() => {
+            setOrderMode(null);
+            setShowCart(false);
+          }}>
+            Back to drink options
+          </button>
+          <div className="order-toolbar-actions">
+            {ticket.length > 0 && (
+              <button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
+                View Order ({ticket.length})
+              </button>
+            )}
+            <p className="muted order-toolbar-note">
+              This screen returns to the drink menu after 90 seconds of inactivity.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {!orderMode && (
+        <section className="panel mode-launcher">
+          <div className="mode-launcher-copy">
+            <p className="eyebrow">Welcome to Ranaze</p>
+            <h2>Choose your drink.</h2>
+            <div className="hero-copy-list muted">
+              <p>Start fast.</p>
+              <p>Customize if you want.</p>
+            </div>
+            <div className="hero-category-row">
+              {HERO_CATEGORIES.map((category) => (
+                <button
+                  key={category.label}
+                  className="hero-category-btn"
+                  onClick={() => {
+                    setSelectedCategory(category.label);
+                    setOrderMode("premade");
+                  }}
+                >
+                  <img src={heroCategoryImages[category.asset]} alt="" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {orderMode && !showCart && (
+        <div className="panel">
+          <div className="panel-header">
+            <div>
+              <p className="eyebrow">{activeMode.stepLabel}</p>
+              <h2>Choose a drink</h2>
+              <p className="muted builder-intro">{activeMode.description}</p>
+            </div>
+            <div className="builder-header-actions">
+              <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
+              {ticket.length > 0 && (
+                <button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
+              )}
+            </div>
+          </div>
+          <div className="chip-row">
+            {categories.map((category) => (
+              <button
+                key={category}
+                className={`chip ${selectedCategory === category ? "is-active" : ""}`}
+                onClick={() => setSelectedCategory(category)}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+          <div className="drink-grid">
+            {visibleMenu.map((drink) => (
+              <button
+                key={drink._id}
+                className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
+                onClick={() => {
+                  if (orderMode === "premade") {
+                    addLineToTicket(drink, initialBuilder(settings));
+                    return;
+                  }
+                  setSelectedDrinkId(drink._id);
+                  setBuilder(initialBuilder(settings));
+                }}
+              >
+                <div className="drink-card-badge">
+                  <span>{categoryMonogram(drink.category)}</span>
+                </div>
+                <div className="drink-card-copy">
+                  <p className="eyebrow">{drink.category}</p>
+                  <h3>{drink.name}</h3>
+                  <p className="muted">{drink.description}</p>
+                </div>
+                <strong>{formatCurrency(drink.basePrice)}</strong>
+              </button>
+            ))}
+          </div>
+          {orderMode === "premade" && (
+            <div className="empty-state mode-note">
+              Tap any drink to add it to your order. Use the order button whenever you are ready to review.
+            </div>
+          )}
+        </div>
+      )}
+
+      {orderMode && !showCart && orderMode !== "premade" && (
+        <div className="panel">
+          {selectedDrink && builder ? (
+            <div className="inline-builder">
+              <div className="inline-builder-header">
+                <div>
+                  <p className="eyebrow">Your drink</p>
+                  <h3>{activeMode.title}</h3>
+                </div>
+                <div className="line-price">
+                  {formatCurrency(lineTotal(selectedDrink, builder, settings))}
+                </div>
+              </div>
+
+              <OptionGroup
+                label="Size"
+                choices={settings.sizeOptions.map((option) => option.name)}
+                value={builder.size}
+                onChange={(size) => setBuilder((current) => ({ ...current, size }))}
+              />
+              <OptionGroup
+                label="Sweetness"
+                choices={settings.sweetnessOptions}
+                value={builder.sweetness}
+                onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
+              />
+              {orderMode === "detailed" && (
+                <OptionGroup
+                  label="Ice"
+                  choices={settings.iceOptions}
+                  value={builder.ice}
+                  onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
+                />
+              )}
+              {orderMode === "detailed" && (
+                <div className="field">
+                  <span className="field-label">Toppings</span>
+                  <div className="choice-grid">
+                    {settings.toppings.map((topping) => {
+                      const checked = builder.toppings.includes(topping.name);
+                      return (
+                        <label key={topping.name} className="checkbox-tile">
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => {
+                              setBuilder((current) => ({
+                                ...current,
+                                toppings: checked
+                                  ? current.toppings.filter((item) => item !== topping.name)
+                                  : [...current.toppings, topping.name]
+                              }));
+                            }}
+                          />
+                          <span>{topping.name} (+{formatCurrency(topping.price)})</span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+              {orderMode === "detailed" && (
+                <label className="field">
+                  <span className="field-label">Special instructions</span>
+                  <textarea
+                    value={builder.notes}
+                    rows="3"
+                    onChange={(event) => {
+                      const notes = event.target.value;
+                      setBuilder((current) => ({ ...current, notes }));
+                    }}
+                  />
+                </label>
+              )}
+              <div className="builder-actions">
+                <button
+                  className="primary-btn"
+                  onClick={() => {
+                    addLineToTicket(selectedDrink, builder);
+                    setBuilder(initialBuilder(settings));
+                  }}
+                >
+                  {activeMode.buttonLabel}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
+          )}
+        </div>
+      )}
+
+      {orderMode && showCart && (
+        <div className="panel cart-panel">
+          <section className="ticket">
+            <div className="ticket-header">
+              <div>
+                <p className="eyebrow">Your order</p>
+                <h3>Review your drinks</h3>
+              </div>
+              <div className="ticket-header-actions">
+                <button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
+                <button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
+              </div>
+            </div>
+
+            <div className="ticket-lines">
+              {ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
+              {ticket.map((line, index) => (
+                <article key={`${line.menuItemId}-${index}`} className="ticket-line">
+                  <header>
+                    <strong>{line.name}</strong>
+                    <button
+                      className="text-btn"
+                      onClick={() => {
+                        setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
+                      }}
+                    >
+                      Remove
+                    </button>
+                  </header>
+                  <p>{line.size} • {line.sweetness} • {line.ice}</p>
+                  <p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No extra toppings"}</p>
+                  {line.notes && <p className="muted">Special request: {line.notes}</p>}
+                  <div className="line-meta">
+                    <span>Drink total</span>
+                    <strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
+                  </div>
+                </article>
+              ))}
+            </div>
+
+            <div className="checkout-form">
+              <label className="field">
+                <span className="field-label">Name for the order</span>
+                <input
+                  placeholder="Optional"
+                  value={customerName}
+                  maxLength="40"
+                  onChange={(event) => setCustomerName(event.target.value)}
+                />
+              </label>
+              <label className="field">
+                <span className="field-label">How would you like to pay?</span>
+                <select
+                  value={paymentMethod}
+                  onChange={(event) => setPaymentMethod(event.target.value)}
+                >
+                  <option value="cash">Cash</option>
+                  <option value="tab">Store Tab</option>
+                  <option value="unpaid">Pay Later</option>
+                </select>
+              </label>
+              <button
+                className="primary-btn"
+                disabled={ticket.length === 0}
+                onClick={async () => {
+                  try {
+                    const payload = {
+                      customerName,
+                      paymentMethod,
+                      lines: ticket
+                    };
+                    const response = await createOrder(payload);
+                    setOrders((current) => [response.order, ...current]);
+                    setTicket([]);
+                    setCustomerName("");
+                    setPaymentMethod("cash");
+                    setShowCart(false);
+                    setOrderMode(null);
+                  } catch (requestError) {
+                    setError(requestError.message);
+                  }
+                }}
+              >
+                Place my order
+              </button>
+            </div>
+          </section>
+        </div>
+      )}
+    </section>
+  );
+}
+
+function getModeDetails(orderMode, selectedDrink) {
+  const modeDetails = {
+    premade: {
+      stepLabel: "House favorite",
+      title: selectedDrink?.name || "Pick a house favorite",
+      description: "Ready to enjoy. One quick tap.",
+      buttonLabel: "Add to my order"
+    },
+    simple: {
+      stepLabel: "Quick customize",
+      title: selectedDrink?.name || "Choose your drink",
+      description: "Pick your drink. Choose size and sweetness.",
+      buttonLabel: "Add to my order"
+    },
+    detailed: {
+      stepLabel: "Build it your way",
+      title: selectedDrink?.name || "Build your drink",
+      description: "Customize it all. Ice, toppings, and special requests.",
+      buttonLabel: "Add to my order"
+    }
+  };
+
+  return modeDetails[orderMode];
+}

client/src/pages/QueuePage.jsx

@@ -0,0 +1,121 @@
+import PageBar from "../components/PageBar.jsx";
+import SummaryCard from "../components/SummaryCard.jsx";
+import { formatCurrency, formatTime, titleCase } from "../lib/formatters.js";
+
+const queueStatuses = ["new", "making", "ready"];
+
+export default function QueuePage({
+  adminUnlocked,
+  logoPressing,
+  onLogoPointerDown,
+  onLogoPointerUp,
+  onLogoPointerLeave,
+  onLogoPointerCancel,
+  onHideAdmin,
+  view,
+  setView,
+  orders,
+  updateOrderStatus,
+  deleteOrder,
+  setOrders,
+  setError
+}) {
+  return (
+    <section className="queue-screen">
+      <PageBar
+        adminUnlocked={adminUnlocked}
+        logoPressing={logoPressing}
+        onLogoPointerDown={onLogoPointerDown}
+        onLogoPointerUp={onLogoPointerUp}
+        onLogoPointerLeave={onLogoPointerLeave}
+        onLogoPointerCancel={onLogoPointerCancel}
+        onHideAdmin={onHideAdmin}
+        view={view}
+        setView={setView}
+      />
+      <div className="queue-summary">
+        <SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
+        <SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
+        <SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
+        <SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
+      </div>
+      <div className="queue-columns">
+        {queueStatuses.map((status) => (
+          <section key={status} className="queue-column">
+            <div className="column-head">
+              <p className="eyebrow">{titleCase(status)}</p>
+              <h3>{orders.filter((order) => order.status === status).length} orders</h3>
+            </div>
+            {orders.filter((order) => order.status === status).map((order) => (
+              <article key={order._id} className="queue-card">
+                <header>
+                  <div>
+                    <p className="eyebrow">Order #{order.number}</p>
+                    <h3>{order.customerName || "Walk-in"}</h3>
+                  </div>
+                  <strong>{formatCurrency(order.total)}</strong>
+                </header>
+                <p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
+                <div>
+                  {order.lines.map((line, index) => (
+                    <p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
+                  ))}
+                </div>
+                <div className="status-actions">
+                  <NextStatusButton
+                    order={order}
+                    onAdvance={async (newStatus) => {
+                      try {
+                        const response = await updateOrderStatus(order._id, newStatus);
+                        setOrders((current) => current.map((item) => {
+                          return item._id === response.order._id ? response.order : item;
+                        }));
+                      } catch (requestError) {
+                        setError(requestError.message);
+                      }
+                    }}
+                  />
+                  <button
+                    className="status-btn danger"
+                    onClick={async () => {
+                      try {
+                        await deleteOrder(order._id);
+                        setOrders((current) => current.filter((item) => item._id !== order._id));
+                      } catch (requestError) {
+                        setError(requestError.message);
+                      }
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </article>
+            ))}
+            {orders.filter((order) => order.status === status).length === 0 && (
+              <div className="empty-state">No orders in {status}.</div>
+            )}
+          </section>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function NextStatusButton({ order, onAdvance }) {
+  const map = {
+    new: "making",
+    making: "ready",
+    ready: "completed"
+  };
+  const next = map[order.status];
+
+  if (!next) {
+    return null;
+  }
+
+  return (
+    <button className="status-btn" onClick={() => onAdvance(next)}>
+      {next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
+    </button>
+  );
+}

client/src/styles.css

@@ -1,16 +1,33 @@
 :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;
+  --bg: #f5eedf;
+  --panel: rgba(255, 251, 244, 0.92);
+  --panel-strong: #f8ecda;
+  --ink: #111111;
+  --muted: #4f4f4f;
+  --accent: #101010;
+  --accent-soft: #f4ddae;
+  --warm: #f6b33e;
+  --warm-deep: #dfa232;
+  --line: rgba(33, 28, 21, 0.12);
+  --danger: #aa4639;
+  --shadow: 0 20px 45px rgba(83, 61, 24, 0.12);
+  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(circle at center, rgba(255, 252, 247, 0.82) 0%, rgba(255, 252, 247, 0.9) 32%, rgba(255, 252, 247, 0) 58%),
+    linear-gradient(180deg, rgba(255, 249, 239, 0.92), rgba(245, 231, 208, 0.95)),
+    radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.09), transparent 20%),
+    radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.13), transparent 22%),
+    radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.1), transparent 20%),
+    radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.07), transparent 20%);
+  filter: blur(10px);
+  pointer-events: none;
+  z-index: -1;
 }
 
 * {
@@ -20,9 +37,11 @@
 body {
   margin: 0;
   color: var(--ink);
+  line-height: 1.5;
   background:
-    radial-gradient(circle at top left, rgba(201, 120, 77, 0.18), transparent 28%),
-    linear-gradient(180deg, #f9f3ea, #efe3d3 55%, #eadcc8);
+    radial-gradient(circle at top left, rgba(246, 179, 62, 0.14), transparent 28%),
+    radial-gradient(circle at right center, rgba(244, 221, 174, 0.22), transparent 22%),
+    linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
 }
 
 button,
@@ -38,34 +57,91 @@ button {
 
 .app-shell {
   min-height: 100vh;
-  padding: 1rem;
+  padding: 0.9rem 1rem 1rem;
 }
 
-.topbar {
+.page-bar {
   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);
+  grid-column: 1 / -1;
+  margin-bottom: 0.2rem;
 }
 
-.topbar h1,
+.page-bar h1,
 .panel h2,
 .panel h3 {
   margin: 0.2rem 0 0;
   font-family: Georgia, "Times New Roman", serif;
 }
 
+.page-bar h1 {
+  font-weight: 800;
+}
+
+.panel h2 {
+  font-weight: 600;
+}
+
+p,
+label,
+input,
+select,
+textarea,
+button {
+  font-weight: 400;
+}
+
+.brand-mark {
+  width: 96px;
+  height: 96px;
+  flex: 0 0 auto;
+  border-radius: 32px;
+  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 248, 232, 0.72));
+  border: 1px solid rgba(16, 16, 16, 0.04);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 16px 32px rgba(83, 61, 24, 0.1);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  padding: 0;
+  appearance: none;
+  cursor: default;
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+}
+
+.brand-mark.is-pressing {
+  transform: scale(0.98);
+  border-color: rgba(246, 179, 62, 0.45);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 10px 20px rgba(83, 61, 24, 0.14);
+}
+
+.brand-mark img {
+  width: 88%;
+  height: 88%;
+  object-fit: contain;
+}
+
+.hero-copy-list,
+.mode-card-list {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.hero-copy-list p,
+.mode-card-list p {
+  margin: 0;
+}
+
 .eyebrow {
   margin: 0;
   color: var(--muted);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   font-size: 0.72rem;
   font-weight: 700;
 }
@@ -84,12 +160,45 @@ button {
   flex-wrap: wrap;
 }
 
+.tabs {
+  padding: 0.4rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(16, 16, 16, 0.06);
+}
+
 .screen {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 1rem;
 }
 
+.order-screen.is-single {
+  grid-template-columns: 1fr;
+}
+
+.order-toolbar {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.25rem;
+}
+
+.order-toolbar-note {
+  margin: 0;
+  font-size: 0.92rem;
+}
+
+.order-toolbar-actions,
+.ticket-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
 .queue-screen,
 .menu-screen {
   display: grid;
@@ -99,48 +208,141 @@ button {
 .panel,
 .summary-card {
   background: var(--panel);
-  border: 1px solid rgba(47, 93, 80, 0.1);
+  border: 1px solid rgba(16, 16, 16, 0.08);
   border-radius: 28px;
   padding: 1rem;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
 }
 
 .mode-launcher {
   grid-column: 1 / -1;
   display: grid;
-  gap: 1.25rem;
-  padding: 1.4rem;
+  gap: 0.85rem;
+  padding: 1rem 1.05rem;
   background:
-    radial-gradient(circle at top right, rgba(47, 93, 80, 0.1), transparent 24%),
-    linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(247, 239, 227, 0.98));
+    radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
+    linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
 }
 
 .mode-launcher-copy {
   max-width: 48rem;
+  display: grid;
+  gap: 0.3rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.mode-launcher-copy h2 {
+  font-size: clamp(1.65rem, 2.8vw, 2.45rem);
+  line-height: 0.98;
+}
+
+.hero-cta-row {
+  margin-top: 0.35rem;
+}
+
+.hero-primary-btn {
+  min-width: 220px;
+  padding: 18px 28px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #171311, #2a201a);
+  color: #ffffff;
+  box-shadow: 0 18px 34px rgba(23, 19, 17, 0.24);
+}
+
+.hero-category-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 0.2rem;
+}
+
+.hero-category-btn {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 0.65rem;
+  min-height: 148px;
+  padding: 1rem;
+  border: 1px solid rgba(17, 17, 17, 0.1);
+  border-radius: 22px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 235, 209, 0.96));
+  color: #111111;
+  box-shadow: 0 14px 28px rgba(83, 61, 24, 0.1);
+  text-align: center;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+}
+
+.hero-category-btn:hover {
+  transform: translateY(-3px);
+  border-color: rgba(23, 19, 17, 0.24);
+  box-shadow: 0 20px 34px rgba(83, 61, 24, 0.16);
+}
+
+.hero-category-btn img {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
 }
 
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
+  gap: 0.8rem;
+}
+
+.mode-hero {
+  display: grid;
+  grid-template-columns: 1fr 150px;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.7rem 0.9rem;
+  border-radius: 26px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(247, 221, 161, 0.36));
+  border: 1px solid rgba(16, 16, 16, 0.06);
+}
+
+.mode-hero-copy {
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.mode-hero-copy p {
+  margin: 0;
+}
+
+.mode-hero-image {
+  width: 100%;
+  max-height: 150px;
+  object-fit: contain;
+  justify-self: end;
+  filter: drop-shadow(0 22px 24px rgba(83, 61, 24, 0.16));
 }
 
 .mode-card {
   display: grid;
   gap: 0.65rem;
-  padding: 1.25rem;
-  border: 1px solid rgba(47, 93, 80, 0.14);
+  align-content: start;
+  padding: 1rem;
+  min-height: 150px;
+  border: 1px solid rgba(16, 16, 16, 0.08);
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.9);
   text-align: left;
-  box-shadow: 0 10px 24px rgba(59, 47, 34, 0.08);
-  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+  box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
 }
 
 .mode-card:hover {
-  transform: translateY(-2px);
-  border-color: rgba(47, 93, 80, 0.34);
-  box-shadow: 0 16px 32px rgba(59, 47, 34, 0.12);
+  transform: translateY(-4px) scale(1.01);
+  border-color: rgba(246, 179, 62, 0.5);
+  box-shadow: 0 22px 38px rgba(83, 61, 24, 0.18);
+  background: rgba(255, 255, 255, 0.98);
 }
 
 .mode-card h3,
@@ -148,6 +350,20 @@ button {
   margin: 0;
 }
 
+.mode-card-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+  min-height: 46px;
+  padding: 0.8rem 1rem;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #171311, #2a201a);
+  color: #ffffff;
+  font-weight: 700;
+  box-shadow: 0 12px 24px rgba(23, 19, 17, 0.18);
+}
+
 .panel-header,
 .queue-card header,
 .menu-form,
@@ -161,7 +377,7 @@ button {
 .panel-header {
   grid-template-columns: 1fr auto;
   align-items: start;
-  margin-bottom: 1rem;
+  margin-bottom: 0.7rem;
 }
 
 .builder-header-actions {
@@ -176,7 +392,7 @@ button {
 .status-btn {
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.94);
   color: var(--ink);
   padding: 0.75rem 1rem;
 }
@@ -185,8 +401,13 @@ button {
 .choice-btn.is-active,
 .chip.is-active {
   background: var(--accent);
-  color: #fff;
+  color: #fff6e8;
   border-color: var(--accent);
+  box-shadow: 0 8px 18px rgba(16, 16, 16, 0.18);
+}
+
+.admin-lock-btn {
+  color: var(--muted);
 }
 
 .text-btn {
@@ -197,9 +418,15 @@ button {
   border: none;
   border-radius: 18px;
   padding: 0.95rem 1.2rem;
-  background: var(--warm);
-  color: #fff;
+  background: linear-gradient(135deg, var(--warm), var(--warm-deep));
+  color: #1b1408;
   font-weight: 700;
+  box-shadow: 0 12px 24px rgba(223, 162, 50, 0.28);
+}
+
+.subtle-btn {
+  box-shadow: none;
+  padding-inline: 1rem;
 }
 
 .primary-btn:disabled {
@@ -227,14 +454,53 @@ button {
 .ticket-line {
   border: 1px solid var(--line);
   border-radius: 22px;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.92);
   padding: 1rem;
   text-align: left;
 }
 
+.drink-card {
+  display: grid;
+  grid-template-columns: 74px 1fr auto;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+.drink-card-badge {
+  width: 74px;
+  height: 74px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 236, 210, 0.9));
+  border: 1px solid rgba(16, 16, 16, 0.06);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+
+.drink-card-badge span {
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #191512;
+}
+
+.drink-card-copy {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.drink-card h3,
+.ticket-line strong,
+.queue-card h3 {
+  line-height: 1.05;
+}
+
 .drink-card.is-selected {
-  border-color: var(--accent);
-  box-shadow: inset 0 0 0 2px rgba(47, 93, 80, 0.15);
+  border-color: rgba(246, 179, 62, 0.7);
+  box-shadow:
+    inset 0 0 0 2px rgba(246, 179, 62, 0.2),
+    0 14px 28px rgba(223, 162, 50, 0.14);
 }
 
 .muted {
@@ -261,7 +527,7 @@ button {
   padding: 0.85rem 1rem;
   border: 1px solid var(--line);
   border-radius: 18px;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.92);
 }
 
 textarea,
@@ -271,7 +537,7 @@ select {
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 0.9rem 1rem;
-  background: #fffdf8;
+  background: rgba(255, 253, 248, 0.96);
 }
 
 .ticket {
@@ -280,6 +546,12 @@ select {
   border-top: 1px solid var(--line);
 }
 
+.cart-panel .ticket {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
 .ticket-line header {
   display: flex;
   justify-content: space-between;
@@ -294,6 +566,22 @@ select {
 
 .builder-intro {
   max-width: 28rem;
+  margin-top: 0.35rem;
+}
+
+.inline-builder {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--line);
+}
+
+.inline-builder-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 1rem;
 }
 
 .mode-note {
@@ -317,7 +605,7 @@ select {
 .column-head {
   padding: 0.75rem 1rem;
   border-radius: 18px;
-  background: var(--accent-soft);
+  background: linear-gradient(135deg, rgba(244, 221, 174, 0.9), rgba(255, 245, 225, 0.92));
 }
 
 .status-btn.danger {
@@ -345,8 +633,10 @@ select {
 }
 
 @media (max-width: 980px) {
-  .topbar,
+  .page-bar,
   .screen,
+  .mode-hero,
+  .hero-category-row,
   .mode-grid,
   .queue-columns,
   .menu-item,
@@ -354,6 +644,40 @@ select {
     grid-template-columns: 1fr;
   }
 
+  .page-bar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .brand-mark {
+    width: 88px;
+    height: 88px;
+  }
+
+  .drink-card {
+    grid-template-columns: 1fr;
+  }
+
+  .drink-card-badge {
+    width: 64px;
+    height: 64px;
+  }
+
+  .order-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .order-toolbar-actions,
+  .ticket-header-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .inline-builder-header {
+    flex-direction: column;
+  }
+
   .tabs {
     width: 100%;
   }

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev:client": "vite --config client/vite.config.js",
+    "dev:client": "vite --config client/vite.config.mjs",
     "dev:server": "dotnet run --project server/RanazePos.Api.csproj",
-    "build:client": "vite build --config client/vite.config.js",
+    "build:client": "vite build --config client/vite.config.mjs",
     "build:server": "dotnet build server/RanazePos.Api.csproj",
     "build": "npm run build:client && npm run build:server",
     "start": "dotnet run --project server/RanazePos.Api.csproj"