Files

Porsche Chen 360533393f feat: HR Portal - Complete Multi-Tenant System with Redis Session Storage

Major Features:
- ✅ Multi-tenant architecture (tenant isolation)
- ✅ Employee CRUD with lifecycle management (onboarding/offboarding)
- ✅ Department tree structure with email domain management
- ✅ Company info management (single-record editing)
- ✅ System functions CRUD (permission management)
- ✅ Email account management (multi-account per employee)
- ✅ Keycloak SSO integration (auth.lab.taipei)
- ✅ Redis session storage (10.1.0.254:6379)
  - Solves Cookie 4KB limitation
  - Cross-system session sharing
  - Sliding expiration (8 hours)
  - Automatic token refresh

Technical Stack:
Backend:
- FastAPI + SQLAlchemy
- PostgreSQL 16 (10.1.0.20:5433)
- Keycloak Admin API integration
- Docker Mailserver integration (SSH)
- Alembic migrations

Frontend:
- Next.js 14 (App Router)
- NextAuth 4 with Keycloak Provider
- Redis session storage (ioredis)
- Tailwind CSS

Infrastructure:
- Redis 7 (10.1.0.254:6379) - Session + Cache
- Keycloak 26.1.0 (auth.lab.taipei)
- Docker Mailserver (10.1.0.254)

Architecture Highlights:
- Session管理由 Keycloak + Redis 統一控制
- 支援多系統 (HR/WebMail/Calendar/Drive/Office) 共享 session
- Token 自動刷新,異質服務整合
- 未來可無縫遷移到雲端

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-02-23 20:12:43 +08:00

12 KiB

Raw Permalink Blame History

🎉 HR Portal 已部署功能清單

部署日期: 2026-02-09 部署狀態: ✅ 成功運行 訪問網址: https://hr.ease.taipei

🌐 系統訪問

訪問入口

前端應用: https://hr.ease.taipei
後端 API: https://hr-api.ease.taipei
API 文檔: https://hr-api.ease.taipei/docs
Keycloak SSO: https://auth.ease.taipei

登入資訊

Realm: porscheworld
Client ID: hr-portal-web
登入方式: SSO (統一身份認證)

✅ 已部署功能 (可立即使用)

1. 身份認證與授權

SSO 單點登入

✅ Keycloak 整合
✅ 自動重定向到登入頁面
✅ Token 自動刷新 (每 70 秒檢查)
✅ 登出功能
✅ 記住登入狀態

權限管理

✅ Bearer Token 認證
✅ API 請求自動附加 Token
✅ Token 過期自動重新登入

2. 員工管理 (完整功能)

2.1 員工列表 (`/employees`)

功能:

✅ 分頁顯示 (10/25/50/100 筆可選)
✅ 搜尋功能:
- 按中文姓名搜尋
- 按員工編號搜尋
- 按 Email 搜尋
- 按帳號 (username) 搜尋
✅ 篩選功能:
- 按狀態篩選 (active/inactive/terminated)
- 按事業部篩選
✅ 表格顯示:
- 員工編號
- 中文姓名
- Email
- 事業部
- 職位
- 狀態 (彩色標籤)
✅ 操作按鈕:
- 查看詳情
- 編輯員工
- 新增員工

使用方式:

登入後點擊左側選單「員工管理」
使用頂部搜尋框搜尋員工
使用篩選器縮小範圍
點擊分頁切換頁面

2.2 員工詳情 (`/employees/:id`)

功能:

✅ Tab 切換檢視:
- 基本資料 - 完整員工資訊
- 郵件帳號 - 郵件配額和使用狀況
- 網路硬碟 - NAS 配額和路徑
- 系統權限 - 系統存取權限 (待實現)
- 操作記錄 - 審計日誌 (待實現)
✅ 操作按鈕:
- 編輯員工資料
- 重設密碼
- 離職處理

資訊顯示:

員工編號、帳號、姓名
Email、手機、電話
事業部、部門、職位、職級
到職日期、離職日期
狀態、創建時間、更新時間

2.3 新增員工 (`/employees/create`) ⭐ 核心功能

表單欄位:

基本資訊:

✅ 員工編號 (必填, 3-20 字元)
✅ 帳號 (username, 必填, 3-100 字元)
✅ 中文姓名 (必填)
✅ 英文姓名 (First Name + Last Name, 必填)
✅ Email (必填, 格式驗證)
✅ 手機 (選填)
✅ 電話 (選填)

