feat(qc-gate): add QC-GATE real-time LOT status report as first pure Vue 3 + Vite page

Introduce QC-GATE station monitoring with stacked bar chart and filterable LOT table,
using Vue 3 SFC + ECharts via npm. Establishes the pure Vite page architecture pattern
(no Jinja2) for future page migration. Also removes stale design files and README.mdj.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.mdj

@@ -1,153 +0,0 @@
-# MES Dashboard（README.mdj）
-
-本文件為 `README.md` 的精簡技術同步版，聚焦目前可運行架構與運維契約。
-
-## 1. 架構摘要（2026-02-08）
-
-- 後端：Flask + Gunicorn（單一 port）
-- 前端：Vite build 輸出到 `src/mes_dashboard/static/dist`
-- 快取：Redis + process-level cache + indexed selection telemetry
-- 資料：Oracle（QueuePool）
-- 運維：watchdog + admin worker restart API + guarded-mode policy
-- 環境設定：開發與正式環境統一使用專案根目錄同一份 `.env`
-- 啟動腳本：`./scripts/start_server.sh start` 會同時啟動 Gunicorn 與 `worker_watchdog.py`
-
-## 2. 既有設計原則（保留）
-
-- `resource`（設備基礎資料）與 `wip`（線上即時狀況）維持全表快取策略。
-- 前端頁面邏輯與 drill-down 操作語意維持不變。
-- 系統維持單一 port 服務模式（前後端同源）。
-
-## 3. P0 Runtime Hardening（已完成）
-
-- Production 強制 `SECRET_KEY`：未設定或使用不安全預設值時，啟動直接失敗。
-- CSRF 防護：
-  - `/admin/login` 表單需 token
-  - `/admin/api/*` 的 `POST/PUT/PATCH/DELETE` 需 `X-CSRF-Token`
-- Session hardening：登入成功後 `session.clear()` + CSRF token rotation。
-- Health probe isolation：`/health` DB 連通檢查使用獨立 health pool。
-- Shutdown cleanup：統一停止 cache updater、equipment sync worker，並關閉 Redis 與 DB engine。
-- XSS hardening：`hold_detail` fallback script 的 `reason` 改用 `tojson`。
-
-## 4. P1 Cache/Query Efficiency（已完成）
-
-- `resource` / `wip` 仍維持全表快取策略（業務約束不變）。
-- WIP 查詢改走 indexed selection，並加入增量同步（watermark/version）與 drift fallback。
-- `/health`、`/health/deep`、`/admin/api/system-status` 提供 cache memory amplification/index telemetry。
-- 新增 benchmark harness：`scripts/run_cache_benchmarks.py --enforce`。
-
-## 5. P2 Ops Self-Healing（已完成）
-
-- runtime contract 共用化：app/start_server/watchdog/systemd 使用同一組 watchdog/conda 路徑契約。
-- 啟動 fail-fast：conda/runtime path drift 時拒絕啟動並輸出可操作診斷。
-- worker restart policy：cooldown + retry budget + churn guarded mode。
-- manual override：需 admin 身分 + `manual_override` + `override_acknowledged` + `override_reason`，且寫入 audit log。
-- health/admin payload 提供 policy state：`allowed` / `cooldown` / `blocked`。
-
-## 6. Round-3 Residual Hardening（已完成）
-
-- WIP cache publish 改為 staged publish，更新失敗不覆寫舊快照。
-- WIP process cache slow-path parse 移到鎖外，降低 lock contention。
-- realtime equipment process cache 補齊 bounded LRU（含 `EQUIPMENT_PROCESS_CACHE_MAX_SIZE`）。
-- `_clean_nan_values` 改為 depth-safe 迭代式清理（避免深層遞迴風險）。
-- WIP/Hold/Resource bool query parser 共用化（`core/utils.py`）。
-- filter cache source view 可由 env 覆寫（便於環境切換與測試）。
-- `/health`、`/health/deep` 增加 5 秒 memo（testing 模式自動關閉）。
-- 高成本 API 增加輕量 in-process rate limit，超限回傳一致 429 結構。
-- DB 連線字串記錄加上敏感欄位遮罩（密碼 redaction）。
-
-## 7. Round-4 Residual Consolidation（已完成）
-
-- Resource derived index 改為 row-position representation，不再在 process 內保存 full records 複本。
-- Resource / Realtime Equipment 共用 Oracle SQL fragments，避免查詢定義重複漂移。
-- `resource_cache` / `realtime_equipment_cache` 型別註記風格與高頻常數命名收斂。
-- `page_registry` 寫檔改為 atomic replace，降低設定檔半寫入風險。
-- 新增測試覆蓋 shared SQL fragment 與 bool parser 不重複定義治理。
-
-## 8. 重要環境變數
-
-```bash
-FLASK_ENV=production
-SECRET_KEY=<required-in-production>
-CSRF_ENABLED=true
-
-LDAP_API_URL=https://ldap-api.example.com
-LDAP_ALLOWED_HOSTS=ldap-api.example.com,ldap-api-dr.example.com
-
-DB_POOL_SIZE=10
-DB_MAX_OVERFLOW=20
-DB_POOL_TIMEOUT=30
-DB_POOL_RECYCLE=1800
-DB_CALL_TIMEOUT_MS=55000
-DB_POOL_EXHAUSTED_RETRY_AFTER_SECONDS=5
-
-DB_HEALTH_POOL_SIZE=1
-DB_HEALTH_MAX_OVERFLOW=0
-DB_HEALTH_POOL_TIMEOUT=2
-
-CONDA_BIN=/opt/miniconda3/bin/conda
-CONDA_ENV_NAME=mes-dashboard
-RUNTIME_CONTRACT_VERSION=2026.02-p2
-RUNTIME_CONTRACT_ENFORCE=true
-
-WATCHDOG_RUNTIME_DIR=./tmp
-WATCHDOG_RESTART_FLAG=./tmp/mes_dashboard_restart.flag
-WATCHDOG_PID_FILE=./tmp/gunicorn.pid
-WATCHDOG_STATE_FILE=./tmp/mes_dashboard_restart_state.json
-WATCHDOG_RESTART_HISTORY_MAX=50
-
-WORKER_RESTART_COOLDOWN=60
-WORKER_RESTART_RETRY_BUDGET=3
-WORKER_RESTART_WINDOW_SECONDS=600
-WORKER_RESTART_CHURN_THRESHOLD=3
-WORKER_GUARDED_MODE_ENABLED=true
-
-PROCESS_CACHE_MAX_SIZE=32
-WIP_PROCESS_CACHE_MAX_SIZE=32
-RESOURCE_PROCESS_CACHE_MAX_SIZE=32
-EQUIPMENT_PROCESS_CACHE_MAX_SIZE=32
-
-FILTER_CACHE_WIP_VIEW=DWH.DW_MES_LOT_V
-FILTER_CACHE_SPEC_WORKCENTER_VIEW=DWH.DW_MES_SPEC_WORKCENTER_V
-
-HEALTH_MEMO_TTL_SECONDS=5
-
-WIP_MATRIX_RATE_LIMIT_MAX_REQUESTS=120
-WIP_MATRIX_RATE_LIMIT_WINDOW_SECONDS=60
-WIP_DETAIL_RATE_LIMIT_MAX_REQUESTS=90
-WIP_DETAIL_RATE_LIMIT_WINDOW_SECONDS=60
-HOLD_LOTS_RATE_LIMIT_MAX_REQUESTS=90
-HOLD_LOTS_RATE_LIMIT_WINDOW_SECONDS=60
-RESOURCE_DETAIL_RATE_LIMIT_MAX_REQUESTS=60
-RESOURCE_DETAIL_RATE_LIMIT_WINDOW_SECONDS=60
-RESOURCE_STATUS_RATE_LIMIT_MAX_REQUESTS=90
-RESOURCE_STATUS_RATE_LIMIT_WINDOW_SECONDS=60
-```
-
-## 9. 驗證命令（建議）
-
-```bash
-# 後端（conda）
-conda run -n mes-dashboard python -m pytest -q tests/test_runtime_hardening.py
-
-# 前端
-npm --prefix frontend test
-npm --prefix frontend run build
-
-# P1 benchmark gate
-conda run -n mes-dashboard python scripts/run_cache_benchmarks.py --enforce
-
-# P2 runtime contract check
-RUNTIME_CONTRACT_ENFORCE=true ./scripts/start_server.sh check
-```
-
-## 10. 開發歷史（Vite 專案）
-
-- 2026-02-07：完成 Vite 根目錄重構與舊版切除。
-- 2026-02-08：完成 resilience 診斷治理與前端共用模組化。
-- 2026-02-08：完成 P0 安全/穩定性硬化（本次更新）。
-- 2026-02-08：完成 P1 快取查詢效率重構（index + benchmark gate）。
-- 2026-02-08：完成 P2 運維自癒治理（guarded mode + manual override + runtime contract）。
-- 2026-02-08：完成 round-2 hardening（LDAP URL 驗證、bounded LRU cache、circuit breaker 鎖外日誌、安全標頭、分頁邊界）。
-- 2026-02-08：完成 round-3 residual hardening（staged publish、health memo、API rate limit、DB redaction、filter view env 化）。
-- 2026-02-08：完成 round-4 residual consolidation（resource index 表示正規化、shared SQL fragments、型別與常數治理、atomic page status 寫入）。

data/page_status.json

@@ -29,6 +29,13 @@
       "drawer_id": "reports",
       "order": 3
     },
+    {
+      "route": "/qc-gate",
+      "name": "QC-GATE 狀態",
+      "status": "released",
+      "drawer_id": "reports",
+      "order": 4
+    },
     {
       "route": "/tables",
       "name": "表格總覽",
@@ -113,4 +120,4 @@
       "admin_only": true
     }
   ]
-}
+}

frontend/package-lock.json

@@ -7,10 +7,62 @@
     "": {
       "name": "mes-dashboard-frontend",
       "version": "0.1.0",
+      "dependencies": {
+        "@vitejs/plugin-vue": "^6.0.4",
+        "echarts": "^6.0.0",
+        "vue": "^3.5.27",
+        "vue-echarts": "^8.0.1"
+      },
       "devDependencies": {
         "vite": "^6.3.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -18,7 +70,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -35,7 +86,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -52,7 +102,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -69,7 +118,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -86,7 +134,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -103,7 +150,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -120,7 +166,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -137,7 +182,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -154,7 +198,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -171,7 +214,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -188,7 +230,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -205,7 +246,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -222,7 +262,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -239,7 +278,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -256,7 +294,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -273,7 +310,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -290,7 +326,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -307,7 +342,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -324,7 +358,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -341,7 +374,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -358,7 +390,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -375,7 +406,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -392,7 +422,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -409,7 +438,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -426,7 +454,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -443,7 +470,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -453,6 +479,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
@@ -460,7 +498,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -474,7 +511,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -488,7 +524,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -502,7 +537,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -516,7 +550,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -530,7 +563,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -544,7 +576,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -558,7 +589,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -572,7 +602,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -586,7 +615,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,7 +628,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -614,7 +641,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -628,7 +654,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -642,7 +667,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -656,7 +680,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -670,7 +693,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -684,7 +706,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -698,7 +719,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -712,7 +732,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -726,7 +745,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -740,7 +758,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -754,7 +771,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -768,7 +784,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -782,7 +797,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -796,7 +810,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -807,14 +820,156 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
+      "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
+      "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.27",
+        "entities": "^7.0.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
+      "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.27",
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
+      "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.27",
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/compiler-ssr": "3.5.27",
+        "@vue/shared": "3.5.27",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
+      "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
+      "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
+      "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.27",
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
+      "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.27",
+        "@vue/runtime-core": "3.5.27",
+        "@vue/shared": "3.5.27",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
+      "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.27",
+        "@vue/shared": "3.5.27"
+      },
+      "peerDependencies": {
+        "vue": "3.5.27"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
+      "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
       "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -852,11 +1007,16 @@
         "@esbuild/win32-x64": "0.25.12"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -874,7 +1034,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -885,11 +1044,19 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -908,16 +1075,13 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -929,7 +1093,6 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -958,7 +1121,6 @@
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -1003,7 +1165,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -1013,7 +1174,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -1026,11 +1186,16 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/vite": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -1100,6 +1265,46 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
+      "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/compiler-sfc": "3.5.27",
+        "@vue/runtime-dom": "3.5.27",
+        "@vue/server-renderer": "3.5.27",
+        "@vue/shared": "3.5.27"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-8.0.1.tgz",
+      "integrity": "sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "echarts": "^6.0.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

frontend/package.json

@@ -5,10 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "build": "vite build",
+    "build": "vite build && cp ../src/mes_dashboard/static/dist/src/qc-gate/index.html ../src/mes_dashboard/static/dist/qc-gate.html",
     "test": "node --test tests/*.test.js"
   },
   "devDependencies": {
     "vite": "^6.3.0"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "echarts": "^6.0.0",
+    "vue": "^3.5.27",
+    "vue-echarts": "^8.0.1"
   }
 }

