费用报销管理系统

你是一位资深全栈工程师，精通 Next.js 16、Tailwind CSS 4 和 Supabase。请为 {company_name} 搭建一套费用报销管理系统，公司约有 {num_employees} 名员工，使用 {currency} 作为货币单位，主色调为 {primary_color}。

## 项目概述

为马来西亚中小企业设计，取代纸质报销单和 Excel 追踪表。员工在线提交报销申请（含收据拍照上传），经过 {approval_levels} 级审批流程后，财务部门完成付款并记录。

## 核心功能

1. **员工端**：仪表板（本月报销概览、预算进度条）、新建/编辑报销单（动态添加费用明细、收据上传、里程报销、GST/SST 自动计算、政策合规检查）、报销单详情（审批时间线、付款信息）。
2. **审批端**：待审批列表（按提交时间排序，可展开查看明细和收据）、批准/拒绝（含意见）、批量审批、筛选。
3. **财务端**：已批准待付款列表（显示员工银行信息）、标记处理中/已付款、输入转账参考号、导出付款 CSV。
4. **报表中心**：月度部门报表、员工排行、类别分析、趋势分析、预算对比、GST/SST 汇总，支持日期/部门筛选和导出。
5. **系统设置**：费用类别管理、审批流程配置（{approval_levels} 级）、里程费率、政策规则、员工管理、GST/SST 税率。

## 用户与权限

- 员工：管理自己的报销单。
- 经理：审批直属下属的报销单。
- 财务：审批经理通过的单据并处理付款。
- Admin：全部权限及系统设置。

## 业务规则

- 员工每月报销上限为 {monthly_budget} {currency}。
- 审批流程为 {approval_levels} 级（经理→财务）。
- 里程报销按 LHDN 标准（RM 0.60/km）。
- 自动检查单项金额、类别月度预算、必要收据，违规时给出警告但不阻止提交。
- 员工不能修改已提交的单据，审批人不能审批自己的单据。

## 设计方向

- 主色调 {primary_color}，白色背景，深灰文字。
- 响应式设计，员工端侧重手机（拍照上传），审批端侧重手机操作。
- 金额显示统一为 {currency} 符号加两位小数。
- 状态标签颜色区分：草稿(灰)、待审批(黄)、已批准(绿)、已拒绝(红)、处理中(蓝)、已付款(深绿)。
- 表单自动保存草稿，重要操作需确认对话框。

## 本地化要求

- 货币：{currency}（默认 RM/MYR）。
- 日期格式：DD/MM/YYYY。
- 支持 SST（销售税 10%、服务税 8%）。
- 银行列表包含马来西亚主要银行。
- 支持 Grab、Touch n Go eWallet 收据。

## 构建方式

- 使用 Next.js 16 (App Router) + TypeScript + Tailwind CSS 4 + shadcn/ui。
- 后端使用 Supabase（Auth、PostgreSQL、Storage、RLS）。
- 先给出简短实施计划，优先实现员工提交和审批主流程。
- 使用 realistic 示例数据，确保代码可运行并说明如何启动和测试。
- 安全要求：所有表启用 RLS，金额使用 numeric 类型，收据通过 Storage 安全访问，银行账号仅财务和本人可见。

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