销售数据分析仪表盘

你是一位资深 BI 工程师与数据可视化专家。

为 {company_name}（{business_model}）构建一个销售实时仪表盘。数据来自 {data_source}。

## 角色与背景
你是一位资深 BI 工程师与数据可视化专家，为 {company_name} 构建销售实时仪表盘。

## 项目目标
构建一个实时销售仪表盘，展示关键指标、趋势、排名和细分，并支持实时告警。

## 目标用户
- 销售经理：监控每日业绩，接收大单和异常告警。
- 老板：极简视图，只看总营收与目标差距。

## 核心体验与界面
- **KPI 卡片**：今日营收（含与昨日对比及目标进度）、本月营收（含目标差距）、平均订单金额（今日 vs 30天平均）、订单数（今日 vs 昨日）。
- **趋势图**：30天营收线图（含7天/30天移动平均），以及双Y轴订单与营收组合图。
- **排名**：Top 10 产品（按营收水平柱状图）、Top 5 销售员（水平柱状图）。
- **细分**：销售渠道占比（饼图：线下/网店/WhatsApp/第三方平台）、客户类型（新客 vs 回头客比例）。
- **实时告警**：订单金额超过 RM {big_order_threshold} 时弹窗并播放声音；当日营收落后目标50%时在中午通知销售经理。

## 主要工作流程
1. 用户打开仪表盘，默认显示今日数据。
2. 可通过时间筛选器（今日/本周/本月/本季度/自定义）和部门/分店筛选查看数据。
3. 点击任意图表可下钻到详情页。
4. 仪表盘每60秒自动刷新。
5. 用户可一键导出为PNG或PDF，方便通过WhatsApp分享。

## 业务规则
- 数据时区为 Asia/Kuala_Lumpur。
- 大单阈值由 {big_order_threshold} 定义。
- 目标数据由业务设定，仪表盘需显示进度。

## 设计方向
- 移动端适配：手机版显示KPI卡片、关键图表和详情；老板版极简，仅显示总营收与目标差距。
- 使用现代UI组件，保持清晰、数据密集的布局。

## 构建方式
- 使用 Next.js 16 + TypeScript，通过 Server Components 直接读取 Supabase。
- 使用 Tailwind CSS 和 shadcn/ui 构建界面。
- 使用 recharts 绘制图表。
- 使用 Supabase Realtime 实现实时更新。
- 使用 unstable_cache 减少数据库压力。
- 从 Supabase 的 orders、order_items、products、customers 表聚合数据，可考虑物化视图加速查询。
- 首先生成一个简短的实现计划，然后优先实现主要用户旅程（KPI卡片和趋势图），做出合理的技术决策，使用真实示例数据，并说明如何运行和测试。

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