feat(inventory): 新增庫存分析模組

- 實作 InventoryAnalysisController 與 TurnoverService
- 新增庫存分析前端頁面 (Inventory/Analysis/Index.tsx)
- 整合路由與選單
- 統一分頁邏輯與狀態顯示
- 更新 UI Consistency Skill 文件

.agent/skills/ui-consistency/SKILL.md

@@ -569,6 +569,7 @@ const handlePerPageChange = (value: string) => {
 
 ---
 
+
 ## 7. Badge 與狀態顯示
 
 ### 7.1 基本 Badge
@@ -614,6 +615,48 @@ import { Badge } from "@/Components/ui/badge";
 </div>
 ```
 
+### 7.3 統一狀態標籤 (StatusBadge)
+
+系統提供統一的 `StatusBadge` 元件來顯示各種業務狀態，確保顏色與樣式的一致性。
+
+**引入方式**：
+
+```tsx
+import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
+```
+
+**支援的變體 (Variant)**：
+
+| Variant | 顏色 | 適用情境 |
+|---|---|---|
+| `neutral` | 灰色 | 草稿、取消、關閉、缺貨 |
+| `info` | 藍色 | 處理中、啟用中 |
+| `warning` | 黃色 | 待審核、庫存預警、週轉慢 |
+| `success` | 綠色 | 已完成、已核准、正常 |
+| `destructive` | 紅色 | 作廢、駁回、滯銷、異常 |
+
+**實作模式**：
+
+建議定義一個 `getStatusVariant` 函式將業務狀態對應到 UI 變體，保持程式碼整潔。
+
+```tsx
+// 1. 定義狀態映射函式
+const getStatusVariant = (status: string): StatusVariant => {
+    switch (status) {
+        case 'normal': return 'success';      // 正常 -> 綠色
+        case 'slow': return 'warning';        // 週轉慢 -> 黃色
+        case 'dead': return 'destructive';    // 滯銷 -> 紅色
+        case 'out_of_stock': return 'neutral';// 缺貨 -> 灰色
+        default: return 'neutral';
+    }
+};
+
+// 2. 在表格中使用
+<StatusBadge variant={getStatusVariant(item.status)}>
+    {item.status_label}
+</StatusBadge>
+```
+
 ---
 
 ## 8. 頁面佈局規範