QR Menu & Ordering System

You are a senior full-stack developer with 10+ years of experience building production F&B (food & beverage) SaaS platforms. You specialize in real-time ordering systems, mobile-first PWAs, and restaurant operations software deployed across Southeast Asia.

Build a complete QR Menu & Ordering System for {restaurant_name}, a {restaurant_type} serving {cuisine_type} cuisine in Malaysia. This system replaces expensive third-party POS and ordering platforms (StoreHub, GrabFood merchant portal) with a self-hosted, zero-commission solution.

The system serves three user types:
1. Customers — scan a table QR code, browse the menu, customize items, and place orders from their phone. No app download, no login required.
2. Kitchen staff — view incoming orders in real time on a tablet/monitor, mark items as preparing/ready/served.
3. Restaurant owner/manager — manage menu items, view daily sales analytics, configure tables, and monitor all orders from a desktop dashboard.

The restaurant has {num_tables} dine-in tables. Currency is {currency} (default MYR). Operating hours are {operating_hours}.

## Tech Stack
- Framework: Next.js 16 (App Router, Server Components, Server Actions)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS 4 + shadcn/ui (new-york style, light mode)
- Database: Supabase (Postgres + Auth + Realtime subscriptions + Row Level Security)
- QR Generation: qrcode npm package (server-side SVG generation)
- Real-time: Supabase Realtime (Postgres Changes) for kitchen live updates
- Deployment: Vercel
- Font: Inter + Noto Sans SC (via next/font for bilingual CN/EN support)

## Pages / Views

### Customer-Facing (Mobile-First, No Auth)

1. /table/[table-number] — Landing page after QR scan. Shows restaurant name, logo, table number confirmation. "Start Ordering" button. Displays operating hours; if outside hours, show "We're closed" message.

2. /table/[table-number]/menu — Menu browsing. Sticky header with restaurant name, table number, cart icon with badge. Category tabs (horizontal scrollable pills). Menu item cards: photo, name (Chinese primary, English subtitle), price in {currency}, short description. Tap item for detail sheet: customizations (spice level, ice level, add-ons with extra cost), quantity, "Add to Cart". "Sold Out" items greyed out. "Popular" badge on top sellers.

3. /table/[table-number]/cart — Order review. Items with quantity adjusters, customization notes, line totals. Special instructions textarea. Order summary: subtotal, SST tax (6% configurable), total. "Place Order" button ({primary_color}). Confirmation screen with order number, estimated wait, real-time status.

4. /table/[table-number]/orders — Status tracking. All orders for this table session. Status per item: Pending → Preparing → Ready → Served. Real-time via Supabase Realtime. "Order More" button.

### Kitchen Display System (Tablet-Optimized, Auth Required)

5. /kitchen — Real-time order queue. Three-column Kanban: New Orders | Preparing | Ready. Order cards: order number, table number, time (minutes ago), items with customizations. Color urgency: white (<5min), yellow (5-15min), red (>15min). Tap to move between columns. Audio notification on new order. Filter by category.

### Admin Dashboard (Desktop-Optimized, Auth Required)

6. /admin — Today's summary cards (revenue, orders, avg order value, top item), revenue chart (7 days), recent orders table.

7. /admin/menu — CRUD menu items: image, name CN/EN, category, price, availability toggle. Customization options management. Category management with drag-sort.

8. /admin/tables — Table grid with status. Generate QR per table (downloadable PNG/SVG). Bulk print QR as PDF. Mark vacant/occupied.

9. /admin/orders — Full history. Filter by date, status, table. Search by order number. Export CSV. Order detail modal.

10. /admin/settings — Restaurant name, logo, hours, tax rate, currency, receipt footer, staff accounts.

## Data Model

Tables needed: categories, menu_items, customization_groups, customization_options, tables, orders, order_items, daily_sales, restaurant_settings. All with proper indexes and foreign keys.

RLS: categories/menu_items/tables public SELECT for anon (customers read menu). orders/order_items public INSERT for anon (customers place orders), SELECT filtered by session_id. All writes for authenticated only.

Enable Supabase Realtime on orders and order_items tables.

## Business Logic

Order Flow: QR scan → session_id generated (localStorage UUID) → browse menu → add to cart (React state) → place order (Server Action transaction) → kitchen receives real-time → status updates flow back to customer.

Pricing: item_total = (unit_price + customization extras) × quantity. subtotal = sum of item_totals. tax = subtotal × tax_rate%. total = subtotal + tax.

Session: localStorage session_id per table, expires after 4 hours. Allows tracking all orders during one dining visit.

## UI/UX

Customer (mobile 375-430px): Bottom tab bar (Menu, Cart with badge, My Orders). Chinese primary text, English subtitle. {primary_color} buttons. Lazy load images, skeleton states.

Kitchen (tablet 768-1024px): Three-column Kanban, full height. Large tap targets (48px min). Audio notification. Auto-scroll newest. Red highlight for orders > 15 min.

Admin (desktop 1280px+): Sidebar nav + main content. shadcn/ui Tables with sort/pagination. Two-column form layout with live preview.

## Sample Data

Pre-seed with Malaysian dishes: Nasi Lemak (RM 8.90), Chicken Rice (RM 10.90), Char Kway Teow (RM 9.50), Curry Mee (RM 11.90), Pan Mee (RM 9.90), Teh Tarik (RM 3.90), Iced Milo (RM 5.50), Cendol (RM 6.50), Kaya Toast (RM 4.50), etc. Include customization groups: Sweetness Level, Temperature, Spice Level, Add-ons with extra pricing.

Generate tables 1 to {num_tables}. Configure restaurant settings with {restaurant_name}, 6% SST, {currency}, {primary_color}.

Build the complete application with all pages, components, database migrations, seed data, and TypeScript types. Ensure fully functional end-to-end: scan QR → browse menu → place order → kitchen receives it → status updates flow back to customer in real time.