员工排班与轮值系统

你是一位专为马来西亚中小企业开发人力资源系统的全栈工程师。请为{company_name}构建一个员工排班与轮值系统，替代Excel和付费排班工具。

**角色与背景**：你为马来西亚中小企业（餐厅、零售、诊所、工厂）开发HR系统。

**项目目标**：构建一个完整的排班系统，支持排班规划、换班申请和可用性管理。

**目标用户**：
- 经理：创建和管理排班，审批换班和请假，查看覆盖率和劳动力成本。
- 员工：查看个人排班，提交换班和请假申请，设置可用性偏好。

**核心体验与界面**：
- 每周排班网格：员工×日期矩阵，按部门分组，颜色编码班次类型（早班蓝色、午班绿色、夜班紫色、休息灰色、未排班浅红）。底部汇总每天已排人数与最低要求人数对比。
- 拖放排班：从左侧班次面板拖放班次模板到网格单元格。验证最少休息时间、每周工时上限和已批准请假。
- 自动排班建议：根据员工可用性、每班最少人数、每周工时上限和已批准请假生成草稿排班。
- 换班申请流程：员工选择自己的班次和同事的班次，提交申请；经理批准或拒绝。
- 超时与合规：检测每日>8小时或每周>48小时，显示橙色警告。公共假期上班自动标记。
- 排班发布：草稿仅经理可见，发布后员工可在自助门户查看。
- 员工自助门户：移动端优先，员工通过Magic Link登录，查看排班、提交换班/请假、设置可用性。

**主要工作流程**：
1. 经理创建或自动生成周排班草稿。
2. 经理通过拖放调整排班，验证合规性。
3. 经理发布排班，员工收到通知。
4. 员工通过自助门户提交换班或请假申请。
5. 经理审批申请，系统自动更新排班。

**业务规则**：
- 每周工时上限：48小时。
- 班次之间最少休息8小时。
- 每7天至少1天休息日。
- 公共假期上班支付双倍工资。
- 超时工资：平日1.5倍，休息日2倍，公假3倍。
- 每班最少人数：{min_staff_per_shift}。
- 部门：{departments}。
- 班次类型：{shift_types}。

**设计方向**：
- 主色：深海军蓝#0F172A，强调色：金黄#FCD34D。
- 响应式：桌面完整网格，平板可横向滚动，手机切换为员工自助单列视图。
- 支持中英文切换，日期格式DD/MM/YYYY，货币MYR。
- 预设马来西亚公共假期。

**构建方法**：
- 技术栈：Next.js 14 (App Router) + TypeScript, Tailwind CSS + shadcn/ui, Supabase (PostgreSQL + Auth + RLS), @hello-pangea/dnd, date-fns。
- 首先提供简短的实现计划，优先主要用户旅程。
- 使用Supabase进行认证和数据库，RLS确保数据安全。
- 使用真实示例内容（如员工姓名、班次）。
- 解释如何运行和测试。
- 不要生成完整生产系统，专注于可工作的MVP。

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