生产工单追踪系统

你是一位全栈工程师，为马来西亚中小型制造工厂构建生产工单追踪系统，替代付费MES/ERP或Excel。工厂名称：{factory_name}，生产阶段：{production_stages}，产品类型：{product_types}，工作班次：{work_shifts}。

## 角色与背景
你为{factory_name}构建系统，该工厂生产{product_types}，生产流程分为{production_stages}，实行{work_shifts}班次。

## 项目目标
构建一个生产工单追踪系统，支持工单创建、看板管理、质量检查、原材料追踪、出货调度和基础分析。

## 目标用户
- 办公室管理员：创建工单、管理BOM、查看报表
- 车间工人：通过手机端查看和更新自己的阶段状态

## 核心体验与界面
- **仪表盘**：显示6个KPI卡片（进行中工单数、今日交货数、本周按时完成率、今日良率、低库存预警数、本月产出总量）
- **看板视图**：以{production_stages}为列，每张工单为卡片，支持拖拽移动至下一阶段，卡片显示工单编号、产品、客户、数量、进度条、交货日期、优先级颜色标签，超期工单显示红色边框和超期天数
- **工单详情面板**：点击卡片展开侧边栏，显示完整工单信息、生产阶段时间轴、BOM原材料清单（计划用量vs实际用量）、质检记录、出货信息，操作按钮包括更新阶段状态、记录质检、安排出货、打印工单
- **原材料需求计算**：创建工单时自动根据BOM计算原材料需求，显示需用量、当前库存、差额，差额为负时高亮警告
- **工人排班与指派**：每个生产阶段可指派一名工人，工人可通过手机端自助更新阶段状态为“开始”或“完成”
- **质量检查模块**：记录质检结果（良品、不良品、返工数量及原因），结果为“返工”时重置阶段状态，自动计算良率
- **生产进度甘特图**：显示未来14天生产计划，按交货日期排序，颜色区分状态（在途/正常=蓝，即将到期=橙，超期=红，已完成=绿）
- **出货调度**：工单进入最后阶段后提示安排出货，填写出货日期、运输方式、联系人，出货后自动更新工单状态为“已完成”
- **分析报告页面**：产出报告、准时交货率、质量报告、原材料消耗报告、工人效率报告，支持按日/周/月筛选，图表使用recharts，所有报表支持导出CSV
- **管理后台**：产品与BOM管理、客户管理、原材料管理、工人管理、系统设置（配置生产阶段名称、班次时间、工单编号前缀）

## 主要工作流程
1. 管理员创建工单，选择客户、产品、数量、交货日期、优先级，系统自动生成工单编号（格式PO-年份-四位流水号），自动从BOM拉取原材料清单并检查库存，不足时显示警告
2. 工单进入看板，工人通过拖拽或手机端更新阶段状态
3. 每个关键阶段后记录质检结果
4. 工单完成后自动扣减原材料库存
5. 安排出货，工单状态变为“已完成”

## 业务规则
- 工单编号每年重置
- 超期检测：交货日期早于今天且状态未完成时标记为超期
- 良率计算：良品数量/(良品数量+不良品数量)×100%
- 阶段推进时显示提示“工单PO-XXXX已进入下一阶段”
- 工单完成后从库存扣除实际用量
- 优先级颜色：紧急=红、高=橙、普通=蓝、低=灰
- 选择产品后自动建议交货日期为计划开始日期+标准生产天数
- BOM库存预警在工单创建页面和仪表盘同时展示

## 设计方向
深色顶部导航+白色内容区+黄色(#FCD34D)点缀重要操作按钮。看板卡片圆角白色，左侧优先级彩色竖条，进度条黄色填充。移动端适配：单列看板，左右滑动切换阶段，大按钮设计方便戴手套操作。

## 构建方式
使用Next.js 14(App Router)+TypeScript+Tailwind CSS+shadcn/ui+Supabase(PostgreSQL+Auth+RLS)，部署在Vercel。先给出简短实施计划，优先实现主要用户旅程（工单创建→看板→质检→出货），使用合理的技术决策和真实示例内容，并说明如何运行和测试。

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