预约排班系统

你是一位资深全栈工程师。请为「{business_name}」搭建一套完整的预约排班系统。
这是一家位于马来西亚的{business_type}，目前有 {num_staff} 位员工，营业时间为 {operating_hours}。

技术栈：Next.js 16 (App Router) + Tailwind CSS 4 + Supabase (Postgres + Auth + RLS + Realtime)

## 角色与背景
你是一位资深全栈工程师，为马来西亚中小企业搭建预约排班系统，取代 Fresha/Calendly。

## 项目目标
构建一个完整的预约管理系统，支持顾客在线预约、员工排班管理、营收报表和顾客追踪。

## 目标用户
- 顾客：通过公开页面预约服务
- 管理员：管理员工、服务、预约和报表

## 核心体验与页面
### A. 顾客预约页面 /book（公开，无需登录）
主色调使用 {primary_color}，白底简洁风格。
- **步骤1**：选择服务（显示名称、时长、价格 RM）
- **步骤2**：选择员工（显示能做该服务的员工，可选“不指定”）
- **步骤3**：选择日期时间（日历组件，可用时段网格，间隔 {booking_interval} 分钟）
- **步骤4**：填写资料（姓名、手机号 +60 前缀、邮箱选填、备注，校验马来西亚格式）
- **步骤5**：确认预约（摘要卡片，确认按钮，成功后显示预约编号、加入日历按钮、模拟 WhatsApp 通知）

### B. 管理后台 /admin（需登录）
- **仪表板**：今日预约列表、周历视图、统计卡片（今日预约数、本周/本月营收、新客数）
- **营收报表**：按服务/员工统计，日期范围选择，导出 CSV
- **预约管理**：表格+筛选（日期、状态、员工），操作（确认、完成、取消、标记未到）
- **服务管理**：CRUD 服务，分配可执行员工
- **员工管理**：CRUD 员工，编辑每周排班（可视化时间表）、休息时段、特殊休假
- **顾客管理**：列表（姓名、手机、到访次数、总消费、上次到访），排序，查看预约历史

### C. 全局 UI 规范
- 双语切换（中文/English）
- 货币显示 RM，手机号 +60 格式
- 移动端优先响应式设计
- 预约日历最小单位为 {booking_interval} 分钟

## 主要工作流程
1. 顾客选择服务→员工→日期时间→填写资料→确认预约
2. 管理员管理员工排班、服务、预约和查看报表

## 业务规则
- 时段计算：根据员工排班、休息时段、请假和已有预约，以 {booking_interval} 分钟为间隔生成可用时段
- 防撞期：使用数据库锁或约束确保同一时段不重复预约
- 取消政策：预约前可设置取消时限，取消后释放时段并记录原因
- 顾客追踪：预约完成后更新到访次数和消费金额

## 设计方向
简洁、专业、移动优先，主色调 {primary_color}，白底，清晰的信息层级。

## 构建方法
1. 先给出简短实现计划，优先实现顾客预约流程和时段计算
2. 使用 Supabase 存储数据，Next.js Server Actions 处理业务逻辑
3. 预填示范数据：{business_name}（{business_type}，营业 {operating_hours}），{num_staff} 位员工（阿美、杰森、Siti），5 项服务（洗剪吹、理发、染发、头皮护理、美甲），5 笔本周示范预约
4. 解释如何运行和测试

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