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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE_DESIGN/ops-app.jsx

@@ -0,0 +1,51 @@
+// Top-level — design canvas with desktop and tablet artboards
+
+const { DesignCanvas, DCSection, DCArtboard } = window;
+const { ChromeWindow } = window;
+const { DesktopDashboard, TabletDashboard } = window.OpsLayouts;
+
+// Tablet bezel — simple frame, since we want to communicate "tablet"
+function TabletShell({ children }) {
+  return (
+    <div style={{
+      width: 900, height: 1180,
+      background: '#1a1a1a',
+      borderRadius: 36,
+      padding: 14,
+      boxShadow: '0 20px 50px rgba(0,0,0,0.18)',
+    }}>
+      <div style={{
+        width: '100%', height: '100%',
+        background: 'white', borderRadius: 24,
+        overflow: 'hidden',
+      }}>{children}</div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <DesignCanvas title="Daily Ops Dashboard — Desktop + Tablet">
+      <DCSection id="desktop" title="Desktop — primary view">
+        <DCArtboard id="desktop-main" label="1440×900 — full operational view, mid-shift" width={1440} height={900}>
+          <ChromeWindow url="manage.simplepos.com/today" tabs={[{ title: 'Today · Trattoria del Sole' }]} width={1440} height={900}>
+            <DesktopDashboard />
+          </ChromeWindow>
+        </DCArtboard>
+      </DCSection>
+
+      <DCSection id="tablet" title="Tablet — portrait">
+        <DCArtboard id="tablet-main" label="Tablet portrait — same data, vertical stack" width={930} height={1210}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'transparent' }}>
+            <TabletShell>
+              <TabletDashboard />
+            </TabletShell>
+          </div>
+        </DCArtboard>
+      </DCSection>
+    </DesignCanvas>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);