# 採購單列表頁面改版文件

## 📋 改版目標

1. 改善採購單列表的資訊層級與可讀性
2. 使用者能快速辨識每張採購單的來源（由誰發起，以及從哪個單位發出）
3. 僅在合約允許的範圍內做 UI 調整，不擴充額外功能
4. 保留既有的建立採購單、搜尋、篩選、驗收等功能

## ✅ 完成的改版項目

### 1. 新增必要欄位（業務需求）

#### 申請人（採購人）
- **顯示內容**: 採購單建立者的姓名
- **資料來源**: `PurchaseOrder.createdBy`
- **顯示位置**: 與申請單位合併顯示於「申請資訊」欄位
- **用途**: 辨識責任歸屬、快速找到聯絡人

#### 申請單位（來源單位）
- **顯示內容**: 發起採購的部門/門市（總店、A 店、B 店等）
- **資料來源**: `PurchaseOrder.department`
- **顯示位置**: 與申請人合併顯示於「申請資訊」欄位
- **用途**: 判斷採購流程流向（由誰驗收、要送去哪裡）

#### 建立日期
- **顯示內容**: 採購單建立的日期
- **資料來源**: `PurchaseOrder.createdAt`
- **顯示位置**: 獨立欄位，位於廠商與預計到貨日之間
- **用途**: 催貨、追進度

### 2. 欄位排序優化

新的欄位順序（左至右）：
1. **採購單編號** - 帶複製按鈕，方便複製分享
2. **申請資訊** - 顯示「申請單位」與「申請人」
3. **廠商** - 供應商名稱
4. **建立日期** - 採購單建立時間
5. **預計到貨日** - 預期到貨時間
6. **總金額** - 右對齊，易於比較
7. **狀態** - 使用彩色徽章
8. **操作** - 驗收/編輯/取消按鈕

### 3. 視覺優化

#### 狀態顯示樣式
所有狀態統一使用灰色線框徽章（outline variant），不以顏色做區分：

- **待寄出**
- **待發貨**
- **運送中**
- **已到貨（待驗收）**
- **已完成**
- **已取消**

保持一致的視覺風格，讓使用者專注於狀態文字本身。

#### 操作按鈕視覺層級

**主要動作（驗收）**
- 使用實心按鈕 `button-filled-primary`
- 僅在「已到貨（待驗收）」狀態顯示
- 包含圖示 + 文字

**次要動作（編輯）**
- 使用線框按鈕 `button-outlined-primary`
- 僅顯示圖示（節省空間）
- 包含 tooltip 說明

**高風險動作（取消）**
- 使用紅色線框按鈕
- 明確的紅色邊框和文字
- hover 時加強視覺效果

### 4. 使用者體驗優化

#### 複製採購單編號功能
- 點擊採購單編號旁的複製按鈕
- 自動複製到剪貼簿
- 顯示成功提示訊息
- 按鈕圖示從「複製」變為「打勾」2 秒

#### 搜尋提示優化
- **舊**: "搜尋採購單編號或廠商..."
- **新**: "搜尋採購單編號 / 廠商名稱"
- 更明確的斜線分隔，清楚說明可搜尋內容

#### 申請資訊顯示
採用雙行顯示，節省水平空間：
```
總店              ← 申請單位（較大、粗體）
王小華            ← 申請人（較小、灰色）
```

#### 採購單編號顯示
- 使用 `font-mono` 等寬字體
- 易於閱讀和比對
- 搭配複製按鈕

## 📊 資料結構更新

### PurchaseOrder 型別新增欄位

```typescript
export interface PurchaseOrder {
  // ... 既有欄位
  createdBy: string;      // 申請人（採購人）
  department: string;     // 申請單位
}
```

### Mock 資料範例

```typescript
{
  id: "po-1",
  poNumber: "PO202411001",
  supplierId: "sup-1",
  supplierName: "美食材料供應商",
  expectedDate: "2024-11-25",
  status: "arrived",
  createdBy: "王小華",        // 新增
  department: "總店",         // 新增
  items: [...],
  totalAmount: 3300,
  createdAt: "2024-11-18",
}
```

