feat(connect): Phase 6 — menu-app and manager-app frontend SPAs

Two Vite + React 18 + Tailwind apps under connect_frontend/.
Both use React Router v6, Axios, react-hot-toast, and Lucide icons.
Neither uses localStorage — tokens live in sessionStorage (manager-app)
or component state (menu-app cart).

── menu-app (public menu + ordering) ──────────────────────────────

Routing (basename /menu):
  /:siteSlug              → MenuPage
  /:siteSlug/order        → CartPage
  /:siteSlug/confirm/:ref → OrderConfirm

Pages:
  MenuPage      — fetches menu snapshot, category nav tabs, product
                  cards; floating CartButton; opens ProductModal
  ProductModal  — quantity picker, quick-option toggles, price/discount
                  display, "Add to order" with line total
  CartPage      — order type selector (dine_in/delivery), customer
                  details form, cart summary, submits to cloud API
  OrderConfirm  — polls GET /api/orders/status/:ref every 10s;
                  renders status icon + label; stops polling on
                  terminal states (delivered/rejected)

Components:
  CategoryNav   — horizontal scrollable pill tabs
  ProductCard   — image, name, description, price with discount badge;
                  greyed + "Out of stock" badge when unavailable
  CartButton    — fixed bottom bar with item count + total

── manager-app (remote dashboard) ─────────────────────────────────

Routing (basename /manage):
  /login              → LoginPage
  /                   → SiteSelectorPage (auto-navigates if one site)
  /:siteId            → DashboardPage
  /:siteId/orders     → IncomingOrdersPage
  /:siteId/orders/history → OrderHistoryPage
  /:siteId/orders/:id → OrderDetailPage
  RequireAuth wrapper redirects to /login if no sessionStorage token

Pages:
  LoginPage          — email/password → POST /api/manager/login;
                       stores JWT in sessionStorage
  SiteSelectorPage   — lists accessible venues; auto-selects if one
  DashboardPage      — polls snapshot + pending orders every 15s;
                       2×2 stat grid + pending order list
  IncomingOrdersPage — polls pending orders every 15s; order cards
  OrderDetailPage    — full order detail; Accept/Reject with optional
                       rejection reason; lifecycle progression buttons
                       (Preparing → Ready → Delivered etc.)
  OrderHistoryPage   — all orders with status filter tabs

Components:
  RequireAuth   — route guard using sessionStorage token
  StatCard      — labelled metric tile
  StatusBadge   — colour-coded status pill
  OrderCard     — summary card linking to OrderDetailPage
  (no OrderCard uses useParams to get siteId for nav — wired correctly)

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

connect_frontend/manager-app/src/pages/OrderHistoryPage.jsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft } from 'lucide-react'
+import { fetchOrders } from '../api'
+import OrderCard from '../components/OrderCard'
+
+const STATUSES = [
+  { value: '', label: 'All' },
+  { value: 'pending_acceptance', label: 'Pending' },
+  { value: 'accepted', label: 'Accepted' },
+  { value: 'preparing', label: 'Preparing' },
+  { value: 'ready', label: 'Ready' },
+  { value: 'out_for_delivery', label: 'Delivery' },
+  { value: 'delivered', label: 'Delivered' },
+  { value: 'rejected', label: 'Rejected' },
+]
+
+export default function OrderHistoryPage() {
+  const { siteId } = useParams()
+  const navigate = useNavigate()
+  const [orders, setOrders] = useState([])
+  const [filter, setFilter] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    fetchOrders(siteId, filter ? { order_status: filter } : {})
+      .then(setOrders)
+      .finally(() => setLoading(false))
+  }, [siteId, filter])
+
+  return (
+    <div className="min-h-screen bg-slate-50 pb-10">
+      <div className="bg-white border-b border-slate-100 shadow-sm sticky top-0 z-10">
+        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center gap-3">
+          <button onClick={() => navigate(-1)} className="text-slate-400 hover:text-slate-700">
+            <ArrowLeft size={20} />
+          </button>
+          <h1 className="font-bold text-slate-800">Order History</h1>
+        </div>
+        {/* Status filter tabs */}
+        <div className="flex gap-1 overflow-x-auto px-4 pb-2 pt-1">
+          {STATUSES.map(s => (
+            <button
+              key={s.value}
+              onClick={() => setFilter(s.value)}
+              className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-medium transition-colors ${
+                filter === s.value
+                  ? 'bg-sky-500 text-white'
+                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+              }`}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="max-w-2xl mx-auto px-4 py-5 space-y-3">
+        {loading ? (
+          <div className="flex justify-center py-16">
+            <div className="w-8 h-8 rounded-full border-2 border-sky-400 border-t-transparent animate-spin" />
+          </div>
+        ) : orders.length === 0 ? (
+          <div className="bg-white rounded-2xl p-12 text-center text-slate-400 shadow-sm">
+            No orders found.
+          </div>
+        ) : (
+          orders.map(o => <OrderCard key={o.id} order={o} />)
+        )}
+      </div>
+    </div>
+  )
+}