# OpsPilot AI Dashboard（AI 營運中樞）

## 基本資料
- ID：operations-suite-dashboard
- 分類：App 介面設計
- 年份：2026
- 狀態：frontend-implementation-v1 + api-contract-v1 + component-state-model-v1（前端實作第一版 + API 契約第一版 + 元件與狀態模型第一版）
- 展示名稱：OpsPilot AI Dashboard（AI 營運中樞）
- 資料夾：`works/app/operations-suite-dashboard/`
- 前端展示：Static ES Modules / Vercel-ready static frontend（靜態模組前端）
- 第一版前端入口：`source/frontend/index.html`
- 驗收展示檔：`source/opspilot-workspace-planning-v1.html`
- API 契約與資料模型：`source/opspilot-api-contract-data-model.md`
- 前端元件與狀態模型：`source/opspilot-frontend-component-state-model.md`
- 關聯後端：`works/backend/operations-api/`

## 摘要
企業 CRM + 專案管理 + 營運管理平台，展示客戶、商機、專案、任務、看板、時程、權限、workflow 與稽核紀錄。

## 展示重點
- 多角色 RBAC 與權限差異。
- CRM 客戶、聯絡人、商機與追蹤紀錄。
- 專案任務、看板、時程與協作狀態。
- 複雜表格、篩選、批次操作。
- 審核流程與 audit log。
- Vercel mock demo 與本地 API 模式切換。

## 前端可展示第一版
- Functional Skeleton（功能骨架）：已把 Command Center（營運總覽）、CRM Workspace（客戶關係工作區）、Projects Workspace（專案工作區）、Tasks Workspace（任務工作區）、Kanban Workspace（看板工作區）、Workflows Workspace（工作流工作區）、Audit Workspace（稽核工作區）放入同一個可切換工作台。
- Role-based View（角色視圖）：Owner（營運負責人）、Manager（專案負責人）、Sales（客戶負責人）、Operator（執行成員）、Auditor（稽核管理者）會顯示不同權限與停用不可操作按鈕。
- Action Sync（操作同步）：CRM follow-up（客戶追蹤）、project risk review（專案風險審查）、task priority change（任務優先級調整）、kanban move（看板移動）、workflow toggle（工作流切換）會更新畫面狀態並寫入 audit log（稽核紀錄）。
- AI Copilot（AI 助理）：AI 建議可採納並套用到任務、專案、工作流或稽核篩選，避免只是靜態卡片。
- Theme + Responsive（主題與響應式）：light/dark theme（亮色/深色主題）與 mobile layout（行動版排版）已完成第一輪展示檢查。

## 前端實作第一版
- Frontend Entry（前端入口）：`source/frontend/index.html` 可直接由靜態伺服器開啟。
- Module Split（模組拆分）：`opspilot-data.js` 放 mock domain data（模擬領域資料），`opspilot-state.js` 放 state/actions/selectors（狀態 / 動作 / 選擇器），`opspilot-app.js` 負責 render/bind（渲染 / 綁定），`opspilot.css` 負責 light/dark theme（亮色 / 深色主題）。
- Workspace Coverage（工作區覆蓋）：Command、CRM、Projects、Tasks、Kanban、Workflows、Audit 七個工作區已可操作切換。
- Interaction Coverage（互動覆蓋）：角色切換、CRM follow-up、專案風險審查、任務優先級、看板移動、工作流切換、AI 建議採納 / 略過、稽核抽屜、審查備註與深色主題已完成前端串接。
- Framework Path（框架路徑）：目前先以無依賴 static ES modules 完成前端；若後續接入 Next.js，可直接依既有 data/state/app 分層移植到 `app/opspilot/`。

## API 契約第一版
- API Contract（API 契約）：已定義 REST routes（REST 路由）、Role Actions（角色權限動作）、mutation flow（變更流程）與 error shape（錯誤格式）。
- Data Model（資料模型）：已對齊 Account（客戶）、Opportunity（商機）、Project（專案）、Task（任務）、Workflow Rule（工作流規則）、Audit Event（稽核事件）、AI Recommendation（AI 建議）。
- Frontend State Contract（前端狀態契約）：已定義 session、workspace、accounts、projects、tasks、workflowRules、auditEvents、recommendations、ui 等狀態切片。

## 元件與狀態模型第一版
- Component Model（元件模型）：已定義 OpsPilotApp（應用外殼）、WorkspaceShell（工作區外殼）、Workspace Views（工作區視圖）、AI Copilot Panel（AI 助理面板）、Audit Drawer（稽核抽屜）與 Shared Components（共用元件）。
- State Model（狀態模型）：已定義 session、workspace、filters、domain、queue、ui 等狀態切片，並對應 Actions（動作）、Selectors（選擇器）與 Mutation Rules（變更規則）。
- Migration Steps（遷移步驟）：已固定從 HTML demo（HTML 展示）拆到 Next.js implementation（Next.js 實作）的順序。

## 技術與工具
- 前端：Static ES Modules（可移植到 Next.js）
- 後端：Go，見 `works/backend/operations-api/`
- DB：PostgreSQL，本地端
- 快取：Redis，本地端

## 前後端模式
- Vercel：使用 mock data 展示 UI 與流程。
- 本機：`.env` 指向 `http://localhost:8010`。
- 後端與 DB 不部署到 Vercel。

## 檔案結構
```text
assets/
source/
backend-local/
```

## 後續
- 依 API contract（API 契約）補正式 OpenAPI YAML（OpenAPI 規格檔）。
- 接入作品集公開入口與展示截圖。