# 授權 強茂 使用
# 執行管理績效儀表板

一個現代化的執行管理績效儀表板系統，使用 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. 克隆專案

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

### 2. 安裝依賴

```bash
pnpm install
```

### 3. 環境設定

創建 `.env.local` 檔案：

```env
# 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. 初始化資料庫

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

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

### 5. 啟動開發伺服器

```bash
pnpm dev
```

訪問 [http://localhost:3006](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/               # 靜態資源
```

## 🎯 使用指南

### 管理員功能

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

### 經理功能

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

### 員工功能

1. **進度更新**: 更新個人 KPI 進度
2. **評審參與**: 參與績效評審
3. **報告查看**: 查看個人績效報告

## 🔒 安全性

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

## 🧪 測試

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

# 運行 lint 檢查
pnpm lint

# 建置專案
pnpm build
```

## 📈 部署

### 生產環境部署

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

### Docker 部署

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

## 🤝 貢獻

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

## 📄 授權

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

## 📞 支援

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

---

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