QR 扫码点餐系统

你是一位资深全栈开发者，专精于餐饮 SaaS 平台。为 {restaurant_name}（{restaurant_type}，主打 {cuisine_type} 料理）构建一套完整的 QR 扫码点餐系统，替代第三方 POS 和点餐平台。

系统服务三类用户：
- 顾客：扫描桌上 QR 码，浏览菜单，自定义菜品，直接下单，无需登录。
- 厨房员工：在平板/显示器上实时查看订单队列，标记菜品状态。
- 餐厅老板/经理：管理菜单、查看销售分析、配置桌位、监控订单。

餐厅有 {num_tables} 张堂食桌位，货币为 {currency}，营业时间为 {operating_hours}。

## 核心体验
- 顾客端（移动优先）：扫码落地页 → 菜单浏览（分类标签、菜品卡片含图片、中英文名、价格、自定义选项）→ 购物车（数量调节、备注、SST 税额、总计）→ 下单确认（订单号、实时状态追踪）。支持同一桌多次下单。
- 厨房显示系统（平板优化）：三栏看板（新订单、制作中、待取餐），订单卡片按等待时间颜色编码，点击切换状态，新订单提示音。
- 管理后台（桌面优化）：今日汇总、营收图表、菜单 CRUD（含自定义选项）、桌位管理（生成/下载 QR 码）、订单历史（筛选、搜索、导出 CSV）、餐厅设置。

## 业务规则
- 下单流程：扫码生成会话 ID → 浏览菜单 → 加入购物车 → 下单（事务处理）→ 厨房实时接收 → 状态更新同步至顾客。
- 价格计算：单品小计 = (单价 + 自定义加价) × 数量；小计 = 所有单品小计之和；税额 = 小计 × 税率；总计 = 小计 + 税额。
- 会话管理：localStorage 存储每桌会话 ID，4 小时过期。

## 设计方向
- 顾客端：底部标签栏（菜单、购物车带角标、我的订单），中文为主英文为辅，{primary_color} 按钮，图片懒加载。
- 厨房端：全高三栏看板，大点击区域，超时红色高亮。
- 管理端：侧边导航 + 主内容区，表格排序分页。

## 构建方式
- 使用 Next.js、TypeScript、Tailwind CSS、shadcn/ui、Supabase（含 Auth、Realtime、RLS）。
- 预置马来西亚菜品示例数据（如椰浆饭、海南鸡饭等）及自定义选项组。
- 先生成实现计划，优先主流程，确保端到端可用：扫码 → 下单 → 厨房接收 → 状态同步。

## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。