Initial KDS scaffold — Phase 2 kitchen port

FastAPI backend (Python 3.11, httpx for SignalR/GraphQL — no MSSQL ODBC), shares kitchen_db directly. React/TS/Vite fullscreen board frontend. Backend: auth.py (APP_SLUG=kds, SimpleNamespace), main.py (4 KDS migrations, SignalR start/stop), kds.py router, models (kds/settings/resos — read from kitchen_db), signalr_listener.py (backoff pre-existing), kds_graphql.py, database.py. Requirements stripped to ~9 packages; image ~400 MB lighter than kitchen (no MSSQL ODBC layer). Frontend: AuthGate (app=kds), single fullscreen route, dark board theme. KDS.tsx URL prefix patched (/api/kds/ → /kds/api/kds/), recipe images cross-app (/kitchen/api/recipes/). nginx: 5 blocks with SSE proxy headers on /kds/api/ block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-12 12:15:16 +00:00 · 2026-07-12 12:15:16 +00:00 · b94585084a
commit b94585084a
35 changed files with 5195 additions and 0 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,15 @@
+FROM node:22-alpine AS builder
+
+ARG VITE_HOTEL_NAME=Hotel
+ENV VITE_HOTEL_NAME=$VITE_HOTEL_NAME
+
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html/kds
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
+    <title>Kitchen Display</title>
+    <link rel="manifest" href="/kds/manifest.json" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@ -0,0 +1,41 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+
+    # Block internal inter-app endpoints from the public internet
+    location /kds/api/internal/ {
+        return 403;
+    }
+
+    # Central auth proxy (must come before the general /api/ block)
+    location /kds/api/auth/ {
+        proxy_pass http://10.10.10.101:3001/api/auth/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    # KDS backend API (preserves /api/ prefix: /kds/api/kds/tickets → backend:8000/api/kds/tickets)
+    location /kds/api/ {
+        proxy_pass http://backend:8000/api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Cookie $http_cookie;
+        # SSE requires these headers
+        proxy_buffering off;
+        proxy_cache off;
+        proxy_read_timeout 86400s;
+    }
+
+    # Health check
+    location /kds/health {
+        proxy_pass http://backend:8000/health;
+    }
+
+    # SPA fallback — all other /kds/* paths serve the React app
+    location /kds/ {
+        try_files $uri $uri/ /kds/index.html;
+    }
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,25 @@
+{
+  "name": "kds-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.17.9",
+    "lucide-react": "^0.395.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -0,0 +1,18 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import AuthGate from './components/AuthGate'
+
+// Re-export for any archive imports that use `import { useAuth } from '../App'`
+export { useAuth } from './components/AuthGate'
+
+import KDSApp from './pages/KDSApp'
+
+export default function App() {
+  return (
+    <AuthGate>
+      <Routes>
+        <Route path="/" element={<KDSApp />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AuthGate>
+  )
+}
--- a/frontend/src/components/AuthGate.tsx
+++ b/frontend/src/components/AuthGate.tsx
@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { User } from '../types'
+
+interface AuthCtx {
+  user: User
+  token: string
+  restrictedPages: string[]
+  login: (t: string) => void
+  logout: () => void
+}
+const Ctx = createContext<AuthCtx | null>(null)
+
+export function useAuth() {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error('useAuth outside AuthGate')
+  return ctx
+}
+
+export default function AuthGate({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [checking, setChecking] = useState(true)
+
+  useEffect(() => {
+    fetch('/kds/api/auth/verify?app=kds', { credentials: 'include' })
+      .then((r) => {
+        if (!r.ok) throw new Error('unauth')
+        return r.json()
+      })
+      .then((data) =>
+        setUser({
+          email: data.email || data.sub || '',
+          name: data.name || data.display_name || '',
+          is_admin: data.is_admin ?? false,
+          caps: data.caps ?? [],
+        })
+      )
+      .catch(() => {
+        ;(window.top ?? window).location.href = '/login'
+      })
+      .finally(() => setChecking(false))
+  }, [])
+
+  if (checking) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--kds-bg)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}>
+        <div className="spinner" style={{ width: 32, height: 32 }} />
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const ctx: AuthCtx = {
+    user,
+    token: '__session__',
+    restrictedPages: [],
+    login: () => {},
+    logout: () => { (window.top ?? window).location.href = '/login' },
+  }
+
+  return <Ctx.Provider value={ctx}>{children}</Ctx.Provider>
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,89 @@
+:root {
+  /* Stack palette */
+  --navy-dark:    #1a1a2e;
+  --navy-mid:     #16213e;
+  --navy-light:   #0f3460;
+  --gold:         #c9a84c;
+  --text-primary: #e8e8e8;
+  --text-muted:   #9ca3af;
+  --bg-content:   #f4f5f7;
+  --border:       rgba(255, 255, 255, 0.1);
+
+  /* KDS-specific — dark board theme */
+  --kds-bg:       #0d0d1a;
+  --kds-card:     #1a1a2e;
+  --kds-border:   rgba(255, 255, 255, 0.08);
+  --kds-green:    #22c55e;
+  --kds-amber:    #f59e0b;
+  --kds-red:      #ef4444;
+  --kds-blue:     #3b82f6;
+  --kds-sent:     #6b7280;
+
+  /* App primary — teal (shared with kitchen for recipe images etc.) */
+  --app-primary:  #0d9488;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--kds-bg);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* KDS is fullscreen — no sidebar layout needed */
+
+/* Spinner */
+.spinner {
+  border: 3px solid rgba(255,255,255,0.15);
+  border-top-color: var(--gold);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Shared badge style used by KDS status indicators */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.badge-green  { background: rgba(34,197,94,0.15);  color: var(--kds-green); }
+.badge-amber  { background: rgba(245,158,11,0.15); color: var(--kds-amber); }
+.badge-red    { background: rgba(239,68,68,0.15);  color: var(--kds-red); }
+.badge-blue   { background: rgba(59,130,246,0.15); color: var(--kds-blue); }
+.badge-grey   { background: rgba(107,114,128,0.15);color: var(--kds-sent); }
+
+/* Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn:hover { opacity: 0.85; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-primary { background: var(--gold); color: #000; }
+.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@ -0,0 +1,20 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import App from './App'
+import './index.css'
+
+const qc = new QueryClient({
+  defaultOptions: { queries: { staleTime: 10 * 1000, retry: 1 } },
+})
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter basename="/kds">
+      <QueryClientProvider client={qc}>
+        <App />
+      </QueryClientProvider>
+    </BrowserRouter>
+  </React.StrictMode>,
+)
--- a/frontend/src/pages/KDS.tsx
+++ b/frontend/src/pages/KDS.tsx
--- a/frontend/src/pages/KDSApp.tsx
+++ b/frontend/src/pages/KDSApp.tsx
@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import KDS from './KDS'
+
+export default function KDSApp() {
+  // Lock viewport for touch-screen wall display
+  useEffect(() => {
+    const prev = document.title
+    document.title = 'Kitchen Display'
+    return () => { document.title = prev }
+  }, [])
+
+  return <KDS />
+}
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@ -0,0 +1,11 @@
+export interface User {
+  email: string
+  name: string
+  is_admin: boolean
+  caps: string[]
+}
+
+export function can(user: User | null, cap: string): boolean {
+  if (!user) return false
+  return user.is_admin || user.caps.includes(cap)
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/kds/',
+})