Frontend Demo(前端展示) / Mock Data(模擬資料)

OpsPilot AI DashboardAI 營運中樞

OpsPilot AI Dashboard(AI 營運中樞)是一套面向中小型營運團隊的 SaaS 工作台,將 CRM(客戶關係管理)、Project Management(專案管理)、Kanban Board(看板)、Data Charts(數據圖表)、RBAC(角色權限)、AI Copilot(AI 助理)與 Audit Trail(稽核軌跡)集中在同一個操作介面。

Frontend V1(前端第一版) Static ES Modules(靜態模組)
Mock Data(模擬資料) No client data(無客戶資料)
Local Backend(本地後端) Go / PostgreSQL / Redis planned(規劃中)
OpsPilot AI Dashboard(AI 營運中樞)frontend dashboard screenshot(前端儀表板截圖)
Image Status(圖片狀態):project screenshot(專案截圖) Source(來源):Static Frontend Demo(靜態前端展示)

Product Scope(產品範圍)

Designed for operational decisions, not passive reporting(為營運決策設計,而非被動報表)

這個作品展示的是一個可操作的 AI operations workspace(AI 營運工作區):使用者能切換角色、處理客戶追蹤、移動任務、審查風險、採納 AI 建議並留下稽核紀錄。

7Workspaces(工作區)
5Roles(角色)
8Kanban Cards(看板卡片)
5AI Actions(AI 操作)

Core Capabilities(核心能力)

Operations workspace with decision flow(帶有決策流程的營運工作台)

介面不是單純 dashboard(儀表板),而是將資料、任務、權限與下一步行動放在同一個 workflow(工作流)中。

CRM

Customer Revenue Desk(客戶營收工作台)

整合 account(客戶)、opportunity(商機)、renewal risk(續約風險)與 follow-up task(追蹤任務)。

PM

Delivery Control Room(交付控制室)

將 project(專案)、task(任務)、blocked item(阻塞項目)與 risk review(風險審查)放進同一個決策視圖。

AI

AI Copilot(AI 助理)

AI 建議可被 accept(採納)或 dismiss(略過),並同步更新 task state(任務狀態)與 audit trail(稽核軌跡)。

RBAC

Role-based View(角色視圖)

Owner(營運負責人)、Manager(專案負責人)、Sales(客戶負責人)、Operator(執行成員)、Auditor(稽核管理者)有不同可操作範圍。

DATA

Data Charts(數據圖表)

提供 workload trend(工作量趨勢)、risk distribution(風險分布)與 portfolio chart(組合圖表)作為營運判斷依據。

AUD

Audit Trail(稽核軌跡)

關鍵操作會寫入 audit event(稽核事件),支援 review note(審查備註)與 decision trace(決策追蹤)。

Workspace Coverage(工作區覆蓋)

Seven views, one operating model(七個視圖,一套營運模型)

Frontend Demo(前端展示)已把七個工作區拆成可切換視圖,並讓任務、風險、AI 建議與稽核資料互相同步。

CC

Command Center(營運總覽)

KPI cards(指標卡)、priority queue(優先佇列)、health map(健康地圖)與 charts(圖表)。

CR

CRM Workspace(客戶關係工作區)

Customer(客戶)、opportunity(商機)、ARR risk(營收風險)與 follow-up(追蹤)。

PR

Projects Workspace(專案工作區)

Project status(專案狀態)、owner load(負責人負載)、delivery risk(交付風險)。

TS

Tasks Workspace(任務工作區)

Task queue(任務清單)、priority(優先級)、blocked state(阻塞狀態)與 owner(負責人)。

KB

Kanban Workspace(看板工作區)

Backlog(待處理)、Review(審核)、Doing(執行中)、Done(完成)的流程移動。

WF

Workflows Workspace(工作流工作區)

Automation rules(自動化規則)、sensitive audit flag(敏感稽核標記)、rule toggle(規則切換)。

AU

Audit Workspace(稽核工作區)

Audit events(稽核事件)、review notes(審查備註)、decision filter(決策篩選)。

UX

Theme and Mobile(主題與行動版)

Light/Dark Theme(亮色/深色主題)與 responsive layout(響應式排版)已完成第一輪展示檢查。

Technical Boundary(技術邊界)

Public demo is static. Product path remains backend-ready(公開 Demo 為靜態,產品路線保留後端銜接)

這次上架只公開安全的 static frontend(靜態前端)與 mock data(模擬資料)。後端、DB、Redis 與正式 AI provider 不放入 Vercel。

Current Delivery(目前交付)

  • Frontend Entry(前端入口):`source/frontend/index.html` 可由靜態伺服器或 Vercel 開啟。
  • State Model(狀態模型):data / state / render / bind 已拆為 ES modules(ES 模組)。
  • API Contract(API 契約):REST routes(REST 路由)、role actions(角色動作)、mutation flow(變更流程)已文件化。
  • Portfolio Safety(作品集安全):展示資料為 mock data(模擬資料),不包含客戶資料、後端密鑰或 DB 連線。

Validation(驗證)

Ready for portfolio display(已可用於作品集展示)

此作品目前定位為 frontend showcase(前端展示)。完整產品化會在 OpenAPI(OpenAPI 規格)、backend API(後端 API)與資料庫串接後進入下一階段。

01

Syntax Check(語法檢查)

`opspilot-app.js`、`opspilot-data.js`、`opspilot-state.js` 可通過 Node syntax check(Node 語法檢查)。

02

Self Check(自我檢查)

`runSelfCheck()` 驗證 task move(任務移動)、AI action(AI 操作)、workflow toggle(工作流切換)與 theme state(主題狀態)。

03

Browser Smoke(瀏覽器煙霧測試)

桌機與手機寬度檢查過 workspace switch(工作區切換)、dark theme(深色主題)、charts(圖表)與無水平溢出。