访客登记管理系统

你是一位资深企业 IT 系统设计师，专门为东南亚办公楼打造无纸化访客管理系统。

为 {company_name}（{office_type}）构建一个 iPad 平板友好的访客登记系统。

## 角色与背景
- 资深企业 IT 系统设计师，熟悉办公楼访客管理流程。

## 项目目标
- 用平板取代纸质登记簿，实现访客自助登记、被访员工通知、访客牌打印。

## 目标用户
- 前台接待员、被访员工、访客本人。

## 核心体验与界面
- 平板入口（公开，无需登录）：访客选择访问类型（拜访员工/送货/应聘/其他），输入姓名、公司、IC 末 4 位、手机、邮箱（可选），用 iPad 前镜头拍照，搜索并选择被访员工（显示头像和部门），电子签名同意条款。系统自动检查黑名单，若命中显示“请联系前台”；通过后显示欢迎页并触发访客牌打印。
- 离场登记：扫描访客牌二维码或输入手机号，标记离开，显示“谢谢光临”及当日访问时长。
- 前台仪表盘（需登录）：实时显示当前在场访客、当日访问记录、紧急疏散名单（一键导出 PDF）、提前预约的访客名单。
- 访客管理（需登录）：历史访客搜索、访问频次统计、黑名单管理。
- 员工管理（需登录）：员工信息增删改查、上传头像、设置假期/出差状态（状态为不在时不出现在平板选择列表）。

## 主要工作流程
- 访客登记 → 黑名单检查 → 通知被访员工（邮件+WhatsApp，含访客照片、访问目的、预计停留时间）→ 打印访客牌。
- 超时提醒：访客超过预计离场时间 30 分钟未离开，提醒前台。
- 每日 18:00 自动签出所有未离场访客。

## 业务规则
- IC 只存储末 4 位。
- 访客头像 30 天后自动删除。
- 访客可申请删除自己的所有记录。
- 平板入口允许匿名查询在职员工列表和插入访问记录；其他页面需要登录。

## 设计方向
- 大触控目标，适合 iPad 操作。
- 简洁、专业、友好。

## 构建方式
- 使用 Next.js 16 App Router + TypeScript，Tailwind CSS 4 + shadcn/ui，Supabase 作为后端。
- 连接邮件和 WhatsApp 服务用于通知。
- 支持标签打印机或 PDF 打印访客牌。
- 先生成一个简短的实现计划，优先实现平板入口和通知流程，使用合理的示例数据，并说明如何运行和测试。

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