Frontend overhaul: manager dashboard restructure, waiter PWA rework, new order drawer and components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-29 12:12:23 +03:00
parent defc49f84f
commit bb39088464
78 changed files with 24370 additions and 1358 deletions
--- a/CLAUDE_DESIGN/app.jsx
+++ b/CLAUDE_DESIGN/app.jsx
@@ -0,0 +1,115 @@
+// App — arranges the three table-card variations inside a design canvas.
+// Each variation gets its own artboard showing a 4×2 mini-grid of mixed statuses
+// so you can see how they read together, plus a separate artboard showing
+// hover/pressed states.
+
+const { DesignCanvas, DCSection, DCArtboard } = window;
+const { TableCardV1, TableCardV2, TableCardV3 } = window;
+
+// Shared dataset — same across all variations so they compare fairly
+const TABLES = [
+  { name: 'A1', status: 'occupied', amount: 84.50, occupiedMins: 42,  waiters: ['Marco Riva'],                                  flags: [] },
+  { name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'],                                 flags: ['VIP'] },
+  { name: 'A3', status: 'open',     amount: null,   occupiedMins: null, waiters: [],                                            flags: [] },
+  { name: 'A4', status: 'alert',    amount: 56.00,  occupiedMins: 73, waiters: ['Luca Bianchi'],                                flags: ['Allergy'] },
+  { name: 'B1', status: 'reserved', amount: null,   occupiedMins: null, waiters: ['Elena Costa'],                               flags: ['Birthday'] },
+  { name: 'B2', status: 'occupied', amount: 212.80, occupiedMins: 115,waiters: ['Marco Riva', 'Sofia Greco', 'Luca Bianchi', 'Elena Costa'], flags: ['VIP'] },
+  { name: 'B3', status: 'dirty',    amount: null,   occupiedMins: null, waiters: [],                                            flags: [] },
+  { name: 'B4', status: 'occupied', amount: 38.00,  occupiedMins: 14, waiters: ['Luca Bianchi', 'Elena Costa'],                 flags: [] },
+];
+
+// Interaction states preview — shows the SAME card in 4 states side by side
+const STATE_CARD = { name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'], flags: ['VIP'] };
+
+function TableGrid({ Card }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(4, 260px)',
+      gap: 16,
+      padding: 28,
+      background: 'var(--bg)',
+    }}>
+      {TABLES.map((t, i) => <Card key={i} {...t} />)}
+    </div>
+  );
+}
+
+function StatesStrip({ Card, label }) {
+  // Render four copies with simulated states by forcing CSS
+  return (
+    <div style={{ padding: 28, background: 'var(--bg)' }}>
+      <div style={{
+        display: 'grid', gridTemplateColumns: 'repeat(4, 260px)', gap: 24,
+      }}>
+        {['Default', 'Hover', 'Pressed', 'Selected'].map((state) => (
+          <div key={state} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            <div style={{
+              fontSize: 12, fontWeight: 600, color: 'var(--ink-500)',
+              textTransform: 'uppercase', letterSpacing: 0.8,
+            }}>{state}</div>
+            <div className={`state-${state.toLowerCase()}`} style={{ position: 'relative' }}>
+              <Card {...STATE_CARD} />
+              {state === 'Selected' && (
+                <div style={{
+                  position: 'absolute', inset: -3,
+                  borderRadius: 17,
+                  boxShadow: '0 0 0 3px var(--occ-500)',
+                  pointerEvents: 'none',
+                }} />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Style overrides to force hover/pressed on the middle two */}
+      <style>{`
+        .state-hover > button {
+          box-shadow: var(--shadow-2) !important;
+          transform: translateY(-2px) !important;
+        }
+        .state-pressed > button {
+          box-shadow: inset 0 2px 4px rgba(16,20,24,0.08) !important;
+          transform: translateY(1px) !important;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <DesignCanvas title="Table Card — Variations">
+      <DCSection id="v1" title="Variation 1 — Left accent, stacked layout">
+        <DCArtboard id="v1-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
+          <TableGrid Card={TableCardV1} />
+        </DCArtboard>
+        <DCArtboard id="v1-states" label="Interactive states" width={1160} height={260}>
+          <StatesStrip Card={TableCardV1} label="V1" />
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection id="v2" title="Variation 2 — Top stripe, big name">
+        <DCArtboard id="v2-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
+          <TableGrid Card={TableCardV2} />
+        </DCArtboard>
+        <DCArtboard id="v2-states" label="Interactive states" width={1160} height={260}>
+          <StatesStrip Card={TableCardV2} label="V2" />
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection id="v3" title="Variation 3 — Plaque badge">
+        <DCArtboard id="v3-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
+          <TableGrid Card={TableCardV3} />
+        </DCArtboard>
+        <DCArtboard id="v3-states" label="Interactive states" width={1160} height={260}>
+          <StatesStrip Card={TableCardV3} label="V3" />
+        </DCArtboard>
+      </DCSection>
+    </DesignCanvas>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);