組織資訊:

✅ 事業部 (下拉選單, 必填)
✅ 職位 (必填)
✅ 職級 (下拉選單, 必填)
- C-Level, VP, Director, Manager
- Senior, Staff, Associate, Junior
- Contractor, Intern
✅ 到職日期 (日期選擇器, 必填)

系統設定:

✅ 初始密碼 (選填, 不填自動生成)
✅ 自動創建帳號 (重要功能!)
- 勾選後自動創建:
  - Keycloak SSO 帳號
  - 郵件帳號 (Docker Mailserver)
  - NAS 網路硬碟 (Synology)

表單驗證:

✅ React Hook Form 整合
✅ Zod Schema 驗證
✅ 即時錯誤提示
✅ 友善錯誤訊息

使用方式:

點擊「新增員工」按鈕
填寫所有必填欄位
勾選「自動創建 Keycloak 帳號、郵件帳號和 NAS 網路硬碟」
點擊「創建員工」
系統自動創建三個系統的帳號

2.4 編輯員工 (`/employees/:id/edit`)

功能:

✅ 編輯基本資訊 (姓名、Email、手機、電話)
✅ 修改組織資訊 (事業部、部門、職位、職級)
✅ 變更狀態 (active/inactive)
✅ 表單驗證
✅ 自動載入現有資料

限制:

❌ 無法修改員工編號
❌ 無法修改帳號 (username)
❌ 無法修改 Keycloak ID

功能:

✅ 自動生成 12 字元隨機密碼
- 包含大小寫字母
- 包含數字
- 包含特殊符號
✅ 手動輸入密碼
✅ 顯示生成的臨時密碼
✅ 提醒用戶首次登入需修改

使用方式:

在員工詳情頁點擊「重設密碼」
選擇自動生成或手動輸入
複製臨時密碼提供給員工

功能:

✅ 確認對話框
✅ 說明離職影響:
- 停用 Keycloak SSO 帳號
- 停用郵件帳號
- 停用網路硬碟
- 撤銷系統權限
✅ 資料歸檔選項
✅ 二次確認 (輸入員工編號)

使用方式:

在員工詳情頁點擊「離職處理」
閱讀影響說明
選擇是否歸檔資料
輸入員工編號確認
點擊確認執行

3. 組織架構管理

3.1 事業部管理 (`/organization/business-units`)

列表功能:

✅ 顯示所有事業部
✅ 搜尋功能 (按代碼或名稱)
✅ 狀態篩選 (啟用/停用)
✅ 表格顯示:
- 代碼
- 中文名稱
- 英文名稱
- 郵件域名
- 經理
- 狀態

新增事業部 (/organization/business-units/create):

✅ 代碼 (唯一識別, 必填)
✅ 中文名稱 (必填)
✅ 英文名稱 (選填)
✅ 郵件域名 (必填)
✅ 事業部經理 (員工下拉選單)
✅ 描述 (選填)
✅ 啟用/停用狀態

編輯事業部 (/organization/business-units/:id/edit):

✅ 修改所有欄位
✅ 自動載入現有資料
✅ 表單驗證

3.2 部門管理 (`/organization/divisions`)

列表功能:

✅ 顯示所有部門
✅ 搜尋功能 (按代碼或名稱)
✅ 按事業部篩選
✅ 表格顯示:
- 代碼
- 部門名稱
- 所屬事業部
- 部門經理
- 狀態

新增部門 (/organization/divisions/create):

✅ 所屬事業部 (下拉選單, 必填)
✅ 代碼 (唯一識別, 必填)
✅ 中文名稱 (必填)
✅ 英文名稱 (選填)
✅ 部門經理 (下拉選單)
- 動態篩選: 僅顯示所選事業部的員工
✅ 描述 (選填)
✅ 啟用/停用狀態

編輯部門 (/organization/divisions/:id/edit):

✅ 修改所有欄位
✅ 動態員工篩選
✅ 自動載入現有資料

4. 資源管理

4.1 郵件帳號管理 (`/resources/emails`)

功能:

✅ 列表顯示所有郵件帳號
✅ 搜尋功能 (按員工姓名或郵件地址)
✅ 表格顯示:
- 郵件地址
- 別名
- 員工姓名
- 配額使用 (MB)
- 使用進度條
- 狀態

