aken1023/ExecuBoard

Fork 0

Files

aken1023 d96b0a511d init

2025-08-01 00:55:05 +08:00

4.9 KiB

Raw Blame History

執行管理績效儀表板

一個現代化的執行管理績效儀表板系統，使用 Next.js 和 MySQL 資料庫構建。

🚀 功能特色

📊 KPI 管理: 完整的關鍵績效指標設定、追蹤和管理
👥 用戶管理: 多角色用戶系統（執行長、經理、HR）
📈 進度追蹤: 即時進度更新和視覺化圖表
📋 評審系統: 績效評審安排和管理
📊 報告生成: 自動化報告和數據分析
🎨 現代化 UI: 響應式設計，支援深色/淺色主題

🛠 技術架構

前端: Next.js 15, React 19, TypeScript
UI 框架: Tailwind CSS, Radix UI
資料庫: MySQL 8.0+
圖表: Recharts
表單: React Hook Form + Zod
狀態管理: React Hooks

📋 系統需求

Node.js 18+
MySQL 8.0+
pnpm (推薦) 或 npm

🚀 快速開始

1. 克隆專案

git clone <repository-url>
cd executive-performance-dashboard

2. 安裝依賴

pnpm install

3. 環境設定

創建 .env.local 檔案：

# MySQL 資料庫設定
DB_HOST=mysql.theaken.com
DB_PORT=33306
DB_DATABASE=db_A022
DB_USERNAME=A022
DB_PASSWORD=NNyTXRWWtP4b

# Next.js 設定
NEXT_PUBLIC_APP_URL=http://localhost:3006

4. 初始化資料庫

# 測試資料庫連接
pnpm db:test

# 初始化資料庫結構和測試數據
pnpm db:init

5. 啟動開發伺服器

pnpm dev

訪問 http://localhost:3006 查看應用程式。

📊 資料庫結構

主要資料表

users: 用戶資訊和角色管理
kpi: 關鍵績效指標定義
kpi_progress: KPI 進度追蹤記錄
reviews: 績效評審安排
reports: 報告生成記錄

資料關係

users (1) ←→ (N) kpi
kpi (1) ←→ (N) kpi_progress
users (1) ←→ (N) reviews (作為 reviewer)
users (1) ←→ (N) reviews (作為 reviewee)

🔧 API 端點

KPI 管理

GET /api/kpi - 獲取 KPI 列表
POST /api/kpi - 創建新 KPI
PUT /api/kpi/[id] - 更新 KPI
DELETE /api/kpi/[id] - 刪除 KPI
POST /api/kpi/[id]/progress - 更新 KPI 進度

用戶管理

GET /api/users - 獲取用戶列表
POST /api/users - 創建新用戶

評審管理

GET /api/reviews - 獲取評審列表
POST /api/reviews - 創建新評審

系統管理

GET /api/database/test - 測試資料庫連接

📁 專案結構

executive-performance-dashboard/
├── app/                    # Next.js App Router
│   ├── api/               # API 路由
│   ├── kpi/               # KPI 管理頁面
│   ├── progress/          # 進度追蹤頁面
│   ├── reports/           # 報告頁面
│   ├── reviews/           # 評審頁面
│   └── admin/             # 管理員頁面
├── components/            # React 組件
│   ├── ui/               # 基礎 UI 組件
│   └── navigation.tsx    # 導航組件
├── lib/                  # 工具函數
│   ├── database.ts       # 資料庫連接和服務
│   └── utils.ts          # 通用工具函數
├── scripts/              # 腳本檔案
│   ├── create-database-schema.sql  # 資料庫結構
│   ├── init-database.js  # 初始化腳本
│   └── test-db-connection.js # 連接測試
└── public/               # 靜態資源

🎯 使用指南

管理員功能

用戶管理: 在管理員頁面新增、編輯、刪除用戶
KPI 審核: 審核和批准 KPI 設定
系統監控: 查看系統使用統計和報告

經理功能

KPI 設定: 為團隊成員設定 KPI
進度追蹤: 定期更新 KPI 進度
評審安排: 安排績效評審會議

員工功能

進度更新: 更新個人 KPI 進度
評審參與: 參與績效評審
報告查看: 查看個人績效報告

🔒 安全性

所有資料庫查詢使用參數化查詢防止 SQL 注入
環境變數管理敏感資訊
API 端點包含錯誤處理和驗證

🧪 測試

# 測試資料庫連接
pnpm db:test

# 運行 lint 檢查
pnpm lint

# 建置專案
pnpm build

📈 部署

生產環境部署

設定生產環境變數
建置專案: pnpm build
啟動生產伺服器: pnpm start

Docker 部署

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3006
CMD ["npm", "start"]

🤝 貢獻

Fork 專案
創建功能分支 (git checkout -b feature/AmazingFeature)
提交變更 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
開啟 Pull Request

📄 授權

本專案採用 MIT 授權 - 查看 LICENSE 檔案了解詳情。

📞 支援

如有問題或建議，請開啟 Issue 或聯繫開發團隊。

開發團隊 - 執行管理績效儀表板專案組

4.9 KiB Raw Blame History Unescape Escape