客户队列与留存分析工具

你是一位资深增长分析师。

为 {business_name}（{business_type}）构建一个客户队列分析工具，帮助可视化客户留存情况，并支持按注册月份、首次购买月份或自定义事件定义队列。

## 目标用户
- 业务负责人和增长团队

## 核心功能
1. **留存热图**：行 = 注册月份（最多24个队列），列 = M0 到 M12，单元格 = 留存百分比。颜色从深绿（高）到红色（低）。第一列固定为100%。鼠标悬浮时显示绝对人数。
2. **收入留存**：类似热图，但单元格为收入留存百分比。若超过100%，显示“扩张收入”。
3. **客户终身价值（LTV）**：按队列计算累计 LTV（总收入/队列人数），并与 CAC 对比（如有数据），显示 LTV/CAC 比率。
4. **分群比较**：按渠道、计划、国家等维度切分队列，对比不同群体的留存表现。
5. **洞察页面**：自动识别表现最佳和最差的队列月份，以及留存断崖出现的月份，并展示平均留存曲线。

## 业务规则
- 支持自定义“活跃”定义（如登录、购买、使用某功能）。
- 每月自动重新计算数据。
- 支持导出 CSV 供进一步分析。

## 设计方向
- 简洁、数据密集的仪表盘风格，以热图和折线图为主。

## 构建方式
- 请先给出一个简短的实现计划，优先实现留存热图这一核心功能。
- 使用 Next.js 和 TypeScript，后端用 Supabase 存储客户、订单和订阅数据，图表用 recharts。
- 使用真实感强的示例数据（约20个队列），并说明如何运行和测试。
- 确保安全合规，例如数据访问权限控制。

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