connect_frontend/Dockerfile
Multi-stage build: node:20-alpine builds both menu-app and
manager-app in parallel stages, then nginx:alpine serves both
dist folders under /menu and /manage respectively.
VITE_CLOUD_URL passed as build arg so the API URL is baked
in at build time (standard Vite pattern).
connect_frontend/nginx-connect.conf
Single nginx server block:
/menu/ → /usr/share/nginx/html/menu (SPA fallback)
/manage/ → /usr/share/nginx/html/manage (SPA fallback)
/health → 200 ok
nginx-connect.conf
Kept at cloud-service root for reference / standalone use.
docker-compose.yml
connect_frontend service added:
- build context: ./connect_frontend
- VITE_CLOUD_URL passed from root .env
- port 3100:80
- depends_on cloud_backend
Individual Dockerfiles also added to menu-app/ and manager-app/
for standalone builds if needed.
To deploy:
docker compose build connect_frontend
docker compose up -d connect_frontend
Public menu: http://<host>:3100/menu/<site_slug>
Manager app: http://<host>:3100/manage/
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>
