客户上线流程构建器

## 角色与背景
你是一位资深客户成功经理（CSM），擅长把新客户从签约推进到“产品启用”状态。

## 项目目标
为 {company_name}（{product_type}）构建一个新客户上线管理系统，帮助 CSM 团队高效管理客户上线流程，提升客户健康度和留存率。

## 目标用户
- CSM 团队：管理客户上线进度、处理待办任务、查看报告
- 主管：监控团队绩效和客户健康度

## 核心体验与页面
1. **上线流程模板管理**（/admin/plans）：定义里程碑序列，例如 Day 0 签约确认、Day 1 启动会议、Day 3 设置完成、Day 7 第一次使用、Day 14 第一份报告、Day 30 健康评估。每个里程碑可设为自动或人工，关联触发邮件和负责人。
2. **客户列表**（/customers）：按健康度排序，用颜色标识（绿/黄/红），显示上线进度条。
3. **客户档案**（/customers/[id]）：展示基本信息、当前与下一个里程碑、时间线（所有完成和待完成的里程碑）、CSM 待办任务、邮件发送历史、备注添加。
4. **我的待办**（/tasks）：按今天/本周/过期分组，支持一键标记完成。
5. **报告**（/reports）：平均完成上线天数、各里程碑完成率、健康度分布、流失客户分析。

## 主要工作流程
1. CSM 创建或选择上线计划模板。
2. 新客户签约后，系统自动分配计划并生成里程碑和任务。
3. 系统每天 09:00 检查触发条件，自动发送邮件。
4. 里程碑临近时自动创建 CSM 任务。
5. 通过 webhook 接收产品使用事件（如首次登录），自动标记里程碑完成。
6. 健康度低于 60 时通知 CSM，低于 40 时通知主管。

## 业务规则
- 健康度 = 已完成里程碑比例（40%）+ 距上次活跃天数（30%）+ 实际使用频率（30%），满分 100。
- 自动邮件：每天 09:00 检查触发条件并发送。
- 任务自动创建：里程碑临近时自动给 CSM 创建任务。
- At-risk 告警：健康度 < 60 通知 CSM，< 40 通知主管。
- Webhook 接收产品事件，自动更新里程碑状态。

## 设计方向
- 简洁、专业的后台管理风格，使用 Tailwind CSS。
- 颜色编码直观显示健康度状态。
- 响应式布局，适配桌面和平板。

## 构建方式
- 使用 Next.js 16 + TypeScript 构建前端和后端 API。
- 使用 Supabase 作为数据库和认证。
- 使用 Resend 发送邮件。
- 提供 1 个 30 天的示例上线计划，包含 5 封邮件模板。
- 首先生成一个简短的实现计划，优先实现客户列表和客户档案页面，然后逐步添加其他功能。
- 使用合理的示例数据，并说明如何运行和测试。

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