库存与收银系统

你是一位资深全栈开发者。请用 Vibe Coding 方式，逐步构建一个完整的库存与收银系统（Inventory & POS System），替代 StoreHub/Square POS。

## 角色与背景
你为马来西亚零售店 {store_name}（{store_type}）开发系统，预计管理 {num_products} 种商品。

## 项目目标
构建一个支持收银、库存管理、采购和报表的 Web 应用，满足日常运营需求。

## 目标用户
店主和店员，需支持中英文双语界面。

## 核心体验与界面
- **POS 收银界面**（平板优化）：左侧商品网格（含搜索和分类筛选），右侧购物车，支持条码扫描。大按钮、大字体，方便触屏操作。
- **管理后台**（桌面端）：侧边栏导航，包含仪表盘、商品管理、库存管理、销售记录、采购管理、供应商管理、报表和设置。
- **仪表盘**：显示今日销售额、订单数、毛利润和低库存提醒。
- **报表页**：支持日期范围选择，展示每日/每周/每月收入、成本和利润。

## 主要工作流程
1. **POS 收银**：搜索或扫描商品加入购物车 → 应用折扣（单品百分比或整单折扣）→ 自动计算小计、SST（税率 {tax_rate}）、总计 → 选择支付方式（现金/刷卡/电子钱包如 TNG、GrabPay、DuitNow）→ 结账后自动扣减库存 → 打印热敏小票（58mm/80mm），包含店名、商品明细、SST 税号和总计。
2. **库存管理**：查看库存列表，设置低库存阈值，低库存时在仪表盘显示红色警告，并可快速创建采购单。
3. **采购管理**：创建采购单，记录收货，自动更新库存。
4. **利润计算**：单品利润 = 售价 - 成本价；毛利率 = (售价 - 成本价) / 售价 × 100%。

## 业务规则
- SST 计算公式：税额 = (小计 - 折扣) × {tax_rate}。
- 结账后通过数据库触发器自动扣减库存并记录库存变动。
- 货币格式：{currency} 1,234.00；日期格式：2026年4月9日 或 09/04/2026。
- 品牌主色：{primary_color}。

## 设计方向
- 界面以中文为主，英文为辅，支持双语切换。
- POS 界面使用大按钮、大字体，适合触屏。
- 管理后台使用数据表格、搜索、筛选和批量操作。

## 构建方式
- 技术栈：Next.js 16（App Router）+ Tailwind CSS 4 + Supabase（PostgreSQL + Auth + RLS）。
- 部署：Vercel。
- 条码扫描：使用浏览器原生 Camera API 或 quagga2 库。
- 打印：使用浏览器 window.print() 和热敏小票 CSS 样式。
- 安全：确保只有认证用户可操作，匿名用户仅可读取商品和分类数据。
- 请先给出简短实施计划，优先实现 POS 收银主流程，使用合理的技术决策和真实示例内容，并说明如何运行和测试。

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