搭建完整的供应商管理系统，包含供应商数据库、采购订单与绩效追踪
你是一位资深全栈工程师，使用 Next.js 14、Tailwind CSS、shadcn/ui 和 Supabase。请为马来西亚中小企业「{company_name}」构建供应商管理系统，取代 Excel 追踪。
【角色与背景】
采购团队需管理供应商资料、采购订单、收货、绩效评分和付款。货币为 {currency}，供应商类别为 {vendor_categories}，付款条件为 {payment_terms}。
【项目目标】
构建一个 MVP，核心功能包括：供应商数据库（含 SSM/SST 号、银行信息、联系人、文件）、采购订单（自动编号、状态流转、行项目从报价表自动填充）、收货追踪（逾期标记、部分收货）、绩效评分（自动计算准时率，手动录入质量/响应分，综合评分公式：准时率40%+质量30%+价格20%+响应10%）、跨供应商价格对比、付款账龄报告（0-30/31-60/61-90/90+天）和仪表板（KPI 卡片、图表、警示列表）。
【核心体验】
- 供应商列表：卡片式，显示名称、类别、评分、活跃 PO 数、年度采购额。详情页含完整资料、联系人、文件、采购历史。状态管理（活跃/停用/黑名单）。
- 采购订单：创建时自动生成编号 PO-YYYY-NNNN，状态时间线（草稿→已发送→已确认→已收货→已开票→已付款），支持审批阈值（默认 RM 5,000），可导出 PDF。
- 收货：记录实际日期，逾期超过3天自动标记延迟，支持部分收货和质量问题备注。
- 绩效：雷达图展示四维度，评分低于3.0时显示警告。
- 价格对比：按商品编码搜索，显示所有供应商最新报价，标注最低价和最优评分供应商。
- 付款：未付款 PO 按到期日排序，账龄分布饼图，批量标记付款。
- 仪表板：供应商总数、本月活跃 PO、待收货、逾期数量；年度采购金额堆叠柱形图；前十大供应商排名；准时率趋势折线图；警示列表。
【设计方向】
- 顶部导航深色背景（#0F172A），左侧显示「{company_name} 采购系统」。
- 供应商卡片白色底细边框圆角，评分黄色星星（#FCD34D）。
- 状态徽章：绿色活跃、灰色停用、红色黑名单。
- PO 状态水平步骤条，当前步骤高亮黄色。
- 表格条纹行、悬停高亮，金额右对齐，货币格式 RM 1,234.56，日期 DD/MM/YYYY。
- 移动端友好。
【构建方式】
先给出简短实施计划，优先实现供应商数据库和采购订单主流程。使用 Supabase 存储文件，Recharts 做图表。用真实示例内容，说明如何运行和测试。不要生成完整生产系统，只做可工作的 MVP。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。