File size: 6,604 Bytes
ddd5681
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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>