GutenPress AI 開發日誌：Day 14 — 數據才是 SaaS 的心跳

一、為什麼你的 SaaS 需要專屬的 Admin Dashboard？

許多工程背景的創辦人在開發初期，習慣直接依賴 Stripe Dashboard 或第三方數據平台來查看營收，甚至直接連入資料庫下 SQL 指令來確認訂單狀態。這種做法在用戶數量為個位數時或許還行得通，但在進入成長期後，將帶來巨大的營運風險與效率瓶頸：

資料孤島 (Data Silos)：
Stripe 只能看到「金流」，但無法看到這筆訂單對應的「軟體授權 (License Key)」是否已經在終端客戶的 WordPress 網站上被成功啟動 (Activated)。業務資料與金流資料的割裂，導致客服無法快速排解問題。
安全與權限控制的隱患：
若將工程師級別的資料庫存取權限直接開放給非技術背景的客服或行銷人員，將面臨極高的資料庫誤刪或個資外洩風險。
缺乏營運實感：
「數據是產品的心跳」。團隊需要一個聚合所有關鍵指標 (North Star Metrics) 的統一面板，來凝聚團隊共識並感受產品的成長脈動。

基於以上痛點，GutenPress AI 在專案的第 14 天決定實作專屬的內部營運後台，將散落在 Stripe、PayPal 以及內部授權系統的資料進行無縫聚合。

二、技術架構：Next.js App Router 驅動的數據聚合

為了追求極致的開發效率並與現有產品架構保持一致，我們選擇直接在現有的 Next.js 專案中，開闢一個專屬的 /admin 路由。

1. 高效的資料聚合 API (Data Aggregation API)

我們實作了一支專屬的內部 API (/api/admin/stats/route.ts)。這支 API 的核心任務是在伺服器端 (Server-side) 進行資料的撈取、清洗與運算，大幅減輕前端的負擔：

// 擷取重點程式碼：伺服器端資料聚合
export async function GET(request: Request) {
  try {
    // 平行讀取訂單與授權資料庫
    const orders = await readOrders();
    const licenses = await readLicenses();

    // 1. 計算總營收 (僅計算已完成的訂單)
    let totalRevenue = 0;
    orders.forEach(order => {
      if (order.status === "Completed") totalRevenue += order.amount;
    });

    // 2. 梳理授權金鑰狀態與啟用數
    const totalLicenses = licenses.length;
    let activeLicenses = 0;
    licenses.forEach(lic => {
      if (lic.status === "active" && lic.activations?.length > 0) {
        activeLicenses += 1; // 追蹤真實被啟用的網站數量
      }
    });

    // 3. 回傳清洗後且排序的 JSON 結構
    return NextResponse.json({
      success: true,
      stats: { totalRevenue, totalOrders, totalLicenses, activeLicenses },
      latestOrders,
      licenses
    });
  } catch (error) {
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

透過在 API 層完成資料的聚合與篩選，我們不僅保護了敏感資料不被推送到前端，也讓儀表板的渲染速度達到了毫秒等級的即時體驗。

2. 前端安全與權限攔截 (Frontend Protection)

考量到目前的開發階段屬於早期，我們並未立刻引進複雜的 RBAC (Role-Based Access Control) 或 NextAuth 完整認證機制，而是採用了輕量級的前端防護策略。

我們在 /admin 頁面實作了一個單一密碼閘道，並將驗證狀態暫存於 sessionStorage 中。這確保了即便該路由被外部發現，沒有密碼仍無法載入數據；同時利用 Client Component 的特性，確保這層防護不會被靜態快取繞過。隨著產品擴編，這個簡易閘道將可無縫升級為標準的 JWT 驗證機制。

三、儀表板設計美學：深色模式與資訊層級 (Information Hierarchy)

在建置 UI 時，我們延續了 GutenPress AI 一貫的「深邃專業」調性，採用了以 Tailwind CSS 打造的深色模式 (Dark Mode) 儀表板：

關鍵指標優先 (Stats Cards)：
畫面最上方配置了四大核心指標：Total Revenue (總營收)、Total Orders (總訂單)、Total Licenses (核發金鑰)、以及最重要的 Active Installations (實際安裝數)。透過翠綠色 (text-emerald-400) 來突顯金額，讓團隊一眼掌握營運健康度。
狀態視覺化 (Visual Indicators)：
在訂單與金鑰列表中，我們大量使用了標籤 (Badges) 與狀態圓點。例如，已啟用的金鑰會有閃耀的綠色圓點指示，而未啟用的則顯示灰色。這些微小的 UI 細節能讓客服在零點幾秒內判斷客戶當前的遭遇狀態。