frontend/src/qc-gate/App.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import QcGateChart from './components/QcGateChart.vue';
+import LotTable from './components/LotTable.vue';
+import { useQcGateData } from './composables/useQcGateData.js';
+
+const {
+  stations,
+  cacheTime,
+  loading,
+  refreshing,
+  errorMessage,
+  allLots,
+  refreshNow,
+} = useQcGateData();
+
+const activeFilter = ref(null);
+
+const BUCKET_LABELS = {
+  lt_6h: '<6hr',
+  '6h_12h': '6-12hr',
+  '12h_24h': '12-24hr',
+  gt_24h: '>24hr',
+};
+
+const hasStations = computed(() => stations.value.length > 0);
+
+const totalLots = computed(() => {
+  return stations.value.reduce((sum, station) => sum + Number(station.total || 0), 0);
+});
+
+const filteredLots = computed(() => {
+  if (!activeFilter.value) {
+    return allLots.value;
+  }
+
+  return allLots.value.filter((lot) => {
+    return (
+      lot.step === activeFilter.value.station &&
+      lot.bucket === activeFilter.value.bucket
+    );
+  });
+});
+
+const formattedCacheTime = computed(() => {
+  if (!cacheTime.value) {
+    return '--';
+  }
+
+  const date = new Date(cacheTime.value);
+  if (Number.isNaN(date.getTime())) {
+    return String(cacheTime.value);
+  }
+
+  return date.toLocaleString('zh-TW', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+});
+
+const activeFilterLabel = computed(() => {
+  if (!activeFilter.value) {
+    return '';
+  }
+
+  const bucketLabel = BUCKET_LABELS[activeFilter.value.bucket] || activeFilter.value.bucket;
+  return `${activeFilter.value.station} / ${bucketLabel}`;
+});
+
+function handleChartSelect(filter) {
+  if (!filter?.station || !filter?.bucket) {
+    return;
+  }
+
+  if (
+    activeFilter.value &&
+    activeFilter.value.station === filter.station &&
+    activeFilter.value.bucket === filter.bucket
+  ) {
+    activeFilter.value = null;
+    return;
+  }
+
+  activeFilter.value = filter;
+}
+
+function clearFilter() {
+  activeFilter.value = null;
+}
+
+function handleManualRefresh() {
+  void refreshNow();
+}
+</script>
+
+<template>
+  <div class="qc-gate-page">
+    <header class="qc-gate-header">
+      <div>
+        <h1>QC-GATE 狀態</h1>
+        <p class="header-subtitle">即時監控各 QC-GATE 站點的在製 LOT 與等待時間</p>
+      </div>
+      <div class="header-meta">
+        <div class="meta-row">
+          <span class="meta-label">快照時間</span>
+          <span class="meta-value">{{ formattedCacheTime }}</span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">總 LOT</span>
+          <span class="meta-value">{{ totalLots.toLocaleString('zh-TW') }}</span>
+        </div>
+        <button
+          type="button"
+          class="refresh-button"
+          :disabled="loading || refreshing"
+          @click="handleManualRefresh"
+        >
+          {{ refreshing ? '更新中...' : '重新整理' }}
+        </button>
+      </div>
+    </header>
+
+    <div v-if="errorMessage" class="error-banner">{{ errorMessage }}</div>
+
+    <main class="qc-gate-content">
+      <section class="panel chart-panel">
+        <div class="panel-header">
+          <h2>站點等待時間分布</h2>
+          <span class="panel-hint">點擊圖表區段可篩選下方 LOT 清單</span>
+        </div>
+
+        <div v-if="loading" class="loading-state">資料載入中...</div>
+
+        <template v-else>
+          <QcGateChart
+            :stations="stations"
+            :active-filter="activeFilter"
+            @select-segment="handleChartSelect"
+          />
+          <div v-if="!hasStations" class="empty-state">目前無 QC-GATE LOT</div>
+        </template>
+      </section>
+
+      <section class="panel table-panel">
+        <div class="panel-header">
+          <h2>LOT 明細</h2>
+          <button
+            v-if="activeFilter"
+            type="button"
+            class="filter-indicator"
+            @click="clearFilter"
+          >
+            篩選中：{{ activeFilterLabel }}（點擊清除）
+          </button>
+        </div>
+
+        <LotTable
+          :lots="filteredLots"
+          :active-filter="activeFilter"
+          @clear-filter="clearFilter"
+        />
+      </section>
+    </main>
+  </div>
+</template>

frontend/src/qc-gate/components/LotTable.vue

@@ -0,0 +1,176 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  lots: {
+    type: Array,
+    default: () => [],
+  },
+  activeFilter: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['clear-filter']);
+
+const sortKey = ref('wait_hours');
+const sortDirection = ref('desc');
+
+const BUCKET_LABELS = {
+  lt_6h: '<6hr',
+  '6h_12h': '6-12hr',
+  '12h_24h': '12-24hr',
+  gt_24h: '>24hr',
+};
+
+const HEADERS = [
+  { key: 'lot_id', label: 'LOT ID' },
+  { key: 'product', label: 'Product' },
+  { key: 'qty', label: 'QTY' },
+  { key: 'step', label: '站點' },
+  { key: 'workorder', label: 'Workorder' },
+  { key: 'move_in_time', label: 'Move In' },
+  { key: 'wait_hours', label: 'Wait (hr)' },
+  { key: 'bucket', label: '區間' },
+  { key: 'status', label: '狀態' },
+];
+
+function normalizeForSort(value, key) {
+  if (key === 'qty' || key === 'wait_hours') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  if (value == null) {
+    return '';
+  }
+  return String(value).toUpperCase();
+}
+
+function toggleSort(key) {
+  if (sortKey.value === key) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
+    return;
+  }
+  sortKey.value = key;
+  sortDirection.value = key === 'wait_hours' ? 'desc' : 'asc';
+}
+
+const sortedLots = computed(() => {
+  const rows = Array.isArray(props.lots) ? [...props.lots] : [];
+  const direction = sortDirection.value === 'asc' ? 1 : -1;
+  const key = sortKey.value;
+
+  rows.sort((left, right) => {
+    const leftValue = normalizeForSort(left?.[key], key);
+    const rightValue = normalizeForSort(right?.[key], key);
+    if (leftValue < rightValue) return -1 * direction;
+    if (leftValue > rightValue) return 1 * direction;
+    return 0;
+  });
+
+  return rows;
+});
+
+function formatValue(value, fallback = '-') {
+  if (value == null || value === '') {
+    return fallback;
+  }
+  return String(value);
+}
+
+function formatQty(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return '-';
+  }
+  return parsed.toLocaleString('zh-TW');
+}
+
+function formatWait(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return '-';
+  }
+  return parsed.toFixed(1);
+}
+
+function formatTime(value) {
+  if (!value) {
+    return '-';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+  return date.toLocaleString('zh-TW', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function bucketLabel(value) {
+  return BUCKET_LABELS[value] || value || '-';
+}
+
+function bucketClass(value) {
+  return `bucket-${String(value || '').replace(/[^a-z0-9]+/gi, '-')}`;
+}
+
+function currentSortLabel(columnKey) {
+  if (sortKey.value !== columnKey) {
+    return '';
+  }
+  return sortDirection.value === 'asc' ? '▲' : '▼';
+}
+</script>
+
+<template>
+  <div class="lot-table-wrap">
+    <div v-if="activeFilter" class="filter-chip" @click="emit('clear-filter')">
+      已套用圖表篩選，點擊清除
+    </div>
+
+    <div class="lot-table-scroll">
+      <table class="lot-table">
+        <thead>
+          <tr>
+            <th v-for="header in HEADERS" :key="header.key">
+              <button
+                type="button"
+                class="sort-button"
+                @click="toggleSort(header.key)"
+              >
+                {{ header.label }}
+                <span class="sort-indicator">{{ currentSortLabel(header.key) }}</span>
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="lot in sortedLots" :key="`${lot.lot_id}-${lot.step}-${lot.move_in_time}`">
+            <td>{{ formatValue(lot.lot_id) }}</td>
+            <td>{{ formatValue(lot.product) }}</td>
+            <td class="cell-number">{{ formatQty(lot.qty) }}</td>
+            <td>{{ formatValue(lot.step) }}</td>
+            <td>{{ formatValue(lot.workorder) }}</td>
+            <td>{{ formatTime(lot.move_in_time) }}</td>
+            <td class="cell-number">{{ formatWait(lot.wait_hours) }}</td>
+            <td>
+              <span class="bucket-pill" :class="bucketClass(lot.bucket)">
+                {{ bucketLabel(lot.bucket) }}
+              </span>
+            </td>
+            <td>{{ formatValue(lot.status) }}</td>
+          </tr>
+          <tr v-if="sortedLots.length === 0">
+            <td class="table-empty" :colspan="HEADERS.length">目前無符合條件的 LOT</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

frontend/src/qc-gate/components/QcGateChart.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { computed } from 'vue';
+import VChart from 'vue-echarts';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+
+use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent]);
+
+const props = defineProps({
+  stations: {
+    type: Array,
+    default: () => [],
+  },
+  activeFilter: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['select-segment']);
+
+const BUCKETS = [
+  { key: 'lt_6h', label: '<6hr', color: '#22c55e' },
+  { key: '6h_12h', label: '6-12hr', color: '#facc15' },
+  { key: '12h_24h', label: '12-24hr', color: '#fb923c' },
+  { key: 'gt_24h', label: '>24hr', color: '#ef4444' },
+];
+
+function isSelected(stationName, bucketKey) {
+  return (
+    props.activeFilter &&
+    props.activeFilter.station === stationName &&
+    props.activeFilter.bucket === bucketKey
+  );
+}
+
+function hasActiveFilter() {
+  return Boolean(props.activeFilter?.station && props.activeFilter?.bucket);
+}
+
+const chartOption = computed(() => {
+  const stationNames = props.stations.map((station) => station.specname);
+
+  return {
+    animationDuration: 350,
+    animationDurationUpdate: 300,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+    },
+    legend: {
+      top: 4,
+      icon: 'roundRect',
+      itemHeight: 10,
+      textStyle: {
+        color: '#334155',
+      },
+    },
+    grid: {
+      left: 24,
+      right: 16,
+      bottom: 18,
+      top: 46,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: stationNames,
+      axisLabel: {
+        color: '#334155',
+        fontSize: 11,
+        interval: 0,
+        rotate: stationNames.length > 8 ? 30 : 0,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#cbd5e1',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: 'LOT 數',
+      nameTextStyle: {
+        color: '#64748b',
+        padding: [0, 16, 0, 0],
+      },
+      axisLabel: {
+        color: '#475569',
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#e2e8f0',
+          type: 'dashed',
+        },
+      },
+    },
+    series: BUCKETS.map((bucket) => ({
+      id: bucket.key,
+      name: bucket.label,
+      type: 'bar',
+      stack: 'lots',
+      color: bucket.color,
+      barMaxWidth: 40,
+      emphasis: {
+        focus: 'series',
+      },
+      data: props.stations.map((station) => {
+        const count = Number(station?.buckets?.[bucket.key] || 0);
+        const opacity = hasActiveFilter() && !isSelected(station.specname, bucket.key) ? 0.25 : 1;
+        return {
+          value: count,
+          itemStyle: { opacity },
+        };
+      }),
+      itemStyle: {
+        borderColor: '#ffffff',
+        borderWidth: 1,
+      },
+    })),
+  };
+});
+
+function handleChartClick(params) {
+  if (!params?.name || !params?.seriesId) {
+    return;
+  }
+  emit('select-segment', {
+    station: String(params.name),
+    bucket: String(params.seriesId),
+  });
+}
+</script>
+
+<template>
+  <div class="qc-gate-chart">
+    <VChart
+      v-if="stations.length"
+      class="chart-canvas"
+      :option="chartOption"
+      autoresize
+      @click="handleChartClick"
+    />
+  </div>
+</template>

frontend/src/qc-gate/composables/useQcGateData.js

@@ -0,0 +1,167 @@
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { apiGet } from '../../core/api.js';
+
+const REFRESH_INTERVAL_MS = 10 * 60 * 1000;
+const API_TIMEOUT_MS = 60000;
+const BUCKET_KEYS = ['lt_6h', '6h_12h', '12h_24h', 'gt_24h'];
+
+function normalizeBuckets(rawBuckets) {
+  const buckets = {};
+  for (const key of BUCKET_KEYS) {
+    const value = Number(rawBuckets?.[key]);
+    buckets[key] = Number.isFinite(value) ? value : 0;
+  }
+  return buckets;
+}
+
+function normalizeStation(rawStation) {
+  const lots = Array.isArray(rawStation?.lots) ? rawStation.lots : [];
+  return {
+    specname: String(rawStation?.specname ?? '').trim(),
+    spec_order: Number(rawStation?.spec_order ?? 999999),
+    buckets: normalizeBuckets(rawStation?.buckets),
+    total: Number(rawStation?.total ?? lots.length),
+    lots,
+  };
+}
+
+function normalizePayload(payload) {
+  const stations = Array.isArray(payload?.stations)
+    ? payload.stations.map(normalizeStation).filter((station) => station.specname)
+    : [];
+
+  return {
+    cache_time: payload?.cache_time ?? null,
+    stations,
+  };
+}
+
+function toComparableWaitHours(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export function useQcGateData() {
+  const stations = ref([]);
+  const cacheTime = ref(null);
+  const loading = ref(true);
+  const refreshing = ref(false);
+  const errorMessage = ref('');
+  const lastFetchedAt = ref(null);
+
+  let refreshTimer = null;
+  let currentRequest = null;
+
+  const allLots = computed(() => {
+    const merged = [];
+    for (const station of stations.value) {
+      const stationLots = Array.isArray(station.lots) ? station.lots : [];
+      merged.push(...stationLots);
+    }
+    return merged.sort(
+      (left, right) => toComparableWaitHours(right.wait_hours) - toComparableWaitHours(left.wait_hours)
+    );
+  });
+
+  const fetchData = async ({ background = false } = {}) => {
+    if (currentRequest) {
+      currentRequest.abort();
+    }
+
+    currentRequest = new AbortController();
+
+    if (background) {
+      refreshing.value = true;
+    } else {
+      loading.value = true;
+    }
+
+    errorMessage.value = '';
+
+    try {
+      const response = await apiGet('/api/qc-gate/summary', {
+        timeout: API_TIMEOUT_MS,
+        signal: currentRequest.signal,
+      });
+
+      const payload = response?.success ? response.data : response;
+      const normalized = normalizePayload(payload || {});
+
+      stations.value = normalized.stations;
+      cacheTime.value = normalized.cache_time;
+      lastFetchedAt.value = new Date();
+      return true;
+    } catch (error) {
+      if (error?.name === 'AbortError') {
+        return false;
+      }
+      errorMessage.value = error?.message || '載入 QC-GATE 資料失敗';
+      return false;
+    } finally {
+      loading.value = false;
+      refreshing.value = false;
+    }
+  };
+
+  const stopAutoRefresh = () => {
+    if (refreshTimer) {
+      clearInterval(refreshTimer);
+      refreshTimer = null;
+    }
+  };
+
+  const startAutoRefresh = () => {
+    stopAutoRefresh();
+    refreshTimer = setInterval(() => {
+      if (!document.hidden) {
+        void fetchData({ background: true });
+      }
+    }, REFRESH_INTERVAL_MS);
+  };
+
+  const resetAutoRefresh = () => {
+    startAutoRefresh();
+  };
+
+  const refreshNow = async () => {
+    resetAutoRefresh();
+    await fetchData({ background: true });
+  };
+
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      return;
+    }
+    void fetchData({ background: true });
+    resetAutoRefresh();
+  };
+
+  onMounted(() => {
+    void fetchData({ background: false });
+    startAutoRefresh();
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+  });
+
+  onBeforeUnmount(() => {
+    stopAutoRefresh();
+    if (currentRequest) {
+      currentRequest.abort();
+      currentRequest = null;
+    }
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
+  });
+
+  return {
+    stations,
+    cacheTime,
+    loading,
+    refreshing,
+    errorMessage,
+    lastFetchedAt,
+    allLots,
+    fetchData,
+    refreshNow,
+    resetAutoRefresh,
+  };
+}

