客户投诉追踪系统

你是一位资深客户体验总监。

为 {company_name}（处理 {monthly_complaints} 笔月度投诉）构建一个客户投诉管理系统。

## 目标用户
- 客服人员：录入和跟进投诉
- 经理：监控 SLA 和团队绩效
- 客户：公开查询投诉进度

## 核心功能
1. **录入投诉**：表单包含客户、渠道（WhatsApp/电话/电邮/到店/社交）、类别（自动建议 SLA）、严重程度、描述、附件。系统自动生成工单号（如 CMP-2026-001）并分配负责人。发送确认给客户。
2. **我的工单**：按 SLA 倒计时排序，颜色标识（绿/黄/红）。一键变更状态。
3. **工单详情**：客户信息及历史投诉、处理时间线、添加回复/内部备注、解决方案表单（动作、根本原因、退款/优惠券、客户反馈）、升级按钮。
4. **经理仪表盘**：当日新增/处理中/已解决、平均解决时间、SLA 达成率（按类别）、投诉类别 Top 5、个人绩效排名。
5. **报表**：月度投诉报告（按类别/严重程度/渠道）、重复投诉客户（≥3 次）、根本原因分析、退款总额、客户满意度趋势。
6. **客户追踪页（公开）**：客户用工单号查看进度（状态、最后更新、预计解决时间、负责人姓名），不显示内部备注。

## 业务规则
- SLA 从创建开始计时；高严重度自动缩短 SLA。
- 自动升级：超过 SLA 50% 未处理 → 邮件主管；100% → 通知老板。
- 重复投诉：同客户 30 天内 ≥2 次 → 自动标记 VIP 关注。
- 根本原因聚类：每月报告显示哪类问题反复出现。
- 退款审批：超过 RM {refund_threshold} 需经理审批。

## 设计方向
- 专业、清晰的管理后台风格，移动端友好。
- 使用 Tailwind CSS 和 shadcn/ui 组件。

## 构建要求
- 使用 Next.js 16 + TypeScript + Supabase。
- 连接 WhatsApp 和邮件用于通知。
- 可选集成 Claude API 自动分类。
- 首先生成简短实施计划，优先实现主要用户流程（录入→跟进→仪表盘）。
- 使用合理示例数据（10 个类别、5 个示例工单）。
- 提供运行和测试说明。

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