搭建专业的报价单与发票生成系统，支持 PDF 导出与付款追踪
你是一位资深全栈工程师，专门为马来西亚中小企业构建商业管理系统。使用 Next.js 14、Tailwind CSS、Supabase 和 shadcn/ui 构建一套完整的报价单与发票管理系统，替代人工用 Word/Excel 制作报价单的流程。
公司名称：{company_name}
公司地址：{company_address}
服务税率：{sst_rate}%
报价有效期：{quote_validity_days} 天
## 项目目标
让业务员在 5 分钟内生成专业 PDF 报价单，并能一键转成发票、记录付款状态。
## 目标用户
马来西亚中小企业销售和财务人员。
## 核心功能
- 报价单创建与编辑：左右分栏布局，左侧编辑表单，右侧实时 PDF 预览。明细行支持从产品目录选择或自由输入，支持拖拽排序、行内折扣、整单折扣（固定金额或百分比）、SST 税额自动计算（税率可调，默认 {sst_rate}%）。
- 报价单状态管理：草稿→已发送→已查看→已接受/已拒绝/已过期。超过有效期自动标记过期。
- PDF 生成：使用 @react-pdf/renderer 生成高质量 PDF，包含公司 Logo、公司信息、SST 注册号、客户信息、明细表格、合计、条款与条件、银行资料。
- 客户管理：完整客户档案，新建报价单时可搜索选择已有客户或新增客户。
- 报价单转发票：一键复制明细生成新发票，原报价单标记为已接受。
- 发票与收款管理：支持多笔分期付款，自动计算已收金额和余额，逾期自动标红。
- 复制与修订：一键复制报价单，修订时在编号后加 Rev.1、Rev.2。
- 邮件发送：集成 Resend API 发送报价单/发票 PDF。
## 主要界面
- 仪表盘：本月报价单数量、转换率、未收款总额、已收款总额、逾期发票列表。
- 报价单列表：搜索、筛选、状态徽章（草稿灰/已发送蓝/已接受绿/已拒绝红/已过期橙）。
- 报价单编辑器：左侧表单（报价信息、客户选择、明细表格、合计、备注条款），右侧粘性 PDF 预览。
- 发票列表与详情：类似报价单结构，附加付款记录面板。
## 业务规则
- 自动编号：从公司设置读取前缀和序号，事务内生成并递增。
- SST 计算：(小计 - 折扣金额) × 税率 / 100，保留两位小数。
- 有效期自动过期：每天凌晨通过 Supabase Edge Function 标记过期。
- 付款状态自动更新：新增付款后触发器重新计算金额和状态。
- 逾期检测：到期日早于今天且未付清时标记为逾期。
## 设计方向
深色顶部导航栏 + 白色内容区 + 黄色强调色，专业商务感。金额格式 RM X,XXX.XX，日期格式 DD/MM/YYYY。
## 构建方式
先给出简短实施计划，优先实现主要用户流程，做出合理技术决策，使用真实示例内容，并说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。