frontend/src/qc-gate/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-Hant">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QC-GATE 狀態</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

frontend/src/qc-gate/main.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');

frontend/src/qc-gate/style.css

@@ -0,0 +1,318 @@
+:root {
+  --bg: #f5f7fa;
+  --card-bg: #ffffff;
+  --text: #1f2937;
+  --muted: #64748b;
+  --border: #dbe3ef;
+  --header-from: #667eea;
+  --header-to: #764ba2;
+  --success: #22c55e;
+  --warning: #facc15;
+  --danger: #ef4444;
+  --shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
+  --shadow-strong: 0 6px 24px rgba(102, 126, 234, 0.24);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Microsoft JhengHei', Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.qc-gate-page {
+  min-height: 100vh;
+  padding: 20px;
+  max-width: 1900px;
+  margin: 0 auto;
+}
+
+.qc-gate-header {
+  background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
+  color: #ffffff;
+  border-radius: 12px;
+  box-shadow: var(--shadow-strong);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px 24px;
+  margin-bottom: 16px;
+}
+
+.qc-gate-header h1 {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.header-subtitle {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 140px;
+}
+
+.meta-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.76);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.meta-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.refresh-button {
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.16);
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.refresh-button:hover {
+  background: rgba(255, 255, 255, 0.26);
+}
+
+.refresh-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.error-banner {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(239, 68, 68, 0.25);
+  background: #fee2e2;
+  color: #991b1b;
+  font-size: 13px;
+}
+
+.qc-gate-content {
+  display: grid;
+  gap: 16px;
+}
+
+.panel {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+  background: #f8fafc;
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.panel-hint {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.chart-panel {
+  padding-bottom: 8px;
+}
+
+.qc-gate-chart {
+  min-height: 320px;
+  padding: 10px 14px 2px;
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 340px;
+}
+
+.filter-indicator {
+  border: 1px solid #93c5fd;
+  background: #dbeafe;
+  color: #1d4ed8;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.filter-indicator:hover {
+  background: #bfdbfe;
+}
+
+.lot-table-wrap {
+  padding: 12px 14px 16px;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 10px;
+  border: 1px solid #93c5fd;
+  background: #eff6ff;
+  color: #1e40af;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.filter-chip:hover {
+  background: #dbeafe;
+}
+
+.lot-table-scroll {
+  overflow: auto;
+  max-height: 520px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.lot-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 1280px;
+}
+
+.lot-table th,
+.lot-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid #e2e8f0;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.lot-table th {
+  background: #f1f5f9;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.sort-button {
+  border: none;
+  background: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sort-indicator {
+  color: #64748b;
+  font-size: 11px;
+  min-width: 10px;
+}
+
+.lot-table tbody tr:hover {
+  background: #f8fafc;
+}
+
+.cell-number {
+  text-align: right;
+}
+
+.table-empty {
+  text-align: center;
+  color: var(--muted);
+  padding: 24px 0;
+}
+
+.bucket-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+}
+
+.bucket-lt-6h {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.bucket-6h-12h {
+  background: #fef9c3;
+  color: #854d0e;
+}
+
+.bucket-12h-24h {
+  background: #ffedd5;
+  color: #9a3412;
+}
+
+.bucket-gt-24h {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+@media (max-width: 1100px) {
+  .qc-gate-page {
+    padding: 12px;
+  }
+
+  .qc-gate-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .header-meta {
+    justify-content: flex-start;
+  }
+
+  .chart-canvas {
+    height: 300px;
+  }
+}

frontend/vite.config.js

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'node:path';
+import vue from '@vitejs/plugin-vue';
 
 export default defineConfig(({ mode }) => ({
+  base: '/static/dist/',
+  plugins: [vue()],
   publicDir: false,
   build: {
     outDir: '../src/mes_dashboard/static/dist',
@@ -19,19 +22,31 @@ export default defineConfig(({ mode }) => ({
         'excel-query': resolve(__dirname, 'src/excel-query/main.js'),
         tables: resolve(__dirname, 'src/tables/main.js'),
         'query-tool': resolve(__dirname, 'src/query-tool/main.js'),
-        'tmtt-defect': resolve(__dirname, 'src/tmtt-defect/main.js')
+        'tmtt-defect': resolve(__dirname, 'src/tmtt-defect/main.js'),
+        'qc-gate': resolve(__dirname, 'src/qc-gate/index.html')
       },
       output: {
         entryFileNames: '[name].js',
         chunkFileNames: 'chunks/[name]-[hash].js',
         assetFileNames: '[name][extname]',
         manualChunks(id) {
-          if (!id.includes('node_modules')) {
+          const normalizedId = id.replace(/\\/g, '/');
+          if (!normalizedId.includes('node_modules')) {
             return;
           }
-          if (id.includes('echarts')) {
+          if (
+            normalizedId.includes('/node_modules/echarts/') ||
+            normalizedId.includes('/node_modules/zrender/') ||
+            normalizedId.includes('/node_modules/vue-echarts/')
+          ) {
             return 'vendor-echarts';
           }
+          if (
+            normalizedId.includes('/node_modules/vue/') ||
+            normalizedId.includes('/node_modules/@vue/')
+          ) {
+            return 'vendor-vue';
+          }
           return 'vendor';
         }
       }

frontend_design/WIP_main.pen

@@ -1,614 +0,0 @@
-{
-  "version": "2.6",
-  "children": [
-    {
-      "type": "frame",
-      "id": "GIoPU",
-      "x": 950,
-      "y": 0,
-      "name": "WIP Overview - Integrated",
-      "width": 1200,
-      "fill": "#F5F7FA",
-      "layout": "vertical",
-      "gap": 16,
-      "padding": 20,
-      "children": [
-        {
-          "type": "frame",
-          "id": "N2qxA",
-          "name": "header",
-          "width": "fill_container",
-          "height": 64,
-          "fill": {
-            "type": "gradient",
-            "gradientType": "linear",
-            "enabled": true,
-            "rotation": 135,
-            "size": {
-              "height": 1
-            },
-            "colors": [
-              {
-                "color": "#667eea",
-                "position": 0
-              },
-              {
-                "color": "#764ba2",
-                "position": 1
-              }
-            ]
-          },
-          "cornerRadius": 10,
-          "padding": [
-            0,
-            22
-          ],
-          "justifyContent": "space_between",
-          "alignItems": "center",
-          "children": [
-            {
-              "type": "text",
-              "id": "7h8YC",
-              "name": "headerTitle",
-              "fill": "#FFFFFF",
-              "content": "WIP Overview Dashboard",
-              "fontFamily": "Inter",
-              "fontSize": 24,
-              "fontWeight": "600"
-            },
-            {
-              "type": "frame",
-              "id": "JyskI",
-              "name": "headerRight",
-              "gap": 16,
-              "alignItems": "center",
-              "children": [
-                {
-                  "type": "text",
-                  "id": "8rtgc",
-                  "name": "lastUpdate",
-                  "fill": "rgba(255,255,255,0.8)",
-                  "content": "Last Update: 2026-01-27 14:30",
-                  "fontFamily": "Inter",
-                  "fontSize": 13,
-                  "fontWeight": "normal"
-                },
-                {
-                  "type": "frame",
-                  "id": "ZH0PW",
-                  "name": "refreshBtn",
-                  "fill": "rgba(255,255,255,0.2)",
-                  "cornerRadius": 8,
-                  "padding": [
-                    9,
-                    20
-                  ],
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "wlrMh",
-                      "name": "refreshText",
-                      "fill": "#FFFFFF",
-                      "content": "重新整理",
-                      "fontFamily": "Inter",
-                      "fontSize": 13,
-                      "fontWeight": "600"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "type": "frame",
-          "id": "aYXjP",
-          "name": "Summary Section",
-          "width": "fill_container",
-          "layout": "vertical",
-          "gap": 12,
-          "children": [
-            {
-              "type": "frame",
-              "id": "pFof4",
-              "name": "kpiRow",
-              "width": "fill_container",
-              "gap": 14,
-              "children": [
-                {
-                  "type": "frame",
-                  "id": "0kWPh",
-                  "name": "kpi1",
-                  "width": "fill_container",
-                  "fill": "#FFFFFF",
-                  "cornerRadius": 10,
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": 1,
-                    "fill": "#E2E6EF"
-                  },
-                  "layout": "vertical",
-                  "gap": 6,
-                  "padding": [
-                    16,
-                    20
-                  ],
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "DTtUq",
-                      "name": "kpi1Label",
-                      "fill": "#666666",
-                      "content": "Total Lots",
-                      "fontFamily": "Inter",
-                      "fontSize": 12,
-                      "fontWeight": "normal"
-                    },
-                    {
-                      "type": "text",
-                      "id": "vdmq8",
-                      "name": "kpi1Value",
-                      "fill": "#667eea",
-                      "content": "1,234",
-                      "fontFamily": "Inter",
-                      "fontSize": 28,
-                      "fontWeight": "700"
-                    }
-                  ]
-                },
-                {
-                  "type": "frame",
-                  "id": "wEupl",
-                  "name": "kpi2",
-                  "width": "fill_container",
-                  "fill": "#FFFFFF",
-                  "cornerRadius": 10,
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": 1,
-                    "fill": "#E2E6EF"
-                  },
-                  "layout": "vertical",
-                  "gap": 6,
-                  "padding": [
-                    16,
-                    20
-                  ],
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "59OHd",
-                      "name": "kpi2Label",
-                      "fill": "#666666",
-                      "content": "Total QTY",
-                      "fontFamily": "Inter",
-                      "fontSize": 12,
-                      "fontWeight": "normal"
-                    },
-                    {
-                      "type": "text",
-                      "id": "YkPVl",
-                      "name": "kpi2Value",
-                      "fill": "#667eea",
-                      "content": "56,789",
-                      "fontFamily": "Inter",
-                      "fontSize": 28,
-                      "fontWeight": "700"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "type": "frame",
-              "id": "g65nT",
-              "name": "wipStatusRow",
-              "width": "fill_container",
-              "gap": 14,
-              "children": [
-                {
-                  "type": "frame",
-                  "id": "sbKdU",
-                  "name": "runCard",
-                  "width": "fill_container",
-                  "fill": "#F0FDF4",
-                  "cornerRadius": 10,
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": 2,
-                    "fill": "#22C55E"
-                  },
-                  "layout": "vertical",
-                  "gap": 8,
-                  "padding": [
-                    16,
-                    20
-                  ],
-                  "justifyContent": "space_between",
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "frame",
-                      "id": "EQzBo",
-                      "name": "runLeft",
-                      "width": "fill_container",
-                      "gap": 10,
-                      "justifyContent": "center",
-                      "alignItems": "center",
-                      "children": [
-                        {
-                          "type": "rectangle",
-                          "cornerRadius": 5,
-                          "id": "m7Prk",
-                          "name": "runDot",
-                          "fill": "#22C55E",
-                          "width": 10,
-                          "height": 10
-                        },
-                        {
-                          "type": "text",
-                          "id": "1DMEu",
-                          "name": "runLabel",
-                          "fill": "#166534",
-                          "content": "RUN",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontWeight": "600"
-                        }
-                      ]
-                    },
-                    {
-                      "type": "frame",
-                      "id": "ZVtRH",
-                      "name": "runRight",
-                      "width": "fill_container",
-                      "gap": 24,
-                      "justifyContent": "center",
-                      "children": [
-                        {
-                          "type": "text",
-                          "id": "OLwma",
-                          "name": "runLots",
-                          "fill": "#0D0D0D",
-                          "content": "500 lots",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        },
-                        {
-                          "type": "text",
-                          "id": "OI5f5",
-                          "name": "runQty",
-                          "fill": "#166534",
-                          "content": "30,000 pcs",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "type": "frame",
-                  "id": "uibRH",
-                  "name": "queueCard",
-                  "width": "fill_container",
-                  "fill": "#FFFBEB",
-                  "cornerRadius": 10,
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": 2,
-                    "fill": "#F59E0B"
-                  },
-                  "layout": "vertical",
-                  "gap": 8,
-                  "padding": [
-                    16,
-                    20
-                  ],
-                  "justifyContent": "space_between",
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "frame",
-                      "id": "xeGDP",
-                      "name": "queueLeft",
-                      "width": "fill_container",
-                      "gap": 10,
-                      "justifyContent": "center",
-                      "alignItems": "center",
-                      "children": [
-                        {
-                          "type": "rectangle",
-                          "cornerRadius": 5,
-                          "id": "KuAgl",
-                          "name": "queueDot",
-                          "fill": "#F59E0B",
-                          "width": 10,
-                          "height": 10
-                        },
-                        {
-                          "type": "text",
-                          "id": "TsD9B",
-                          "name": "queueLabel",
-                          "fill": "#92400E",
-                          "content": "QUEUE",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontWeight": "600"
-                        }
-                      ]
-                    },
-                    {
-                      "type": "frame",
-                      "id": "41Db3",
-                      "name": "queueRight",
-                      "width": "fill_container",
-                      "gap": 24,
-                      "justifyContent": "center",
-                      "children": [
-                        {
-                          "type": "text",
-                          "id": "dtaqd",
-                          "name": "queueLots",
-                          "fill": "#0D0D0D",
-                          "content": "634 lots",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        },
-                        {
-                          "type": "text",
-                          "id": "BVusD",
-                          "name": "queueQty",
-                          "fill": "#92400E",
-                          "content": "21,789 pcs",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "type": "frame",
-                  "id": "Y5gLu",
-                  "name": "holdCard",
-                  "width": "fill_container",
-                  "fill": "#FEF2F2",
-                  "cornerRadius": 10,
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": 2,
-                    "fill": "#EF4444"
-                  },
-                  "layout": "vertical",
-                  "gap": 8,
-                  "padding": [
-                    16,
-                    20
-                  ],
-                  "justifyContent": "space_between",
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "frame",
-                      "id": "juHZC",
-                      "name": "holdLeft",
-                      "width": "fill_container",
-                      "gap": 10,
-                      "justifyContent": "center",
-                      "alignItems": "center",
-                      "children": [
-                        {
-                          "type": "rectangle",
-                          "cornerRadius": 5,
-                          "id": "FW9Vv",
-                          "name": "holdDot",
-                          "fill": "#EF4444",
-                          "width": 10,
-                          "height": 10
-                        },
-                        {
-                          "type": "text",
-                          "id": "gEojA",
-                          "name": "holdLabel",
-                          "fill": "#991B1B",
-                          "content": "HOLD",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontWeight": "600"
-                        }
-                      ]
-                    },
-                    {
-                      "type": "frame",
-                      "id": "3imiS",
-                      "name": "holdRight",
-                      "width": "fill_container",
-                      "gap": 24,
-                      "justifyContent": "center",
-                      "children": [
-                        {
-                          "type": "text",
-                          "id": "AlTi3",
-                          "name": "holdLots",
-                          "fill": "#0D0D0D",
-                          "content": "100 lots",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        },
-                        {
-                          "type": "text",
-                          "id": "oKc0i",
-                          "name": "holdQty",
-                          "fill": "#991B1B",
-                          "content": "5,000 pcs",
-                          "fontFamily": "Inter",
-                          "fontSize": 24,
-                          "fontWeight": "700"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "type": "frame",
-          "id": "uRXyA",
-          "name": "Content Grid",
-          "width": "fill_container",
-          "gap": 16,
-          "children": [
-            {
-              "type": "frame",
-              "id": "7HMip",
-              "name": "matrixCard",
-              "width": "fill_container",
-              "fill": "#FFFFFF",
-              "cornerRadius": 10,
-              "stroke": {
-                "align": "inside",
-                "thickness": 1,
-                "fill": "#E2E6EF"
-              },
-              "layout": "vertical",
-              "children": [
-                {
-                  "type": "frame",
-                  "id": "pxsYm",
-                  "name": "matrixHeader",
-                  "width": "fill_container",
-                  "fill": "#FAFBFC",
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": {
-                      "bottom": 1
-                    },
-                    "fill": "#E2E6EF"
-                  },
-                  "padding": [
-                    14,
-                    20
-                  ],
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "JhSDl",
-                      "name": "matrixTitle",
-                      "fill": "#222222",
-                      "content": "Workcenter x Package Matrix (QTY)",
-                      "fontFamily": "Inter",
-                      "fontSize": 15,
-                      "fontWeight": "600"
-                    }
-                  ]
-                },
-                {
-                  "type": "frame",
-                  "id": "4hQZP",
-                  "name": "matrixBody",
-                  "width": "fill_container",
-                  "height": 200,
-                  "layout": "vertical",
-                  "padding": 16,
-                  "justifyContent": "center",
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "lH6Yr",
-                      "name": "matrixPlaceholder",
-                      "fill": "#999999",
-                      "content": "[ Matrix Table ]",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontWeight": "normal"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "type": "frame",
-              "id": "FOIFS",
-              "name": "holdSummaryCard",
-              "width": 320,
-              "fill": "#FFFFFF",
-              "cornerRadius": 10,
-              "stroke": {
-                "align": "inside",
-                "thickness": 1,
-                "fill": "#E2E6EF"
-              },
-              "layout": "vertical",
-              "children": [
-                {
-                  "type": "frame",
-                  "id": "uikVi",
-                  "name": "holdSummaryHeader",
-                  "width": "fill_container",
-                  "fill": "#FAFBFC",
-                  "stroke": {
-                    "align": "inside",
-                    "thickness": {
-                      "bottom": 1
-                    },
-                    "fill": "#E2E6EF"
-                  },
-                  "padding": [
-                    14,
-                    20
-                  ],
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "VBWBv",
-                      "name": "holdSummaryTitle",
-                      "fill": "#222222",
-                      "content": "Hold Summary",
-                      "fontFamily": "Inter",
-                      "fontSize": 15,
-                      "fontWeight": "600"
-                    }
-                  ]
-                },
-                {
-                  "type": "frame",
-                  "id": "cFEPm",
-                  "name": "holdSummaryBody",
-                  "width": "fill_container",
-                  "height": 200,
-                  "layout": "vertical",
-                  "padding": 16,
-                  "justifyContent": "center",
-                  "alignItems": "center",
-                  "children": [
-                    {
-                      "type": "text",
-                      "id": "s7sa1",
-                      "name": "holdSummaryPlaceholder",
-                      "fill": "#999999",
-                      "content": "[ Hold Table ]",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontWeight": "normal"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

openspec/changes/archive/2026-02-09-qc-gate-report/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-09

openspec/changes/archive/2026-02-09-qc-gate-report/design.md

@@ -0,0 +1,180 @@
+## Context
+
+目前系統有 11 個頁面，全部使用 Jinja2 shell + Vite JS 混合模式。前端無 UI 框架（純 vanilla JS），ECharts 以靜態 minified 檔案引入（非 npm）。WIP 資料透過 Redis 快取，每 10 分鐘從 Oracle DWH.DW_MES_LOT_V 同步。
+
+QC-GATE 頁面將是第一個採用 Vue 3 + Vite 純前端架構的頁面，建立後續遷移模式。
+
+## Goals / Non-Goals
+
+**Goals:**
+- 提供 QC-GATE 站點即時 LOT 狀態報表（條圖 + 篩選清單）
+- 建立純 Vue 3 + Vite 頁面架構模式（不依賴 Jinja2）
+- 與現有 portal iframe 機制無縫整合
+- 複用現有 WIP Redis 快取，不增加 Oracle 查詢負擔
+
+**Non-Goals:**
+- 不遷移現有頁面到 Vue 3（本次僅建立模式）
+- 不引入 Vue Router 或 Pinia（單頁報表不需要）
+- 不修改現有 CSP 或安全策略
+- 不改動 WIP 快取更新機制
+
+## Decisions
+
+### D1: UI 框架選型 — Vue 3
+
+**選擇**: Vue 3 (Composition API + SFC)
+**替代方案**: React (JSX 轉換成本較高), Svelte (生態系較小)
+**理由**: Vite 原生支援、template 語法接近 Jinja 降低遷移門檻、vue-echarts 整合成熟、支持漸進式頁面遷移
+
+### D2: 頁面服務方式 — Vite MPA HTML entry + Flask 靜態服務
+
+**選擇**: Vite build 產出完整 HTML (`frontend/src/qc-gate/index.html`)，Flask 以 `send_from_directory` 服務
+**替代方案**: 最小 Jinja shell（仍有 Jinja 依賴）
+**理由**:
+- 完全脫離 Jinja2，建立乾淨的遷移模式
+- 此頁面為唯讀報表，只有 GET 請求，不需要 CSRF token 注入
+- Toast 功能由 Vue component 自行實作（不依賴 `_base.html` 的全域 toast）
+- Vite config 已有 `manualChunks` 設定，只需新增 HTML entry
+
+### D3: ECharts 引入方式 — npm + tree-shaking
+
+**選擇**: `npm install echarts vue-echarts`，使用 tree-shaking 只引入 bar chart 相關模組
+**替代方案**: 繼續使用靜態 minified 檔案（無法 tree-shake，~1MB）
+**理由**: 既有 Vite config 已有 `vendor-echarts` chunk split 邏輯；npm 引入後可 tree-shake 到只需 bar chart 模組（~200KB gzipped）
+
+### D4: API 設計 — 新增 `/api/qc-gate/summary` 端點
+
+**選擇**: 新建 `qc_gate_routes.py` blueprint + `qc_gate_service.py` 服務
+**替代方案**: 擴展現有 wip_routes（不符合 SRP）
+**理由**:
+- 從 WIP Redis 快取中讀取，篩選 `SPECNAME LIKE '%QC%GATE%'`
+- 使用 `DW_MES_SPEC_WORKCENTER_V`（已在 filter_cache.py 中快取）取得站點排序
+- 在後端完成 6HR 分級計算，前端只負責渲染
+- 回傳結構包含 summary（條圖資料）和 lots（清單資料）
+
+### D5: QC-GATE 站點識別與排序
+
+**選擇**: 從 WIP 快取篩選 `SPECNAME` 包含 "QC" 和 "GATE" 的 LOT，站點排序從 `DW_MES_SPEC_WORKCENTER_V` 的 `SPEC` 欄位匹配取得 `SPEC_ORDER`
+**理由**: SPECNAME 是 LOT 層級的製程步驟名稱，DW_MES_SPEC_WORKCENTER_V 是維度主表提供排序資訊
+
+### D6: 等待時間分級
+
+**選擇**: 四級分組
+- `< 6hr` — 正常（綠色）
+- `6-12hr` — 注意（黃色）
+- `12-24hr` — 警告（橙色）
+- `> 24hr` — 超時（紅色）
+
+**計算**: `wait_hours = (SYS_DATE - MOVEINTIMESTAMP)` 以小時為單位，在後端計算
+
+### D7: 自動刷新 — 複用 wip-overview 模式
+
+**選擇**: 10 分鐘 `setInterval` + `visibilitychange` 即時刷新
+**理由**: 與 WIP 快取同步週期一致，避免無效請求；tab 隱藏時跳過刷新
+
+## Architecture
+
+```
+┌─ Vite Build ──────────────────────────────┐
+│ frontend/src/qc-gate/                     │
+│   index.html       ← HTML entry (no Jinja)│
+│   main.js          ← createApp, mount     │
+│   App.vue          ← root layout          │
+│   components/                             │
+│     QcGateChart.vue  ← ECharts stacked bar│
+│     LotTable.vue     ← filterable table   │
+│   composables/                            │
+│     useQcGateData.js ← fetch + transform  │
+│     useAutoRefresh.js← 10min refresh logic│
+│   style.css        ← page styles          │
+│                                           │
+│ Build output → static/dist/qc-gate.html   │
+│                static/dist/qc-gate.js     │
+│                static/dist/qc-gate.css    │
+└───────────────────────────────────────────┘
+
+┌─ Flask Backend ───────────────────────────┐
+│ routes/qc_gate_routes.py                  │
+│   GET /api/qc-gate/summary               │
+│                                           │
+│ services/qc_gate_service.py               │
+│   get_qc_gate_summary()                   │
+│     ├─ get_cached_wip_data()  (Redis)     │
+│     ├─ filter SPECNAME %QC%GATE%          │
+│     ├─ compute wait_hours per LOT         │
+│     └─ group by SPECNAME + bucket         │
+│                                           │
+│ app.py                                    │
+│   GET /qc-gate → send_from_directory()    │
+└───────────────────────────────────────────┘
+```
+
+## API Response Shape
+
+```json
+{
+  "cache_time": "2026-02-09T14:30:00",
+  "stations": [
+    {
+      "specname": "QC-GATE-DB",
+      "spec_order": "030",
+      "buckets": {
+        "lt_6h": 12,
+        "6h_12h": 5,
+        "12h_24h": 3,
+        "gt_24h": 1
+      },
+      "total": 21,
+      "lots": [
+        {
+          "lot_id": "L001",
+          "container_id": "C001",
+          "product": "PKG-A",
+          "qty": 5000,
+          "step": "QC-GATE-DB",
+          "workorder": "WO123",
+          "move_in_time": "2026-02-09T08:30:00",
+          "wait_hours": 6.0,
+          "bucket": "6h_12h",
+          "status": "QUEUE",
+          "equipment": null
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Vite Config Changes
+
+```js
+// vite.config.js additions
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    rollupOptions: {
+      input: {
+        // ... existing entries ...
+        'qc-gate': resolve(__dirname, 'src/qc-gate/index.html')  // HTML entry
+      },
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return;
+          if (id.includes('echarts')) return 'vendor-echarts';
+          if (id.includes('vue')) return 'vendor-vue';  // 新增 Vue chunk
+          return 'vendor';
+        }
+      }
+    }
+  }
+});
+```
+
+## Risks / Trade-offs
+
+- **[Vue plugin 影響既有 build]** → `@vitejs/plugin-vue` 只處理 `.vue` 檔案，不影響現有 `.js` entry points。已驗證 Vite plugin 系統為 additive。
+- **[ECharts npm vs 靜態檔案共存]** → 新頁面用 npm echarts，舊頁面繼續用靜態檔案。`vendor-echarts` chunk 只被 qc-gate 引用，不影響舊頁面 bundle size。
+- **[SPECNAME pattern 可能變動]** → 篩選邏輯集中在 `qc_gate_service.py` 單一位置，易於調整。
+- **[純靜態 HTML 無法使用 Flask template context]** → 此頁面為唯讀報表，不需要 CSRF、不需要 session 資料。認證由 portal iframe 外層處理。

openspec/changes/archive/2026-02-09-qc-gate-report/proposal.md

@@ -0,0 +1,32 @@
+## Why
+
+目前系統缺乏 QC-GATE 站點的即時 LOT 狀態監控。QC-GATE 是製程中的品質關卡，LOT 在此站點的等待時間直接影響生產效率。需要一個視覺化報表即時呈現各 QC-GATE 站點的 LOT 分佈與等待時間，讓管理者快速識別瓶頸。
+
+此頁面同時作為前端架構遷移的起點 — 第一個完全脫離 Jinja2 的純 Vue 3 + Vite 頁面，為後續頁面遷移建立模式。
+
+## What Changes
+
+- 新增 QC-GATE 即時狀態報表頁面（`/qc-gate`），使用 Vue 3 + ECharts 實作
+- 新增後端 API endpoint（`/api/qc-gate/summary`），從 WIP Redis cache 篩選 QC-GATE 相關 LOT
+- 前端引入 Vue 3 和 ECharts npm 套件，建立純 Vite 頁面架構模式
+- 頁面以 Vite HTML entry 方式建置，完全不使用 Jinja2 template
+- 頁面註冊至「報表類」drawer，狀態為 released
+- 使用 `DW_MES_SPEC_WORKCENTER_V` 取得 QC-GATE 站點清單與排序
+- 等待時間以 6 小時為基準分為四級：<6hr, 6-12hr, 12-24hr, >24hr
+- 支援 10 分鐘自動刷新與 visibilitychange 即時刷新
+
+## Capabilities
+
+### New Capabilities
+- `qc-gate-status-report`: QC-GATE 站點即時 LOT 狀態報表 — 包含 API 端點、Vue 3 前端頁面、圖表互動、清單篩選
+- `vue-vite-page-architecture`: 純 Vue 3 + Vite 頁面架構模式 — 脫離 Jinja2 的前端建置模式、CSRF/auth 處理、與 portal iframe 整合
+
+### Modified Capabilities
+- `page-drawer-assignment`: 新增 qc-gate 頁面至報表類 drawer 的 page_status.json 配置
+
+## Impact
+
+- **前端**: 引入 `vue`、`echarts`、`vue-echarts` npm 依賴；修改 `vite.config.js` 加入 Vue plugin 和新 entry point
+- **後端**: 新增 `qc_gate_routes.py` blueprint 和 `qc_gate_service.py` 服務；新增 Flask route serving 純靜態 HTML
+- **配置**: `page_status.json` 新增 qc-gate 頁面定義
+- **建置**: Vite config 需加入 `@vitejs/plugin-vue` 和 HTML entry

openspec/changes/archive/2026-02-09-qc-gate-report/specs/qc-gate-status-report/spec.md

@@ -0,0 +1,80 @@
+## ADDED Requirements
+
+### Requirement: System SHALL provide QC-GATE LOT status API
+The system SHALL provide an API endpoint that returns real-time LOT status for all QC-GATE stations, with wait time classification.
+
+#### Scenario: Retrieve QC-GATE summary
+- **WHEN** user sends GET `/api/qc-gate/summary`
+- **THEN** the system SHALL return all LOTs whose `SPECNAME` contains both "QC" and "GATE" (case-insensitive)
+- **THEN** each LOT SHALL include `wait_hours` calculated as `(SYS_DATE - MOVEINTIMESTAMP)` in hours
+- **THEN** each LOT SHALL be classified into a time bucket: `lt_6h`, `6h_12h`, `12h_24h`, or `gt_24h`
+- **THEN** the response SHALL include per-station bucket counts and the full lot list
+
+#### Scenario: QC-GATE data sourced from WIP cache
+- **WHEN** the API is called
+- **THEN** the system SHALL read from the existing WIP Redis cache (not direct Oracle query)
+- **THEN** the response SHALL include `cache_time` indicating the WIP snapshot timestamp
+
+#### Scenario: No QC-GATE lots in cache
+- **WHEN** no LOTs match the QC-GATE SPECNAME pattern
+- **THEN** the system SHALL return an empty `stations` array with `cache_time`
+
+### Requirement: QC-GATE stations SHALL be ordered by spec sequence
+The system SHALL order QC-GATE stations according to the manufacturing flow sequence from `DW_MES_SPEC_WORKCENTER_V`.
+
+#### Scenario: Station ordering
+- **WHEN** the API returns multiple QC-GATE stations
+- **THEN** the stations SHALL be sorted by `SPEC_ORDER` from `DW_MES_SPEC_WORKCENTER_V` where `SPEC` matches the SPECNAME
+
+#### Scenario: Station not found in spec dimension table
+- **WHEN** a QC-GATE SPECNAME is not found in `DW_MES_SPEC_WORKCENTER_V`
+- **THEN** the station SHALL appear at the end of the list with a high default sort order
+
+### Requirement: QC-GATE report page SHALL display stacked bar chart
+The page SHALL display a stacked bar chart showing LOT counts per QC-GATE station, grouped by wait time bucket.
+
+#### Scenario: Bar chart rendering
+- **WHEN** the page loads and data is available
+- **THEN** the X-axis SHALL show QC-GATE station names
+- **THEN** the Y-axis SHALL show LOT counts
+- **THEN** each bar SHALL be stacked with four color-coded segments: <6hr (green), 6-12hr (yellow), 12-24hr (orange), >24hr (red)
+
+#### Scenario: Empty state
+- **WHEN** no QC-GATE LOTs exist
+- **THEN** the chart area SHALL display a "目前無 QC-GATE LOT" message
+
+### Requirement: QC-GATE report page SHALL display filterable LOT table
+The page SHALL display a table listing individual LOTs, with click-to-filter interaction from the bar chart.
+
+#### Scenario: Default table display
+- **WHEN** the page loads
+- **THEN** the table SHALL show all QC-GATE LOTs sorted by wait time descending
+
+#### Scenario: Click bar chart to filter
+- **WHEN** user clicks a specific segment of a bar (e.g., QC-GATE-DB's 6-12hr segment)
+- **THEN** the table SHALL filter to show only LOTs matching that station AND time bucket
+- **THEN** a filter indicator SHALL be visible showing the active filter
+
+#### Scenario: Clear filter
+- **WHEN** user clicks the active filter indicator or clicks the same bar segment again
+- **THEN** the table SHALL return to showing all QC-GATE LOTs
+
+### Requirement: QC-GATE report page SHALL auto-refresh
+The page SHALL automatically refresh data at the same interval as the WIP cache update cycle.
+
+#### Scenario: Auto-refresh while visible
+- **WHEN** the page is visible and 10 minutes have elapsed since last refresh
+- **THEN** the page SHALL fetch new data from the API without showing a full loading overlay
+- **THEN** the chart and table SHALL update with new data
+
+#### Scenario: Auto-refresh while hidden
+- **WHEN** the page tab/iframe is hidden (document.hidden === true)
+- **THEN** the auto-refresh SHALL be skipped
+
+#### Scenario: Page becomes visible after being hidden
+- **WHEN** the page becomes visible after being hidden
+- **THEN** the page SHALL immediately refresh data
+
+#### Scenario: Manual refresh
+- **WHEN** user clicks the refresh button
+- **THEN** the page SHALL fetch new data and reset the auto-refresh timer

openspec/changes/archive/2026-02-09-qc-gate-report/specs/vue-vite-page-architecture/spec.md

@@ -0,0 +1,41 @@
+## ADDED Requirements
+
+### Requirement: Pure Vite pages SHALL be served as static HTML
+The system SHALL support serving Vite-built HTML pages directly via Flask without Jinja2 rendering.
+
+#### Scenario: Serve pure Vite page
+- **WHEN** user navigates to a pure Vite page route (e.g., `/qc-gate`)
+- **THEN** Flask SHALL serve the pre-built HTML file from `static/dist/` via `send_from_directory`
+- **THEN** the HTML SHALL NOT pass through Jinja2 template rendering
+
+#### Scenario: Page works in portal iframe
+- **WHEN** the pure Vite page is loaded inside the portal iframe
+- **THEN** the page SHALL render correctly within the iframe context
+- **THEN** CSP `frame-ancestors 'self'` SHALL allow the embedding
+
+### Requirement: Vite config SHALL support Vue SFC and HTML entry points
+The Vite build configuration SHALL support Vue Single File Components alongside existing vanilla JS entries.
+
+#### Scenario: Vue plugin coexistence
+- **WHEN** `vite build` is executed
+- **THEN** Vue SFC (`.vue` files) SHALL be compiled by `@vitejs/plugin-vue`
+- **THEN** existing vanilla JS entry points SHALL continue to build without modification
+
+#### Scenario: HTML entry point
+- **WHEN** a page uses an HTML file as its Vite entry point
+- **THEN** Vite SHALL process the HTML and its referenced JS/CSS into `static/dist/`
+- **THEN** the output SHALL include `<page-name>.html`, `<page-name>.js`, and `<page-name>.css`
+
+#### Scenario: Chunk splitting
+- **WHEN** Vite builds the project
+- **THEN** Vue runtime SHALL be split into a `vendor-vue` chunk
+- **THEN** ECharts modules SHALL be split into the existing `vendor-echarts` chunk
+- **THEN** chunk splitting SHALL NOT affect existing page bundles
+
+### Requirement: Pure Vite pages SHALL handle API calls without legacy MesApi
+Pure Vite pages SHALL use the existing `frontend/src/core/api.js` module for API communication without depending on the global `window.MesApi` object from `_base.html`.
+
+#### Scenario: API GET request from pure Vite page
+- **WHEN** a pure Vite page makes a GET API call
+- **THEN** the call SHALL use the `apiGet` function from `core/api.js`
+- **THEN** the call SHALL work without `window.MesApi` being present

openspec/changes/archive/2026-02-09-qc-gate-report/tasks.md

@@ -0,0 +1,31 @@
+## 1. Frontend Toolchain Setup
+
+- [x] 1.1 Install npm dependencies: `vue`, `@vitejs/plugin-vue`, `echarts`, `vue-echarts`
+- [x] 1.2 Update `vite.config.js`: add Vue plugin, add `qc-gate` HTML entry point, add `vendor-vue` manual chunk
+
+## 2. Backend API
+
+- [x] 2.1 Create `services/qc_gate_service.py`: read WIP cache, filter SPECNAME by QC/GATE pattern, compute wait_hours and bucket classification, sort stations by SPEC_ORDER from filter_cache
+- [x] 2.2 Create `routes/qc_gate_routes.py`: blueprint with `GET /api/qc-gate/summary` endpoint
+- [x] 2.3 Register blueprint in `routes/__init__.py` and add Flask route `GET /qc-gate` serving static HTML via `send_from_directory`
+
+## 3. Vue Frontend Page
+
+- [x] 3.1 Create `frontend/src/qc-gate/index.html`: standalone HTML entry with Vue app mount point
+- [x] 3.2 Create `frontend/src/qc-gate/main.js`: Vue app bootstrap with createApp and mount
+- [x] 3.3 Create `frontend/src/qc-gate/App.vue`: root layout with header (title, cache time, refresh button), chart area, and table area
+- [x] 3.4 Create `frontend/src/qc-gate/composables/useQcGateData.js`: data fetching, 10min auto-refresh with visibilitychange, reactive state management
+- [x] 3.5 Create `frontend/src/qc-gate/components/QcGateChart.vue`: ECharts stacked bar chart (x=station, y=count, stacked by 4 time buckets with color coding)
+- [x] 3.6 Create `frontend/src/qc-gate/components/LotTable.vue`: sortable lot table with click-to-filter from chart, filter indicator, clear filter
+- [x] 3.7 Create `frontend/src/qc-gate/style.css`: page styling consistent with existing dashboard aesthetic
+
+## 4. Page Registration & Integration
+
+- [x] 4.1 Register qc-gate page in `page_status.json`: route `/qc-gate`, name `QC-GATE 狀態`, drawer_id `reports`, status `released`
+- [x] 4.2 Build frontend (`npm run build`) and verify output files exist in `static/dist/`
+
+## 5. Verification
+
+- [x] 5.1 Verify API endpoint returns correct data structure with QC-GATE filtered lots, wait time buckets, and station ordering
+- [x] 5.2 Verify page renders in portal iframe: chart displays, table populates, click-to-filter works, auto-refresh fires
+- [x] 5.3 Verify existing pages still build and function correctly (Vue plugin does not break vanilla JS entries)

openspec/specs/qc-gate-status-report/spec.md

@@ -0,0 +1,84 @@
+## Purpose
+Define stable requirements for qc-gate-status-report.
+
+## Requirements
+
+
+### Requirement: System SHALL provide QC-GATE LOT status API
+The system SHALL provide an API endpoint that returns real-time LOT status for all QC-GATE stations, with wait time classification.
+
+#### Scenario: Retrieve QC-GATE summary
+- **WHEN** user sends GET `/api/qc-gate/summary`
+- **THEN** the system SHALL return all LOTs whose `SPECNAME` contains both "QC" and "GATE" (case-insensitive)
+- **THEN** each LOT SHALL include `wait_hours` calculated as `(SYS_DATE - MOVEINTIMESTAMP)` in hours
+- **THEN** each LOT SHALL be classified into a time bucket: `lt_6h`, `6h_12h`, `12h_24h`, or `gt_24h`
+- **THEN** the response SHALL include per-station bucket counts and the full lot list
+
+#### Scenario: QC-GATE data sourced from WIP cache
+- **WHEN** the API is called
+- **THEN** the system SHALL read from the existing WIP Redis cache (not direct Oracle query)
+- **THEN** the response SHALL include `cache_time` indicating the WIP snapshot timestamp
+
+#### Scenario: No QC-GATE lots in cache
+- **WHEN** no LOTs match the QC-GATE SPECNAME pattern
+- **THEN** the system SHALL return an empty `stations` array with `cache_time`
+
+### Requirement: QC-GATE stations SHALL be ordered by spec sequence
+The system SHALL order QC-GATE stations according to the manufacturing flow sequence from `DW_MES_SPEC_WORKCENTER_V`.
+
+#### Scenario: Station ordering
+- **WHEN** the API returns multiple QC-GATE stations
+- **THEN** the stations SHALL be sorted by `SPEC_ORDER` from `DW_MES_SPEC_WORKCENTER_V` where `SPEC` matches the SPECNAME
+
+#### Scenario: Station not found in spec dimension table
+- **WHEN** a QC-GATE SPECNAME is not found in `DW_MES_SPEC_WORKCENTER_V`
+- **THEN** the station SHALL appear at the end of the list with a high default sort order
+
+### Requirement: QC-GATE report page SHALL display stacked bar chart
+The page SHALL display a stacked bar chart showing LOT counts per QC-GATE station, grouped by wait time bucket.
+
+#### Scenario: Bar chart rendering
+- **WHEN** the page loads and data is available
+- **THEN** the X-axis SHALL show QC-GATE station names
+- **THEN** the Y-axis SHALL show LOT counts
+- **THEN** each bar SHALL be stacked with four color-coded segments: <6hr (green), 6-12hr (yellow), 12-24hr (orange), >24hr (red)
+
+#### Scenario: Empty state
+- **WHEN** no QC-GATE LOTs exist
+- **THEN** the chart area SHALL display a "目前無 QC-GATE LOT" message
+
+### Requirement: QC-GATE report page SHALL display filterable LOT table
+The page SHALL display a table listing individual LOTs, with click-to-filter interaction from the bar chart.
+
+#### Scenario: Default table display
+- **WHEN** the page loads
+- **THEN** the table SHALL show all QC-GATE LOTs sorted by wait time descending
+
+#### Scenario: Click bar chart to filter
+- **WHEN** user clicks a specific segment of a bar (e.g., QC-GATE-DB's 6-12hr segment)
+- **THEN** the table SHALL filter to show only LOTs matching that station AND time bucket
+- **THEN** a filter indicator SHALL be visible showing the active filter
+
+#### Scenario: Clear filter
+- **WHEN** user clicks the active filter indicator or clicks the same bar segment again
+- **THEN** the table SHALL return to showing all QC-GATE LOTs
+
+### Requirement: QC-GATE report page SHALL auto-refresh
+The page SHALL automatically refresh data at the same interval as the WIP cache update cycle.
+
+#### Scenario: Auto-refresh while visible
+- **WHEN** the page is visible and 10 minutes have elapsed since last refresh
+- **THEN** the page SHALL fetch new data from the API without showing a full loading overlay
+- **THEN** the chart and table SHALL update with new data
+
+#### Scenario: Auto-refresh while hidden
+- **WHEN** the page tab/iframe is hidden (document.hidden === true)
+- **THEN** the auto-refresh SHALL be skipped
+
+#### Scenario: Page becomes visible after being hidden
+- **WHEN** the page becomes visible after being hidden
+- **THEN** the page SHALL immediately refresh data
+
+#### Scenario: Manual refresh
+- **WHEN** user clicks the refresh button
+- **THEN** the page SHALL fetch new data and reset the auto-refresh timer

openspec/specs/vue-vite-page-architecture/spec.md

@@ -0,0 +1,45 @@
+## Purpose
+Define stable requirements for vue-vite-page-architecture.
+
+## Requirements
+
+
+### Requirement: Pure Vite pages SHALL be served as static HTML
+The system SHALL support serving Vite-built HTML pages directly via Flask without Jinja2 rendering.
+
+#### Scenario: Serve pure Vite page
+- **WHEN** user navigates to a pure Vite page route (e.g., `/qc-gate`)
+- **THEN** Flask SHALL serve the pre-built HTML file from `static/dist/` via `send_from_directory`
+- **THEN** the HTML SHALL NOT pass through Jinja2 template rendering
+
+#### Scenario: Page works in portal iframe
+- **WHEN** the pure Vite page is loaded inside the portal iframe
+- **THEN** the page SHALL render correctly within the iframe context
+- **THEN** CSP `frame-ancestors 'self'` SHALL allow the embedding
+
+### Requirement: Vite config SHALL support Vue SFC and HTML entry points
+The Vite build configuration SHALL support Vue Single File Components alongside existing vanilla JS entries.
+
+#### Scenario: Vue plugin coexistence
+- **WHEN** `vite build` is executed
+- **THEN** Vue SFC (`.vue` files) SHALL be compiled by `@vitejs/plugin-vue`
+- **THEN** existing vanilla JS entry points SHALL continue to build without modification
+
+#### Scenario: HTML entry point
+- **WHEN** a page uses an HTML file as its Vite entry point
+- **THEN** Vite SHALL process the HTML and its referenced JS/CSS into `static/dist/`
+- **THEN** the output SHALL include `<page-name>.html`, `<page-name>.js`, and `<page-name>.css`
+
+#### Scenario: Chunk splitting
+- **WHEN** Vite builds the project
+- **THEN** Vue runtime SHALL be split into a `vendor-vue` chunk
+- **THEN** ECharts modules SHALL be split into the existing `vendor-echarts` chunk
+- **THEN** chunk splitting SHALL NOT affect existing page bundles
+
+### Requirement: Pure Vite pages SHALL handle API calls without legacy MesApi
+Pure Vite pages SHALL use the existing `frontend/src/core/api.js` module for API communication without depending on the global `window.MesApi` object from `_base.html`.
+
+#### Scenario: API GET request from pure Vite page
+- **WHEN** a pure Vite page makes a GET API call
+- **THEN** the call SHALL use the `apiGet` function from `core/api.js`
+- **THEN** the call SHALL work without `window.MesApi` being present

src/mes_dashboard/app.py

@@ -9,7 +9,7 @@ import os
 import sys
 import threading
 
-from flask import Flask, jsonify, redirect, render_template, request, session, url_for
+from flask import Flask, jsonify, redirect, render_template, request, send_from_directory, session, url_for
 
 from mes_dashboard.config.tables import TABLES_CONFIG
 from mes_dashboard.config.settings import get_config
@@ -413,6 +413,12 @@ def create_app(config_name: str | None = None) -> Flask:
         """TMTT printing & lead form defect analysis page."""
         return render_template('tmtt_defect.html')
 
+    @app.route('/qc-gate')
+    def qc_gate_page():
+        """QC-GATE status report served as pure Vite HTML output."""
+        dist_dir = os.path.join(app.static_folder or "", "dist")
+        return send_from_directory(dist_dir, 'qc-gate.html')
+
     # ========================================================
     # Table Query APIs (for table_data_viewer)
     # ========================================================

src/mes_dashboard/routes/__init__.py

@@ -15,6 +15,7 @@ from .resource_history_routes import resource_history_bp
 from .job_query_routes import job_query_bp
 from .query_tool_routes import query_tool_bp
 from .tmtt_defect_routes import tmtt_defect_bp
+from .qc_gate_routes import qc_gate_bp
 
 
 def register_routes(app) -> None:
@@ -28,6 +29,7 @@ def register_routes(app) -> None:
     app.register_blueprint(job_query_bp)
     app.register_blueprint(query_tool_bp)
     app.register_blueprint(tmtt_defect_bp)
+    app.register_blueprint(qc_gate_bp)
 
 __all__ = [
     'wip_bp',
@@ -41,5 +43,6 @@ __all__ = [
     'job_query_bp',
     'query_tool_bp',
     'tmtt_defect_bp',
+    'qc_gate_bp',
     'register_routes',
 ]

src/mes_dashboard/routes/qc_gate_routes.py

@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+"""QC-GATE API routes."""
+
+from __future__ import annotations
+
+from flask import Blueprint, jsonify
+
+from mes_dashboard.services.qc_gate_service import get_qc_gate_summary
+
+qc_gate_bp = Blueprint('qc_gate', __name__, url_prefix='/api/qc-gate')
+
+
+@qc_gate_bp.route('/summary')
+def api_qc_gate_summary():
+    """Return per-station QC-GATE lot summary from cached WIP data."""
+    result = get_qc_gate_summary()
+    if result is not None:
+        return jsonify({'success': True, 'data': result})
+    return jsonify({'success': False, 'error': '查詢失敗'}), 500

src/mes_dashboard/services/filter_cache.py

@@ -31,6 +31,7 @@ _CACHE = {
     'workcenter_groups': None,      # List of {name, sequence}
     'workcenter_mapping': None,     # Dict {workcentername: {group, sequence}}
     'workcenter_to_short': None,    # Dict {workcentername: short_name}
+    'spec_order_mapping': None,     # Dict {spec_name_upper: spec_order}
     'last_refresh': None,
     'is_loading': False,
 }
@@ -148,6 +149,19 @@ def get_workcenters_by_group(group_name: str) -> List[str]:
     ]
 
 
+def get_spec_order_mapping(force_refresh: bool = False) -> Dict[str, int]:
+    """Get SPEC -> SPEC_ORDER mapping from SPEC_WORKCENTER_V cache.
+
+    Returns:
+        Dict mapping normalized SPEC name (uppercase) to integer SPEC_ORDER.
+    """
+    _ensure_cache_loaded(force_refresh)
+    mapping = _CACHE.get('spec_order_mapping')
+    if isinstance(mapping, dict):
+        return mapping
+    return {}
+
+
 # ============================================================
 # Cache Management
 # ============================================================
@@ -166,6 +180,7 @@ def get_cache_status() -> Dict[str, Any]:
             'is_loading': _CACHE.get('is_loading', False),
             'workcenter_groups_count': len(_CACHE.get('workcenter_groups') or []),
             'workcenter_mapping_count': len(_CACHE.get('workcenter_mapping') or {}),
+            'spec_order_mapping_count': len(_CACHE.get('spec_order_mapping') or {}),
         }
 
 
@@ -215,17 +230,20 @@ def _load_cache() -> bool:
     try:
         # Load workcenter groups - prioritize SPEC_WORKCENTER_V
         wc_groups, wc_mapping, wc_short = _load_workcenter_data()
+        spec_order_mapping = _load_spec_order_mapping_from_spec()
 
         with _CACHE_LOCK:
             _CACHE['workcenter_groups'] = wc_groups
             _CACHE['workcenter_mapping'] = wc_mapping
             _CACHE['workcenter_to_short'] = wc_short
+            _CACHE['spec_order_mapping'] = spec_order_mapping
             _CACHE['last_refresh'] = datetime.now()
             _CACHE['is_loading'] = False
 
         logger.info(
             f"Filter cache refreshed: {len(wc_groups or [])} groups, "
-            f"{len(wc_mapping or {})} workcenters"
+            f"{len(wc_mapping or {})} workcenters, "
+            f"{len(spec_order_mapping or {})} specs"
         )
         return True
 
@@ -346,6 +364,60 @@ def _load_workcenter_mapping_from_spec():
         return [], {}, {}
 
 
+def _safe_sort_value(value: Any, default: int = 999999) -> int:
+    """Parse sequence/order values into stable integers."""
+    if value is None:
+        return default
+    try:
+        return int(value)
+    except (TypeError, ValueError):
+        text = str(value).strip()
+        if not text:
+            return default
+        digits = ''.join(ch for ch in text if ch.isdigit())
+        if not digits:
+            return default
+        try:
+            return int(digits)
+        except (TypeError, ValueError):
+            return default
+
+
+def _normalize_spec_name(spec_name: Any) -> str:
+    if spec_name is None:
+        return ''
+    return str(spec_name).strip().upper()
+
+
+def _load_spec_order_mapping_from_spec() -> Dict[str, int]:
+    """Load SPEC -> SPEC_ORDER mapping from DW_MES_SPEC_WORKCENTER_V."""
+    try:
+        sql = f"""
+            SELECT DISTINCT
+                SPEC,
+                SPEC_ORDER
+            FROM {SPEC_WORKCENTER_VIEW}
+            WHERE SPEC IS NOT NULL
+        """
+        df = read_sql_df(sql)
+        if df is None or df.empty:
+            return {}
+
+        mapping: Dict[str, int] = {}
+        for _, row in df.iterrows():
+            normalized_spec = _normalize_spec_name(row.get('SPEC'))
+            if not normalized_spec:
+                continue
+            sort_order = _safe_sort_value(row.get('SPEC_ORDER'))
+            previous = mapping.get(normalized_spec)
+            if previous is None or sort_order < previous:
+                mapping[normalized_spec] = sort_order
+        return mapping
+    except Exception as exc:
+        logger.error(f"Failed to load SPEC_ORDER mapping from SPEC_WORKCENTER_V: {exc}")
+        return {}
+
+
 def _extract_workcenter_data_from_df(df):
     """Extract workcenter groups and mapping from DataFrame.
 

src/mes_dashboard/services/qc_gate_service.py

@@ -0,0 +1,247 @@
+# -*- coding: utf-8 -*-
+"""QC-GATE summary service built from cached WIP data."""
+
+from __future__ import annotations
+
+import logging
+from typing import Any, Dict, Optional
+
+import pandas as pd
+
+from mes_dashboard.core.cache import (
+    get_cached_wip_data,
+    get_cached_sys_date,
+    get_cache_updated_at,
+)
+from mes_dashboard.services.filter_cache import get_spec_order_mapping
+
+logger = logging.getLogger('mes_dashboard.qc_gate_service')
+
+_DEFAULT_SPEC_ORDER = 999999
+_BUCKET_TEMPLATE = {
+    'lt_6h': 0,
+    '6h_12h': 0,
+    '12h_24h': 0,
+    'gt_24h': 0,
+}
+
+
+def _safe_value(value: Any) -> Any:
+    """Normalize pandas NaN/NaT values to None."""
+    if value is None:
+        return None
+    try:
+        if pd.isna(value):
+            return None
+    except Exception:
+        pass
+    if hasattr(value, 'item'):
+        try:
+            return value.item()
+        except Exception:
+            return value
+    return value
+
+
+def _safe_int(value: Any, default: int = 0) -> int:
+    value = _safe_value(value)
+    if value is None:
+        return default
+    try:
+        return int(value)
+    except (TypeError, ValueError):
+        return default
+
+
+def _safe_float(value: Any) -> Optional[float]:
+    value = _safe_value(value)
+    if value is None:
+        return None
+    try:
+        return float(value)
+    except (TypeError, ValueError):
+        return None
+
+
+def _normalize_text(value: Any) -> str:
+    value = _safe_value(value)
+    if value is None:
+        return ''
+    return str(value).strip()
+
+
+def _normalize_spec(spec_name: Any) -> str:
+    return _normalize_text(spec_name).upper()
+
+
+def _classify_wait_bucket(wait_hours: float) -> str:
+    if wait_hours < 6:
+        return 'lt_6h'
+    if wait_hours < 12:
+        return '6h_12h'
+    if wait_hours < 24:
+        return '12h_24h'
+    return 'gt_24h'
+
+
+def _resolve_reference_time(cache_time: Optional[str], df: pd.DataFrame) -> Optional[pd.Timestamp]:
+    ts = pd.to_datetime(cache_time, errors='coerce')
+    if pd.notna(ts):
+        return ts
+
+    if 'SYS_DATE' in df.columns:
+        sys_dates = pd.to_datetime(df['SYS_DATE'], errors='coerce')
+        if not sys_dates.empty:
+            max_ts = sys_dates.max()
+            if pd.notna(max_ts):
+                return max_ts
+
+    return None
+
+
+def _resolve_move_in_time(row: pd.Series) -> Optional[pd.Timestamp]:
+    for column in ('MOVEINTIMESTAMP', 'TRACKINTIMESTAMP', 'LOTTRACKINTIME', 'STARTDATE'):
+        if column not in row.index:
+            continue
+        ts = pd.to_datetime(row.get(column), errors='coerce')
+        if pd.notna(ts):
+            return ts
+    return None
+
+
+def _resolve_wait_hours(row: pd.Series, reference_time: Optional[pd.Timestamp], move_in_time: Optional[pd.Timestamp]) -> float:
+    if reference_time is not None and move_in_time is not None:
+        delta = (reference_time - move_in_time).total_seconds() / 3600.0
+        if delta >= 0:
+            return float(delta)
+
+    age_days = _safe_float(row.get('AGEBYDAYS'))
+    if age_days is not None and age_days >= 0:
+        return float(age_days * 24)
+
+    return 0.0
+
+
+def _derive_wip_status(row: pd.Series) -> str:
+    direct = _normalize_text(row.get('WIP_STATUS') or row.get('STATUS'))
+    if direct:
+        return direct.upper()
+
+    equipment_count = _safe_int(row.get('EQUIPMENTCOUNT'))
+    hold_count = _safe_int(row.get('CURRENTHOLDCOUNT'))
+    if equipment_count > 0:
+        return 'RUN'
+    if hold_count > 0:
+        return 'HOLD'
+    return 'QUEUE'
+
+
+def _build_lot_payload(row: pd.Series, reference_time: Optional[pd.Timestamp]) -> Dict[str, Any]:
+    move_in_time = _resolve_move_in_time(row)
+    wait_hours = _resolve_wait_hours(row, reference_time, move_in_time)
+    bucket = _classify_wait_bucket(wait_hours)
+
+    move_in_display = None
+    if move_in_time is not None:
+        move_in_display = move_in_time.isoformat()
+
+    step = _normalize_text(row.get('SPECNAME'))
+    lot_id = _safe_value(row.get('LOTID') or row.get('CONTAINERNAME'))
+    container_id = _safe_value(row.get('CONTAINERID') or row.get('CONTAINERNAME') or lot_id)
+
+    product = (
+        _safe_value(row.get('PRODUCT'))
+        or _safe_value(row.get('PACKAGE_LEF'))
+        or _safe_value(row.get('PRODUCTLINENAME'))
+    )
+
+    return {
+        'lot_id': lot_id,
+        'container_id': container_id,
+        'product': product,
+        'qty': _safe_int(row.get('QTY')),
+        'step': step,
+        'workorder': _safe_value(row.get('WORKORDER')),
+        'move_in_time': move_in_display,
+        'wait_hours': round(wait_hours, 2),
+        'bucket': bucket,
+        'status': _derive_wip_status(row),
+        'equipment': _safe_value(row.get('EQUIPMENTS') or row.get('EQUIPMENTNAME')),
+    }
+
+
+def get_qc_gate_summary() -> Optional[Dict[str, Any]]:
+    """Get QC-GATE lot summary from Redis-cached WIP snapshot.
+
+    Returns:
+        Dict with cache_time and per-station lot summary, or None on failure.
+    """
+    cache_time = get_cached_sys_date() or get_cache_updated_at()
+
+    try:
+        df = get_cached_wip_data()
+        if df is None or df.empty or 'SPECNAME' not in df.columns:
+            return {
+                'cache_time': cache_time,
+                'stations': [],
+            }
+
+        spec_series = df['SPECNAME'].fillna('').astype(str).str.upper()
+        qc_gate_mask = spec_series.str.contains('QC', na=False) & spec_series.str.contains('GATE', na=False)
+        qc_gate_df = df[qc_gate_mask].copy()
+
+        if qc_gate_df.empty:
+            return {
+                'cache_time': cache_time,
+                'stations': [],
+            }
+
+        reference_time = _resolve_reference_time(cache_time, qc_gate_df)
+        spec_order_mapping = get_spec_order_mapping() or {}
+
+        stations_by_spec: Dict[str, Dict[str, Any]] = {}
+        for _, row in qc_gate_df.iterrows():
+            spec_name = _normalize_text(row.get('SPECNAME'))
+            if not spec_name:
+                continue
+
+            normalized_spec = _normalize_spec(spec_name)
+            spec_order = int(spec_order_mapping.get(normalized_spec, _DEFAULT_SPEC_ORDER))
+            lot_payload = _build_lot_payload(row, reference_time)
+
+            station = stations_by_spec.get(spec_name)
+            if station is None:
+                station = {
+                    'specname': spec_name,
+                    'spec_order': spec_order,
+                    'buckets': dict(_BUCKET_TEMPLATE),
+                    'total': 0,
+                    'lots': [],
+                }
+                stations_by_spec[spec_name] = station
+
+            station['buckets'][lot_payload['bucket']] += 1
+            station['total'] += 1
+            station['lots'].append(lot_payload)
+
+        stations = list(stations_by_spec.values())
+        for station in stations:
+            station['lots'].sort(
+                key=lambda lot: float(lot.get('wait_hours') or 0),
+                reverse=True,
+            )
+
+        stations.sort(
+            key=lambda station: (
+                int(station.get('spec_order', _DEFAULT_SPEC_ORDER)),
+                station.get('specname', ''),
+            )
+        )
+
+        return {
+            'cache_time': cache_time,
+            'stations': stations,
+        }
+    except Exception as exc:
+        logger.exception('Failed to build QC-GATE summary: %s', exc)
+        return None

tests/test_qc_gate_routes.py

@@ -0,0 +1,71 @@
+# -*- coding: utf-8 -*-
+"""Tests for QC-GATE API and page routes."""
+
+from __future__ import annotations
+
+from unittest.mock import patch
+
+import mes_dashboard.core.database as db
+from flask import Response
+
+from mes_dashboard.app import create_app
+
+
+def _client():
+    db._ENGINE = None
+    app = create_app('testing')
+    app.config['TESTING'] = True
+    return app.test_client()
+
+
+@patch('mes_dashboard.routes.qc_gate_routes.get_qc_gate_summary')
+def test_qc_gate_summary_route_returns_success(mock_get_summary):
+    mock_get_summary.return_value = {
+        'cache_time': '2026-02-09T12:00:00',
+        'stations': [
+            {
+                'specname': 'QC-GATE-A',
+                'spec_order': 10,
+                'buckets': {
+                    'lt_6h': 1,
+                    '6h_12h': 0,
+                    '12h_24h': 0,
+                    'gt_24h': 0,
+                },
+                'total': 1,
+                'lots': [],
+            }
+        ],
+    }
+
+    response = _client().get('/api/qc-gate/summary')
+    payload = response.get_json()
+
+    assert response.status_code == 200
+    assert payload['success'] is True
+    assert payload['data']['cache_time'] == '2026-02-09T12:00:00'
+    assert payload['data']['stations'][0]['specname'] == 'QC-GATE-A'
+
+
+@patch('mes_dashboard.routes.qc_gate_routes.get_qc_gate_summary', return_value=None)
+def test_qc_gate_summary_route_returns_500_on_failure(_mock_get_summary):
+    response = _client().get('/api/qc-gate/summary')
+    payload = response.get_json()
+
+    assert response.status_code == 500
+    assert payload['success'] is False
+    assert 'error' in payload
+
+
+@patch('mes_dashboard.app.send_from_directory')
+def test_qc_gate_page_served_from_static_dist(mock_send_from_directory):
+    mock_send_from_directory.return_value = Response('<html>ok</html>', mimetype='text/html')
+
+    response = _client().get('/qc-gate')
+
+    assert response.status_code == 200
+    assert 'text/html' in response.content_type
+
+    call_args = mock_send_from_directory.call_args[0]
+    assert call_args[0].endswith('/static/dist')
+    assert call_args[1] == 'qc-gate.html'

tests/test_qc_gate_service.py

@@ -0,0 +1,150 @@
+# -*- coding: utf-8 -*-
+"""Unit tests for QC-GATE summary service."""
+
+from __future__ import annotations
+
+from unittest.mock import patch
+
+import pandas as pd
+
+from mes_dashboard.services.qc_gate_service import get_qc_gate_summary
+
+
+@patch('mes_dashboard.services.qc_gate_service.get_spec_order_mapping')
+@patch('mes_dashboard.services.qc_gate_service.get_cache_updated_at')
+@patch('mes_dashboard.services.qc_gate_service.get_cached_sys_date')
+@patch('mes_dashboard.services.qc_gate_service.get_cached_wip_data')
+def test_get_qc_gate_summary_filters_classifies_and_orders(
+    mock_get_wip,
+    mock_get_sys_date,
+    mock_get_cache_updated_at,
+    mock_get_spec_order_mapping,
+):
+    mock_get_sys_date.return_value = '2026-02-09T12:00:00'
+    mock_get_cache_updated_at.return_value = '2026-02-09T12:00:00'
+    mock_get_spec_order_mapping.return_value = {
+        'QC-GATE-A': 10,
+        'QC-GATE-B': 20,
+    }
+
+    mock_get_wip.return_value = pd.DataFrame(
+        [
+            {
+                'LOTID': 'L-001',
+                'CONTAINERID': 'C-001',
+                'SPECNAME': 'QC-GATE-B',
+                'MOVEINTIMESTAMP': '2026-02-09T09:00:00',
+                'QTY': 100,
+                'WORKORDER': 'WO-1',
+                'STATUS': 'QUEUE',
+                'EQUIPMENTS': None,
+            },
+            {
+                'LOTID': 'L-002',
+                'CONTAINERID': 'C-002',
+                'SPECNAME': 'QC-GATE-A',
+                'MOVEINTIMESTAMP': '2026-02-09T11:00:00',
+                'QTY': 200,
+                'WORKORDER': 'WO-2',
+                'STATUS': 'QUEUE',
+                'EQUIPMENTS': None,
+            },
+            {
+                'LOTID': 'L-003',
+                'CONTAINERID': 'C-003',
+                'SPECNAME': 'QC-GATE-A',
+                'MOVEINTIMESTAMP': '2026-02-08T08:00:00',
+                'QTY': 50,
+                'WORKORDER': 'WO-3',
+                'STATUS': 'HOLD',
+                'EQUIPMENTS': None,
+            },
+            {
+                'LOTID': 'L-004',
+                'CONTAINERID': 'C-004',
+                'SPECNAME': 'ASSEMBLY-STEP',
+                'MOVEINTIMESTAMP': '2026-02-09T10:00:00',
+                'QTY': 25,
+                'WORKORDER': 'WO-4',
+                'STATUS': 'QUEUE',
+                'EQUIPMENTS': None,
+            },
+            {
+                'LOTID': 'L-005',
+                'CONTAINERID': 'C-005',
+                'SPECNAME': 'QC-LATE-GATE',
+                'MOVEINTIMESTAMP': '2026-02-07T06:00:00',
+                'QTY': 75,
+                'WORKORDER': 'WO-5',
+                'STATUS': 'QUEUE',
+                'EQUIPMENTS': None,
+            },
+        ]
+    )
+
+    result = get_qc_gate_summary()
+
+    assert result is not None
+    assert result['cache_time'] == '2026-02-09T12:00:00'
+
+    stations = result['stations']
+    assert [station['specname'] for station in stations] == [
+        'QC-GATE-A',
+        'QC-GATE-B',
+        'QC-LATE-GATE',
+    ]
+
+    station_a = stations[0]
+    assert station_a['buckets']['lt_6h'] == 1
+    assert station_a['buckets']['gt_24h'] == 1
+    assert station_a['total'] == 2
+
+    station_b = stations[1]
+    assert station_b['buckets']['lt_6h'] == 1
+    assert station_b['total'] == 1
+
+    unknown_station = stations[2]
+    assert unknown_station['spec_order'] == 999999
+    assert unknown_station['total'] == 1
+
+
+@patch('mes_dashboard.services.qc_gate_service.get_spec_order_mapping', return_value={})
+@patch('mes_dashboard.services.qc_gate_service.get_cache_updated_at', return_value='2026-02-09T12:00:00')
+@patch('mes_dashboard.services.qc_gate_service.get_cached_sys_date', return_value=None)
+@patch('mes_dashboard.services.qc_gate_service.get_cached_wip_data')
+def test_get_qc_gate_summary_returns_empty_when_no_match(
+    mock_get_wip,
+    _mock_get_sys_date,
+    _mock_get_cache_updated_at,
+    _mock_get_spec_order_mapping,
+):
+    mock_get_wip.return_value = pd.DataFrame(
+        [
+            {
+                'LOTID': 'L-100',
+                'SPECNAME': 'ASSEMBLY-STEP',
+                'MOVEINTIMESTAMP': '2026-02-09T10:00:00',
+            }
+        ]
+    )
+
+    result = get_qc_gate_summary()
+
+    assert result is not None
+    assert result['cache_time'] == '2026-02-09T12:00:00'
+    assert result['stations'] == []
+
+
+@patch('mes_dashboard.services.qc_gate_service.get_cache_updated_at', return_value='2026-02-09T12:00:00')
+@patch('mes_dashboard.services.qc_gate_service.get_cached_sys_date', return_value=None)
+@patch('mes_dashboard.services.qc_gate_service.get_cached_wip_data', return_value=None)
+def test_get_qc_gate_summary_returns_empty_when_cache_missing(
+    _mock_get_wip,
+    _mock_get_sys_date,
+    _mock_get_cache_updated_at,
+):
+    result = get_qc_gate_summary()
+
+    assert result is not None
+    assert result['cache_time'] == '2026-02-09T12:00:00'
+    assert result['stations'] == []