ranaze-pos/client/src/App.jsx

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);
}