modules/SmOS_CC/admin/dashboard.html

<!DOCTYPE html>
<html lang="en" data-module="SmOS_CC">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HAH restaurant · Staff</title>
  <link rel="icon" type="image/svg+xml" href="../assets/logo-c.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="admin.css?v=15">
</head>
<body class="admin-app">
  <aside class="admin-sidebar">
    <div class="admin-sidebar__brand">
      <p class="admin-sidebar__eyebrow"><span data-module-id>SmOS_CC</span></p>
      <h1 data-module-name>HAH restaurant</h1>
    </div>
    <nav class="admin-nav">
      <a class="admin-nav__item" href="home.html">Home</a>
      <a class="admin-nav__item is-active" href="dashboard.html">Orders</a>
      <a class="admin-nav__item" href="chef.html">Chef</a>
      <a class="admin-nav__item" href="barista.html">Barista</a>
      <a class="admin-nav__item" href="waiter.html">Waiter</a>
    </nav>
    <nav class="admin-nav admin-nav--filters" data-service-nav>
      <button type="button" class="admin-nav__item is-active" data-filter-service="">All</button>
      <button type="button" class="admin-nav__item" data-filter-service="delivery">Delivery</button>
      <button type="button" class="admin-nav__item" data-filter-service="collection">Collection</button>
      <button type="button" class="admin-nav__item" data-filter-service="sitting-in">Sit-in</button>
      <button type="button" class="admin-nav__item" data-filter-service="reservation">Reserve</button>
    </nav>
    <div class="admin-sidebar__foot">
      <a class="admin-nav__item admin-nav__item--ghost" href="../">← Order</a>
      <button type="button" class="admin-nav__item admin-nav__item--ghost" data-admin-logout>Out</button>
    </div>
  </aside>

  <main class="admin-main">
    <header class="admin-topbar">
      <h2>Ledger</h2>
      <div class="admin-topbar__actions">
        <button type="button" class="admin-btn admin-btn--ghost" data-admin-refresh>↻</button>
        <span class="admin-live" data-admin-live aria-live="polite">Live</span>
      </div>
    </header>

    <section class="admin-stats" data-admin-stats></section>

    <section class="admin-controls">
      <div class="admin-period" role="group" aria-label="Period">
        <button type="button" class="admin-period__chip is-active" data-period="all">All</button>
        <button type="button" class="admin-period__chip" data-period="today">Today</button>
        <button type="button" class="admin-period__chip" data-period="yesterday">Yday</button>
        <button type="button" class="admin-period__chip" data-period="week">Week</button>
        <button type="button" class="admin-period__chip" data-period="last-week">L.wk</button>
        <button type="button" class="admin-period__chip" data-period="month">Month</button>
        <button type="button" class="admin-period__chip" data-period="last-month">L.mo</button>
        <button type="button" class="admin-period__chip" data-period="custom">Range</button>
      </div>
      <div class="admin-range" data-custom-range hidden>
        <input type="date" data-filter-from aria-label="From">
        <input type="date" data-filter-to aria-label="To">
      </div>
      <div class="admin-filters">
        <select data-sort-by aria-label="Sort">
          <option value="created_desc">Newest</option>
          <option value="created_asc">Oldest</option>
          <option value="total_desc">£ high</option>
          <option value="total_asc">£ low</option>
          <option value="name_asc">Name A–Z</option>
          <option value="name_desc">Name Z–A</option>
          <option value="status">Status</option>
          <option value="payment">Pay</option>
          <option value="service">Service</option>
          <option value="ref">ID</option>
        </select>
        <select data-filter-pay aria-label="Payment">
          <option value="">Pay · all</option>
          <option value="paid">Paid</option>
          <option value="awaiting">Await</option>
          <option value="unpaid">Unpaid</option>
          <option value="failed">Failed</option>
          <option value="n/a">N/A</option>
        </select>
        <select data-filter-status aria-label="Status">
          <option value="">Status · all</option>
          <option value="new">New</option>
          <option value="confirmed">Confirmed</option>
          <option value="preparing">Preparing</option>
          <option value="ready">Ready</option>
          <option value="completed">Done</option>
          <option value="cancelled">Cancel</option>
        </select>
        <input type="search" placeholder="Search…" data-filter-search aria-label="Search">
      </div>
    </section>

    <section class="admin-groups" data-admin-groups>
      <p class="admin-empty">Loading…</p>
    </section>
  </main>

  <dialog class="admin-modal" data-admin-modal>
    <form method="dialog" class="admin-modal__inner">
      <header class="admin-modal__head">
        <h3 data-modal-title>Detail</h3>
        <button type="button" class="admin-modal__close" data-modal-close aria-label="Close">×</button>
      </header>
      <div class="admin-modal__body" data-modal-body></div>
      <footer class="admin-modal__foot">
        <select data-modal-status aria-label="Status">
          <option value="new">New</option>
          <option value="confirmed">Confirmed</option>
          <option value="preparing">Preparing</option>
          <option value="ready">Ready</option>
          <option value="completed">Done</option>
          <option value="cancelled">Cancel</option>
        </select>
        <select data-modal-pay aria-label="Payment">
          <option value="unpaid">Unpaid</option>
          <option value="awaiting">Await</option>
          <option value="paid">Paid</option>
          <option value="failed">Failed</option>
          <option value="n/a">N/A</option>
        </select>
        <button type="button" class="admin-btn" data-modal-save>Save</button>
      </footer>
    </form>
  </dialog>

  <script src="../admin-config.js?v=1" defer></script>
  <script src="admin.js?v=15" defer></script>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      if (window.SmOSAdmin) window.SmOSAdmin.initDashboard();
    });
  </script>
</body>
</html>