取代实体印花卡，用数码积分系统留住回头客、提升复购率
你是一位资深全栈工程师，精通 Next.js 16、Tailwind CSS 4 和 Supabase。请为 {business_name}（一家马来西亚 {business_type}）构建一套客户忠诚度积分奖励系统，取代传统实体印花卡。
## 角色与背景
你是一位资深全栈工程师，为马来西亚中小企业构建数字化忠诚度系统。
## 项目目标
为 {business_name} 创建一套数码积分系统，让顾客通过消费累积积分并兑换奖励，同时提供管理后台追踪会员与活动。
## 目标用户
- 顾客：通过手机号注册，使用移动端界面查看积分、兑换奖励、推荐朋友。
- 店员：通过管理后台核销兑换券、管理会员资料。
- 店主：查看数据分析、管理奖励目录与营销活动。
## 核心体验与界面
- **顾客端（移动优先 PWA）**：首页提供扫码签到或输入手机号入口；会员主页显示姓名、等级徽章、当前积分及升级进度；奖励目录按等级过滤，积分不足的奖励灰显；兑换记录分积分与兑换两个标签；推荐页展示推荐码并支持 WhatsApp 分享。
- **管理后台（桌面优先）**：仪表盘显示总会员数、活跃会员、积分发放与兑换统计；会员管理支持搜索、筛选、查看详情及手动调整积分；奖励管理支持增删改及启用/停用；活动管理支持创建双倍积分、额外积分等活动；核销页输入兑换码确认；分析页展示留存率、访问频率、兑换率、等级分布及热门奖励排行。
## 主要工作流程
1. 顾客注册（姓名、手机号 +60 格式、生日月份）后获得 {welcome_bonus} 欢迎积分。
2. 每次消费按每 RM1 获得 {points_per_rm} 积分，生日月双倍，等级倍率（Silver 1.2x，Gold 1.5x）叠加活动倍率。
3. 顾客浏览奖励目录，选择可兑换奖励，系统检查积分并扣除，生成唯一兑换码（6位字母数字），有效期由奖励设定。
4. 店员在核销页输入兑换码完成核销。
5. 推荐人通过推荐码邀请新会员，双方各得 50 积分。
## 业务规则
- 等级：Bronze（默认）、Silver（总消费达 {tier_thresholds} 中的 silver 值）、Gold（总消费达 gold 值）。每月1日自动评估，降级需连续3个月未达标。
- 积分变动必须使用数据库事务保证一致性。
- 兑换券过期后自动标记为已过期。
## 设计方向
- 主色调：{primary_color}，搭配白色背景和深灰文字。
- 字体：Inter（英文）+ Noto Sans SC（中文），默认中文。
- 积分数字大号加粗，等级徽章圆形 pill 样式。
- 金额显示 RM 前缀，千位分隔符。
- 按钮圆角 rounded-xl，卡片带轻微阴影。
- 加载状态用 Skeleton，操作成功用 Sonner toast。
## 构建方式
- 使用 Next.js 16 (App Router) + TypeScript + Tailwind CSS 4 + shadcn/ui + Supabase (Postgres + Auth + RLS + Realtime)。
- 顾客端 mobile-first，管理端 desktop-first。
- 所有页面优先使用 Server Components，仅交互部分用 Client Components。
- 支持 PWA（manifest.json + service worker）。
- 默认中文，右上角可切换英文。
- 使用 Supabase Realtime 实现管理后台实时更新。
- 请先给出简短实施计划，优先实现主要用户流程，使用合理技术决策，包含真实示例内容，并说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。