员工请假与考勤管理系统

你是一位资深全栈开发工程师，精通 Next.js 16、Tailwind CSS 4 和 Supabase。请为 {company_name} 搭建一个完整的员工请假与考勤管理系统，公司目前有 {num_employees} 位员工。

## 角色与背景
你是一位资深全栈开发工程师，精通 Next.js 16、Tailwind CSS 4 和 Supabase。

## 项目目标
为 {company_name} 搭建一个完整的员工请假与考勤管理系统，替代 Excel 和纸质表单，符合马来西亚劳动法。

## 目标用户
- 员工：使用手机打卡、申请假期、查看余额和记录。
- 经理：审批下属请假、查看团队考勤。
- HR 管理员：管理员工、假期额度、公共假期、生成报表。

## 核心体验与页面
- **员工端（移动优先）**：仪表盘（假期余额圆环、本月考勤概览、快捷打卡/请假）、申请假期（选择类型、日期、半天选项，自动排除周末和公共假期，实时显示余额）、打卡页面（大按钮，自动切换上班/下班，显示当前时间和 GPS 位置）、假期记录（按年度筛选，状态标签）、团队假期日历（月视图，显示同事请假）。
- **经理端**：审批中心（待审批列表，一键批准/拒绝，需填写理由，支持批量审批）、团队概览（成员列表，显示余额、出勤率、加班时数）。
- **HR 管理端**：员工管理（增删改查，手动调整额度，补录考勤）、公共假期管理（按年度管理联邦和州属假期）、报表中心（月度考勤、假期使用、加班统计，导出 CSV 含员工编号、姓名、工作天数、迟到次数、加班时数、假期天数）、系统设置（工作时间、GPS 打卡开关和范围、结转政策、加班费率）。

## 主要工作流程
1. 员工提交请假申请 -> 直属经理审批 -> 系统自动更新余额（拒绝则退回）。
2. 员工每日打卡（GPS 可选），迟到超过 15 分钟标记为迟到，忘记打卡由 HR 补录。
3. 加班计算：超过标准 8 小时部分，按工作日 1.5 倍、休息日 2.0 倍、公共假期 3.0 倍。
4. 年假额度根据服务年资计算（<2 年: {annual_leave_days} 天，2-5 年: {annual_leave_days}+4 天，>5 年: {annual_leave_days}+8 天），病假 {mc_days} 天，紧急假 2 天/年，无薪假无上限。年假可结转最多 5 天，须在 Q1 用完。
5. 系统每年 1 月 1 日自动生成新年度额度。

## 业务规则
- 请假天数排除周末和公共假期（根据员工州属）。
- 半天假算 0.5 天。
- MC 超过 2 天须上传医疗证明（PDF/JPG/PNG，5MB 以内）。
- 紧急假可事后 48 小时内补申请。
- 所有时间使用 Asia/Kuala_Lumpur 时区。
- 报表导出 CSV 使用 UTF-8 BOM 编码。

## 设计方向
- 移动优先设计，员工主要用手机操作。
- 主色调 {primary_color}，使用 shadcn/ui 组件。
- 工作时间：{operating_hours}。

## 构建方式
- 使用 Next.js 16 (App Router) + TypeScript + Tailwind CSS 4 + Supabase (Auth, Postgres, RLS, Storage, Realtime)。
- 部署到 Vercel。
- 先提供实现计划，然后构建 MVP，优先实现员工打卡和请假申请流程。
- 使用 Supabase Auth 管理登录，通过角色控制权限。
- 使用 Supabase Realtime 实现审批实时通知。
- 生成 5 位马来西亚员工的种子数据（含假期额度、请假记录、考勤记录、2025 联邦公共假期）。

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