## 🎨 UI 元件更新

### 新增元件

1. **CopyButton** (`/components/shared/CopyButton.tsx`)
   - 通用複製按鈕元件
   - 支援複製任意文字
   - 包含視覺回饋（圖示切換、Toast 提示）

### 更新元件

1. **StatusBadge** (`/components/shared/StatusBadge.tsx`)
   - 支援新的顏色系統
   - 動態顯示背景色、文字色、邊框色

2. **PurchaseOrderTable** (`/components/PurchaseOrderTable.tsx`)
   - 調整欄位順序和寬度
   - 新增申請資訊欄位
   - 整合 CopyButton
   - 優化表格佈局

3. **PurchaseOrderActions** (`/components/purchase-order/PurchaseOrderActions.tsx`)
   - 調整按鈕視覺層級
   - 取消按鈕使用紅色強調
   - 新增 tooltip 說明

4. **PurchaseOrderFilters** (`/components/purchase-order/PurchaseOrderFilters.tsx`)
   - 更新搜尋框 placeholder

## 🔄 資料流

### 建立採購單時
```
使用者填寫表單
    ↓
系統自動帶入:
  - createdBy: "系統使用者"（實際應從登入狀態取得）
  - department: "總店"（實際應從使用者資料取得）
    ↓
儲存至資料庫
```

### 列表顯示時
```
從資料庫讀取 PurchaseOrder[]
    ↓
表格顯示:
  - 申請資訊: department / createdBy
  - 建立日期: createdAt
  - 其他既有欄位
```

## 📝 實作注意事項

### 1. 使用者身分整合
目前使用預設值，實際部署時需要：
- 從登入系統取得當前使用者姓名
- 從使用者資料取得所屬單位
- 在建立採購單時自動填入

```typescript
// 實際應用時的範例
const currentUser = useAuth(); // 取得登入使用者
const newOrder = {
  // ...
  createdBy: currentUser.name,
  department: currentUser.department,
};
```

### 2. 表格寬度控制
各欄位寬度設定：
- 採購單編號: 140px
- 申請資訊: 180px（雙行顯示）
- 廠商: 160px
- 建立日期: 110px
- 預計到貨日: 110px
- 總金額: 110px
- 狀態: 140px
- 操作: 自動

### 3. 響應式設計
- 使用 `overflow-x-auto` 支援水平捲動
- 在小螢幕上保持完整功能
- 建議最小寬度: 1200px

### 4. 暗色模式支援
所有顏色都包含 `dark:` 變體：
- 文字顏色
- 背景顏色
- 邊框顏色

## ✨ 改版效益

### 資訊完整性
- ✅ 清楚知道採購單來源
- ✅ 快速辨識責任歸屬
- ✅ 方便追蹤進度

### 使用者體驗
- ✅ 一鍵複製採購單編號
- ✅ 視覺層級更清晰
- ✅ 狀態一目了然

### 操作效率
- ✅ 減少點擊次數
- ✅ 重要動作突出
- ✅ 危險操作有警示

### 可維護性
- ✅ 資料結構完整
- ✅ 元件化設計
- ✅ 易於擴充

## 🚫 未包含的功能（避免超出範圍）

- ❌ 採購單 KPI
- ❌ 異常分析
- ❌ 批次、效期資料
- ❌ 自動催貨機制
- ❌ 寄出通知提醒
- ❌ 採購單歷史比較
- ❌ 供應商評分系統
- ❌ 進階追蹤與報表

## 🎯 總結

此次改版專注於**必要的資訊補充**和**使用者體驗優化**，所有調整均在合約範圍內，未增加額外功能。透過新增申請人、申請單位、建立日期等欄位，以及優化視覺呈現和操作體驗，大幅提升了採購單列表的可用性和資訊完整性。