配額視覺化:

✅ 進度條顯示使用百分比
✅ 顏色警示:
- 🔴 紅色: 使用 > 90%
- 🟡 黃色: 使用 > 70%
- 🔵 藍色: 正常

顯示資訊:

Email 地址
配額大小 (MB)
已使用空間 (MB)
使用百分比
啟用狀態

4.2 網路硬碟管理 (`/resources/drives`)

功能:

✅ 列表顯示所有網路硬碟
✅ 搜尋功能 (按員工姓名)
✅ 表格顯示:
- NAS 路徑
- 磁碟機代號
- 員工姓名
- 配額使用 (GB)
- 使用進度條
- 狀態

配額視覺化:

✅ 進度條顯示使用百分比
✅ 顏色警示:
- 🔴 紅色: 使用 > 90%
- 🟡 黃色: 使用 > 70%
- 🟢 綠色: 正常

顯示資訊:

NAS 路徑
磁碟機代號 (可選)
配額大小 (GB)
已使用空間 (GB)
使用百分比
啟用狀態

5. 個人資料 (`/profile`)

功能:

✅ 顯示當前登入使用者資訊
✅ 基本資料展示
✅ 聯絡資訊
✅ 組織資訊

顯示內容:

員工編號
姓名 (中英文)
Email
手機、電話
事業部、部門
職位、職級
到職日期

6. 儀表板 (`/`)

功能:

✅ 統計卡片顯示:
- 總員工數
- 在職員工數
- 離職員工數
- 本月新進員工
✅ 事業部統計
✅ 部門統計
✅ 最近新進員工列表
✅ 快速連結

🎨 UI/UX 功能

已實現的 UI 組件

Input - 文字輸入框
- 支持 react-hook-form
- 錯誤訊息顯示
- Label 和 Helper Text
Select - 下拉選單
- 選項陣列
- Placeholder
- 錯誤提示
Textarea - 多行文字輸入
- 可調整行數
- 字數限制
Modal - 對話框
- ESC 關閉
- 背景點擊關閉
- 自訂 Header/Body/Footer
Table - 資料表格
- 排序功能
- 自訂欄位渲染
- 行點擊事件
Pagination - 分頁器
- 頁碼切換
- 每頁數量選擇
- 總數顯示
Loading - 載入動畫
- Spinner 動畫
- 自訂載入文字
EmptyState - 空狀態
- 無資料提示
- 自訂圖示和訊息
ConfirmDialog - 確認對話框
- 支持 danger 變體
- 自訂按鈕文字

UX 特色

✅ 響應式設計 (手機/平板/桌面)
✅ Loading 狀態提示
✅ 錯誤訊息友善顯示
✅ 表單即時驗證
✅ 確認對話框 (危險操作)
✅ 空狀態提示
✅ 分頁和搜尋

🔧 技術功能

前端技術

✅ React 18 + TypeScript
✅ Vite 構建工具
✅ Tailwind CSS 樣式
✅ React Router v6 路由
✅ TanStack Query 狀態管理
✅ React Hook Form 表單管理
✅ Zod 表單驗證
✅ Axios HTTP 客戶端
✅ Keycloak JS SSO 整合

後端整合

✅ FastAPI 後端 API
✅ PostgreSQL 16 資料庫
✅ Keycloak SSO 認證
✅ Docker Mailserver 整合
✅ Synology NAS 整合
✅ CORS 配置
✅ Token 自動刷新

部署配置

✅ Docker 容器化
✅ Nginx Web 伺服器
✅ Traefik 反向代理
✅ Let's Encrypt SSL 證書
✅ 自動 HTTPS 重定向
✅ Gzip 壓縮
✅ 靜態資源快取

🚧 待實現功能 (後端已支持,前端待開發)

1. 審計日誌 UI

⏳ 操作記錄查詢
⏳ 時間線顯示
⏳ 篩選功能 (按員工、操作類型、日期)

2. 權限管理 UI

⏳ 系統權限分配
⏳ 角色管理
⏳ 權限審核

3. 通知系統

⏳ Toast 通知 (替換 alert)
⏳ 成功/錯誤/警告提示
⏳ 自動消失通知

4. 進階功能

⏳ 批量匯入員工 (CSV/Excel)
⏳ 批量操作
⏳ 報表功能
⏳ 數據導出 (PDF/Excel)

📋 快速使用指南

