客户关系管理系统 (CRM)

你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。请为「{company_name}」构建一个客户关系管理系统（CRM），替代 Salesforce 等付费工具。

## 角色与背景
你是一位资深全栈工程师，专为马来西亚中小企业构建商业应用。

## 项目目标
为 {company_name} 构建一个完整的 CRM 系统，管理线索、联系人、公司和销售管道。

## 目标用户
{company_name} 的销售团队，共 {team_size} 人。

## 核心体验与页面
- 销售漏斗看板：拖拽商机卡片在阶段间移动，阶段为 {sales_stages}。每张卡片显示公司名、联系人、金额、概率、到期日和负责人。超过14天未推进显示橙色停滞徽章，过期显示红色警告。拖拽时弹出对话框要求填写阶段变更备注，并自动记录活动。
- 联系人管理：表格视图列出姓名、职位、公司、电话、最后联系时间和线索评分。支持 CSV 批量导入和快速添加（最少姓名+电话）。点击查看详情，包括基本信息、所属公司、相关商机和活动时间线。
- 公司管理：详情页显示公司信息、所有联系人、相关商机和活动时间线。
- 活动记录：在商机、联系人和公司详情页均可快速记录通话、邮件、会议、WhatsApp、备注和阶段变更。时间线视图按时间倒序展示。
- 任务与提醒：创建跟进任务，关联商机或联系人。优先级低/中/高/紧急，到期高亮。我的任务视图按优先级和到期日排序。完成任务自动创建活动记录。
- 销售仪表盘：顶部摘要卡片显示本月管道价值、成交金额、活跃商机数和成交率。图表包括阶段分布、每日成交趋势、线索来源饼图（来源：{lead_sources}）和团队排行榜。
- 全局搜索：Cmd+K 打开搜索面板，同时搜索联系人、公司和商机。

## 主要工作流程
1. 销售代表从 {lead_sources} 获取线索，创建公司和联系人。
2. 创建商机并分配阶段，通过拖拽推进。
3. 记录每次互动（通话、邮件等），系统自动更新线索评分和最后联系时间。
4. 创建跟进任务，到期提醒。
5. 仪表盘实时显示团队绩效和管道健康度。

## 业务规则
- 线索评分自动计算：有网站+10，有邮箱+15，有电话+10，有活跃商机+20，近7天有活动+15，商机金额超RM50,000+20，近30天无活动-10。
- 商机停滞警告：同一阶段超过7天黄色，14天橙色，30天红色。
- 阶段验证：进入报价阶段需填写金额；进入谈判需记录客户需求；关闭商机必须填写原因。
- 销售预测：基于活跃商机加权金额自动计算。
- 马来西亚本地化：金额格式 RM XX,XXX.00，电话 +60-XX-XXXXXXX，日期 DD MMM YYYY。

## 设计方向
- 顶部导航深海军蓝（#0F172A），内容区白色背景，主按钮金黄色（#FCD34D），成功绿色，警告橙色，危险红色。
- 左侧240px导航栏，顶部面包屑和搜索按钮，响应式布局。
- 菜单：仪表盘、销售漏斗、联系人、公司、活动、我的任务、分析、设置。

## 构建方法
- 使用 Next.js 14 (App Router) + TypeScript，Tailwind CSS + shadcn/ui，Supabase (PostgreSQL) 带行级安全，Vercel 部署。
- 拖拽用 @dnd-kit，图表用 Recharts，表单验证用 react-hook-form + zod。
- 从销售漏斗看板开始，确保拖拽功能可用后再构建其他模块。
- 先给出简短实施计划，优先主用户旅程，做出合理技术决策，使用真实示例内容，说明如何运行和测试。

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