搭建购物车追踪与挽回系统，支持 WhatsApp/邮件自动提醒与数据分析
你是一位资深全栈开发工程师。请为马来西亚电商中小企业《{{store_name}}》构建一套完整的「购物车挽回系统」。该系统追踪未完成结账的购物车，并通过 WhatsApp 和电子邮件自动发送挽回消息，帮助商家找回流失的销售额。
## 角色与背景
你正在为一家马来西亚本地网店构建生产级购物车挽回系统。店主需要挽回那些将商品加入购物车却未完成付款的客户。系统必须通过 Webhook 与任何现有电商平台对接，自动化多步骤外联触达，并提供清晰的挽回效果数据分析。所有金额以 RM 显示。WhatsApp 是马来西亚客户的首选沟通渠道。
## 技术栈
- Next.js 14（App Router）+ TypeScript
- Tailwind CSS + shadcn/ui（new-york 风格，slate 基础色，黄色 #FCD34D 强调色）
- Supabase（Postgres + RLS + Edge Functions 用于定时任务）
- 通过 whapi.cloud 或 Twilio WhatsApp Business API 发送 WhatsApp 消息
- 通过 Resend 或 SendGrid 发送事务性邮件
- Vercel 托管，支持 Cron Job
## 核心功能
- **购物车追踪 Webhook**：接收电商平台推送的购物车数据（session_id、客户信息、商品列表、金额、结账链接），以 session_id 为唯一键 upsert，返回 restore_token。
- **放弃检测定时任务**：每5分钟运行，查询 status='active' 且超过 {{abandonment_threshold}} 分钟未更新的购物车，标记为 abandoned，并按 {{recovery_sequence}} 配置创建挽回序列（+1小时、+24小时、+72小时），在第2或第3步生成唯一折扣码 {{discount_code}}。
- **挽回消息发送定时任务**：每5分钟运行，发送 pending 状态的序列消息，通过 WhatsApp 或邮件发送，变量包括客户姓名、商品摘要、购物车总额、折扣码、挽回链接。
- **购物车恢复接口**：通过 restore_token 恢复购物车，记录点击事件，重定向至结账链接。客户完成付款后调用接口标记为已挽回。
- **挽回管理仪表盘**：展示今日放弃数量、挽回率、已挽回金额、待处理队列；可筛选的购物车列表（状态、日期、渠道）；每个购物车的挽回时间轴视图。
- **消息模板编辑器**：管理 WhatsApp 和邮件模板，支持变量插入和实时预览。
- **效果分析看板**：7天挽回漏斗图、挽回率趋势、每日挽回金额、模板对比、渠道分布。
## 业务规则
- 仅在有邮箱或手机号时发送挽回消息。
- 购物车标记为已挽回或已流失时停止所有序列。
- 每个购物车最多发送3条消息。
- 遵守 WhatsApp 24小时消息窗口规则。
- 折扣码72小时后过期，购物车金额低于 RM 10 时不生成折扣码。
- 放弃阈值可配置：{{abandonment_threshold}} 分钟。
- 挽回序列时间节点按 {{recovery_sequence}} 执行。
- 购物车创建时随机分配 A/B 模板变体进行测试。
## 界面设计要求
- 深色顶部导航栏，显示店铺名称「{{store_name}}」和「购物车挽回」标题。
- 白色内容区，slate 色文字，黄色 #FCD34D 强调色用于操作按钮和状态标签。
- 状态标签配色：黄色=待处理、蓝色=已发送、绿色=已挽回、红色=已流失、灰色=已取消。
- 移动端支持横向滚动，空状态显示正向激励文案，手动操作后弹出 Toast 通知，加载时显示骨架屏。
## 交付物
请提供完整文件目录结构、所有源代码文件（API 路由、组件、工具函数）、环境变量清单（.env.example），以及部署指南（Supabase 初始化、whapi.cloud 配置、Vercel Cron Job 设置、如何接入 Shopify 或 WooCommerce）。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。