Rebuild the public-facing digital menu from the design handoff bundle.
Matches high-fidelity spec: Bricolage Grotesque + Hanken Grotesk fonts,
cream/green/gold palette, per-category tinted panels, product cards with
gradient art, tag icon badges, bottom-sheet product detail, search overlay,
cart → checkout bottom-sheet flow posting to real API, floating cart button
with bump animation, and restyled order-confirm page.
- New: src/components/primitives.jsx (DishArt, Badge, DietChip, TagIcons,
Price, DiscountFlag, Stepper, price helpers)
- Rewrite: MenuPage.jsx — all screens in one component tree, API-driven,
lang toggle (EN/GR) persisted to localStorage, scroll-spy category bar
- Rewrite: OrderConfirm.jsx — design-system styling, brand colors
- Update: App.jsx — remove /order route (cart flow is now a bottom sheet)
- Update: tailwind.config.js — font families, brand tokens, animations
- Update: index.html — Google Fonts for Bricolage Grotesque + Hanken Grotesk
- Delete: CartPage, ProductModal, ProductCard, CategoryNav, CartButton
Cart checkout POSTs to real submitOrder API and redirects to /confirm/:ref
for live order status polling. Restaurant info falls back to hardcoded
placeholder until backend includes it in the fetchMenu response (see
REWORK_REVISIT.md).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
