公司通讯录与组织架构图

你是一位全栈开发专家，正在为一家马来西亚中小企业打造「公司通讯录与组织架构图」网络应用程序。目标是取代分散在WhatsApp和纸张上的联络名单，建立一个专业、可搜索的数字通讯录，并配备互动式组织架构图。

## 角色与背景
- 客户：马来西亚华人中小企业老板，员工约{{employee_count}}人，分布于{{office_locations}}
- 公司名称：{{company_name}}
- 部门：{{departments}}
- 使用者：全体员工——每天需要查找同事联络方式，管理层需要查看团队架构
- 痛点：没有统一的联络中心，组织架构图是一份没有人更新的静态PowerPoint
- 成功指标：员工在10秒内找到任何同事的联络方式

## 项目目标
构建一个可搜索的员工通讯录和互动式组织架构图，包含员工个人资料页面、部门页面、生日与周年纪念提醒、新员工亮点以及导出功能。

## 核心体验与页面
- 通讯录页面：卡片网格显示头像、姓名、职位、部门标签、电邮、电话、办公地点；支持搜索（姓名、职位、技能、简介）、按部门/地点筛选、排序（姓名、部门、最新加入、周年纪念）；显示总数和新员工标签（入职90天内）
- 组织架构图页面：从总裁开始的树状图，节点显示头像缩略图、姓名、职位、部门颜色指示条；可展开/折叠、缩放/平移、按部门颜色区分、点击节点打开员工资料弹窗；支持横向/纵向布局切换，悬停时高亮汇报链
- 员工个人资料页面：大头像、姓名、职位、部门、状态标签；联络按钮（电邮、电话、LinkedIn）；简介与技能标签；上级主管和直属下属迷你卡片；入职日期、周年纪念倒数、办公地点（含地图链接）；生日（仅月日）
- 部门页面：部门名称、说明、主管资料卡、所有成员网格、子部门列表、人数和平均在职年资
- 生日与周年纪念提醒：通讯录顶部固定横幅显示7天内事件，点击跳转，管理员可开关
- 新员工亮点：主网格上方展示入职30天内员工，黄色高亮边框，30天后自动消失
- 导出功能：当前筛选结果导出PDF（表格含头像、姓名、职位、电邮、电话）；单个员工导出vCard；完整通讯录导出CSV

## 主要工作流程
1. 用户打开通讯录页面，看到统计栏（总员工数、部门数、本月新增、本周生日、本周周年纪念）和员工卡片网格
2. 用户可通过搜索栏或筛选标签页快速查找同事，点击卡片查看详情或打开个人资料页面
3. 用户切换到组织架构图页面，浏览树状结构，点击节点查看员工信息
4. 管理员通过后台管理员工和部门，包括CRUD操作、批量导入、部门管理

## 业务规则
- reports_to字段驱动组织架构图层级——除总裁外每位员工都有上级
- 部门主管在卡片上显示皇冠图标
- 多地点支持：按办公室筛选只显示该地点的员工
- 状态筛选：默认只显示在职员工；管理员可查看所有状态
- 电话号码以+60格式储存，显示为012-345 6789格式
- 头像照片储存在Supabase Storage，RLS允许已认证用户读取

## 设计方向
- 顶部导航：深海军蓝（#0F172A），左侧公司标志，中间搜索栏，右侧个人图标
- 统计栏以药丸式统计卡显示
- 白色卡片背景，细边框（#E2E8F0），圆角8px
- 黄色（#FCD34D）用于新人标签、CTA按钮、部门主管皇冠图标、已激活的筛选标签
- 头像：无照片时用姓名首字母加部门颜色背景
- 手机版：单列卡片堆叠，固定搜索栏，底部抽屉式筛选
- 加载中：骨架屏卡片

## 构建方法
- 使用Next.js 14（App Router）+ TypeScript + Tailwind CSS + shadcn/ui
- 使用Supabase作为后端（Postgres + 认证 + RLS + Storage）
- 使用react-organizational-chart或D3.js实现组织架构图
- 先构建通讯录页面和组织架构图页面
- 用真实的马来西亚员工姓名为上述部门预填示例数据
- 确保TypeScript类型完整、错误边界处理到位、加载状态和空状态处理齐全

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