客服工单系统

你是一位资深全栈工程师，专门为马来西亚中小企业搭建客户服务系统。请为「{company_name}」构建一套完整的客服工单系统，替代 Zendesk、Freshdesk 等付费工具，以及通过 WhatsApp 散乱处理客诉的方式。

## 项目目标
为 {company_name} 构建一个多渠道客服工单系统，支持客户通过 {support_channels} 提交工单，客服专员在统一收件箱中处理，并自动跟踪 SLA（首次响应 {sla_response_hours} 小时，解决时限 {sla_resolution_hours} 小时）。

## 目标用户
- 客户：通过自助门户提交工单、查询状态、追加回复。
- 客服专员：在收件箱中查看、回复、分配、合并工单，使用罐头回复和知识库。
- 管理员/主管：管理专员、配置 SLA 政策、查看分析仪表板。

## 核心体验与界面
1. **客户自助门户**：公开页面，客户可提交工单（含姓名、邮箱、电话、公司、问题描述、附件），提交后获得工单编号和查询链接。客户也可通过邮箱+工单编号查询状态并追加回复。
2. **客服收件箱**：左右分栏布局，左侧为可筛选、搜索、排序的工单列表（含优先级色块、SLA 倒计时徽章），右侧为工单详情（对话线程、客户信息、回复框）。移动端折叠为单列。
3. **管理后台**：工单总览、专员管理、SLA 政策配置、分析仪表板（摘要卡片、趋势图、渠道分布、专员绩效表、SLA 违约列表）。
4. **知识库**：公开文章列表与详情页，支持搜索和“有帮助”投票；工单提交时自动推荐相关文章。
5. **罐头回复**：在回复框输入 / 触发搜索，选中后自动填入并替换变量。

## 主要工作流程
1. 客户通过任意渠道提交工单 → 系统自动创建客户记录、生成工单编号、根据优先级设置 SLA 截止时间、执行自动分配（轮询或负载均衡）、发送确认邮件。
2. 客服专员在收件箱中查看工单 → 回复（公开或内部备注）、变更状态、分配、合并/拆分工单。
3. SLA 定时任务每 5 分钟扫描即将违约工单，自动升级优先级并通知主管。
4. 工单超过 {sla_resolution_hours} 小时无客户回复自动转为 pending，再过 48 小时自动关闭并发送满意度调查。

## 业务规则
1. urgent 工单必须填写“问题影响范围”字段。
2. 同一客户 24 小时内重复提交相似主题工单，系统提示可能重复并建议合并。
3. 所有状态变更、分配操作自动记录为系统消息，形成审计追踪。
4. 马来西亚语境：公司名称默认含“Sdn Bhd”，货币显示 RM，电话格式 +60，时区 Asia/Kuala_Lumpur。

## 设计方向
- 品牌色：深海军蓝 #0F172A 导航栏，白色内容区，黄金色 #FCD34D 用于 CTA 和 SLA 违约警告。
- 优先级色块：urgent 红色 #EF4444，high 橙色 #F97316，medium 蓝色 #3B82F6，low 灰色 #94A3B8。
- 字体：Inter 用于英文数字，Noto Sans SC 用于中文。
- 响应式设计，移动端收件箱折叠为单列。

## 构建方式
- 使用 Next.js App Router、Tailwind CSS、shadcn/ui 组件库。
- 数据库使用 Supabase（PostgreSQL + Auth + RLS），部署到 Vercel。
- 先实现工单提交和客服收件箱核心流程，再添加 SLA 计时、知识库、分析仪表板。
- 使用 Server Actions 处理表单提交和状态变更。
- 提供 .env.local 模板。
- 请先给出简短的实现计划，然后生成可运行的 MVP 代码，包含主要用户路径，使用合理的示例数据，并说明如何运行和测试。

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