React Ops Console

統一營運控制台。Next.js 14 App Router + React + TypeScript + Tailwind CSS， 整合 SMT 良率儀表板、WMS 揀貨優化、RAG 知識庫客服三個後端服務。

---

📌 為什麼有這個專案

很多 portfolio 上的前端 demo 都是「自己連自己」的玩具。 這個專案不一樣 — 它真的去打三個獨立的後端服務：

• SMT Dashboard (.NET 8) — 即時良率與 SignalR 推播
• WMS Optimizer (Node.js) — 揀貨路徑優化
• RAG Bot (Python FastAPI) — 知識庫對話

展示一個前端工程師面對 多服務、多技術棧、即時通訊、SSE Streaming 的真實整合能力。

---

🎯 三個頁面

1. /smt — SMT 良率即時儀表板

• 即時良率卡片（每 1 秒更新）
• SignalR 連線狀態指示
• 各站位良率柱狀圖
• 不良 Top-N Pareto 圖
• SPC 警報通知

2. /wms — 揀貨路徑優化

• 倉庫尺寸 / 揀貨單輸入
• 三策略並排比較
• 路徑 SVG 即時視覺化
• 1000 張單批次模擬結果

3. /chat — RAG 知識庫客服

• 文件上傳介面
• SSE Streaming 回答（逐字顯示）
• 引用來源摺疊顯示
• 文件清單管理

---

🚀 快速開始

git clone https://github.com/LeoTang0127/react-ops-console.git
cd react-ops-console

npm install
cp .env.example .env.local        # 改成本機後端的 URL
npm run dev

開啟 http://localhost:3000

後端服務

這個前端預設連到：

• SMT: http://localhost:5080
• WMS: http://localhost:3001
• RAG: http://localhost:8000

請先把對應的後端 repo 跑起來：

• smt-yield-dashboard
• wms-pick-optimizer
• rag-knowledge-bot

---

🛠 技術棧

類別	選用	為什麼
Framework	Next.js 14 App Router	RSC + Server Actions、SEO 友善、生態最強
UI	React 18 + TypeScript strict	業界主流 + 強型別
樣式	Tailwind CSS	開發快、bundle 小
圖表	Recharts	與 React 整合最自然
Realtime	@microsoft/signalr	連 .NET 後端
Streaming	EventSource (原生)	連 Python SSE
表單 / 驗證	react-hook-form + zod	業界標準
Test	Jest + React Testing Library	業界標準

---

🗂 專案結構

app/
├── layout.tsx           # 根版型 + 側邊導覽
├── page.tsx             # 首頁
├── smt/page.tsx         # SMT 儀表板
├── wms/page.tsx         # 倉儲優化
├── chat/page.tsx        # RAG 對話
├── components/          # 共用元件
│   ├── PageHeader.tsx
│   ├── StatCard.tsx
│   ├── BarChart.tsx
│   └── SourceList.tsx
└── lib/                 # 共用工具
    ├── api.ts           # fetch wrapper
    ├── signalr.ts       # SignalR client
    └── sse.ts           # EventSource client

---

🎨 設計系統

• 主色：靛藍 #4f46e5（信任感、企業感）
• 強調色：橘 #f97316（警報用）
• 字型：系統字（避免額外載入）
• 間距：4 / 8 / 16 / 24 / 32 / 48px
• 圓角：6 / 8 / 12 / 16px
• 陰影：Tailwind shadow-sm / md
• 動畫：fade in 200ms

詳細設計規範：docs/DESIGN.md

---

🧪 測試

npm test              # 跑所有測試
npm run test:watch
npm run lint

---

📝 License

MIT

👤 Author

Leo Tang — @LeoTang0127 · mrleowin@gmail.com