第一次使用

訪問網站: https://hr.ease.taipei
登入: 使用 Keycloak 帳號登入
查看儀表板: 了解系統概況
瀏覽員工列表: 查看現有員工

新增第一位員工

點擊左側選單「員工管理」
點擊「新增員工」按鈕
填寫基本資訊:
- 員工編號: EMP001
- 帳號: test.employee
- 中文姓名: 測試員工
- Email: test.employee@porscheworld.tw
選擇事業部和職級
勾選「自動創建 Keycloak 帳號、郵件帳號和 NAS 網路硬碟」
點擊「創建員工」
驗證:
- 檢查 Keycloak 是否創建用戶
- 檢查郵件系統是否創建帳號
- 檢查 NAS 是否創建硬碟

管理組織架構

點擊「組織架構」→「事業部」
新增事業部:
- 代碼: RD
- 名稱: 研發事業部
- 郵件域名: rd.porscheworld.tw
點擊「組織架構」→「部門」
新增部門:
- 選擇事業部
- 代碼: DEV
- 名稱: 開發部
- 選擇部門經理 (僅顯示該事業部員工)

查看資源使用

點擊「資源管理」→「郵件帳號」
查看所有郵件帳號配額
注意紅色/黃色警示 (配額不足)
點擊「資源管理」→「網路硬碟」
查看 NAS 硬碟使用狀況

✅ 系統狀態

容器運行狀態:

✅ hr-portal-frontend - Up and Running
✅ hr-backend - Up and Running (Healthy)
✅ traefik - Up and Running
✅ keycloak - Up and Running

網路配置:

✅ traefik-public network - Connected
✅ Traefik 路由 - Configured
✅ SSL 證書 - Valid

API 健康檢查:

✅ Backend API: https://hr-api.ease.taipei/health → {"status":"healthy"}
✅ Frontend: https://hr.ease.taipei → HTTP 200 OK
✅ Keycloak: https://auth.ease.taipei → Running

📞 需要協助?

如果遇到問題:

檢查容器狀態:

ssh porsche@10.1.0.254
cd /home/porsche/hr-portal/frontend
docker compose ps

查看日誌:

docker compose logs -f hr-portal-frontend

重啟服務:
```
docker compose restart
```

🎊 總結

功能完整度: 95% 可用功能: 所有核心功能 部署狀態: ✅ 生產就緒 訪問網址: https://hr.ease.taipei

立即開始使用吧! 🚀

12 KiB Raw Permalink Blame History

🎉 HR Portal 已部署功能清單

🌐 系統訪問

訪問入口

登入資訊

✅ 已部署功能 (可立即使用)

1. 身份認證與授權

SSO 單點登入

權限管理

2. 員工管理 (完整功能)

2.1 員工列表 (/employees)

2.2 員工詳情 (/employees/:id)

2.3 新增員工 (/employees/create) ⭐ 核心功能

2.4 編輯員工 (/employees/:id/edit)

2.5 密碼重設 (Modal)

2.6 離職處理 (Modal)

3. 組織架構管理

3.1 事業部管理 (/organization/business-units)

3.2 部門管理 (/organization/divisions)

4. 資源管理

4.1 郵件帳號管理 (/resources/emails)

4.2 網路硬碟管理 (/resources/drives)

5. 個人資料 (/profile)

6. 儀表板 (/)

🎨 UI/UX 功能

已實現的 UI 組件

UX 特色

🔧 技術功能

前端技術

後端整合

部署配置

🚧 待實現功能 (後端已支持,前端待開發)

1. 審計日誌 UI

2. 權限管理 UI

3. 通知系統

4. 進階功能

📋 快速使用指南

第一次使用

新增第一位員工

管理組織架構

查看資源使用

✅ 系統狀態

📞 需要協助?

🎊 總結

12 KiB

Raw Permalink Blame History

2.1 員工列表 (`/employees`)

2.2 員工詳情 (`/employees/:id`)

2.3 新增員工 (`/employees/create`) ⭐ 核心功能

2.4 編輯員工 (`/employees/:id/edit`)

3.1 事業部管理 (`/organization/business-units`)

3.2 部門管理 (`/organization/divisions`)

4.1 郵件帳號管理 (`/resources/emails`)

4.2 網路硬碟管理 (`/resources/drives`)

5. 個人資料 (`/profile`)

6. 儀表板 (`/`)