| <!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>Corner Cafe · 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>Corner Cafe</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> |
|
|
