讓 Dashboard，
真正記住資料。

01THE NEXT QUESTION

第一版有畫面，這次要有記憶。

在第一部分的本機 Dashboard 教學，我們用虛構資料試了客戶、項目、收入和收據流程。重新整理後，新增的內容會還原。這一部分要讓測試記錄真正寫入資料庫，登入後再次打開仍能讀回。

02SIGN UP / NEW PROJECT

先註冊，再開一個獨立測試專案。

這一步由你親自完成帳戶註冊和密碼設定。Supabase 的官方註冊頁目前提供 GitHub、ChatGPT、SSO，以及電郵加密碼選項；選一個你自己可控制的方式，按頁面指示完成驗證。介面日後可能調整，請以官方畫面為準。

1. 01

   進入 Supabase Dashboard

   註冊或登入後，確認你看到自己的 organization。它是放置專案及設定成員、帳單的地方；它不是 Dashboard 測試使用者帳戶。

2. 02

   建立獨立測試專案

   在 Dashboard 找「New project／建立專案」；若首次使用時要求建立 organization，先完成該步。選擇正確的 organization，為新專案取一個容易辨認的名稱，例如「收支 Dashboard 測試」。核對當下顯示的方案、預計費用及地區，再提交建立。官方目前列有 Free 方案；是否適用於你，仍以建立畫面和最新價格頁為準。

3. 03

   自行保存資料庫密碼

   建立專案時如要求設定資料庫密碼，請用密碼管理器保存。不要把它、OTP、Magic Link、access token 或 secret key 貼到 Codex 對話、截圖或 GitHub。

03CONNECT SAFELY

讓 Codex 只處理這個測試專案。

回到上一階段 Dashboard 的 Codex 對話，使用 Supabase 提供的官方瀏覽器授權流程。登入後，核對選中的 organization 和專案；可選擇時，把工具範圍限於這個測試專案，再批准你理解的操作。Supabase 官方 MCP 說明指出，瀏覽器授權一般毋須在對話貼個人 access token，也提醒要限制專案範圍及審視工具權限。

VITE_SUPABASE_URL=https://YOUR_PROJECT_REF.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_YOUR_PROJECT_KEY

上面是欄位名稱示例，不含可用密鑰。實際值只放在本機被 Git 排除的設定檔；讀者毋須把內容貼給我們。此為額外知識，所有API 都唔好直接貼出黎，一般Codex會幫你處理API接駁。

04THE ORIGINAL REQUEST

把第二階段原 Prompt 交給 Codex。

以下完整保留「Dashboard 示範」第二階段實際使用的要求，包括登入、資料庫、私人收據、權限測試及私人 GitHub 版本記錄。請在第一階段專案的同一工作資料夾繼續，讓 Codex 能看到原有程式；建立專案、授權或產生費用時，由你查看畫面並決定。

請沿用上一階段嘅 Dashboard，接駁一個獨立 Supabase 測試專案。先檢查現有程式同官方最新文件，再實際修改專案。

請建立登入、客戶、項目、收入、支出記錄，以及私人收據檔案儲存。登入後新增嘅客戶、項目同收入，要喺重新整理或換裝置登入後仍然讀得返。新增收據時，原圖存入 Supabase 私人 Storage，相關支出記錄存入資料庫，兩者要正確連結。

請設定資料同檔案權限：未登入者不能查看；另一個測試帳戶不能讀取或修改我嘅客戶、項目、收入同收據。唔好只喺畫面隱藏按鈕，要測試實際資料存取。刪除客戶或項目時，唔好意外連帶刪除歷史收支記錄；先提供封存方式。

請用 Supabase 官方授權方式引導我連接測試專案。唔好叫我喺聊天貼密碼、secret key 或 service role key，亦唔好將密鑰寫入 GitHub。只用假客戶同假單據做測試。

請同時將今次修改嘅 Dashboard 程式碼同資料庫 migration 檔案上傳到我嘅 GitHub。先確認上一階段專案對應邊個 repository，避免改錯其他專案；如果仲未有 repository，請喺我已授權嘅 GitHub 帳戶建立一個私人 repository。若 GitHub 未連接，請引導我完成官方登入授權，唔好叫我喺聊天貼 access token。請喺新 branch 完成修改及測試，確認 `.env`、密鑰同示範收據圖片冇被提交，然後 commit、push，並核對 GitHub 遠端真係收到今次檔案。唔好將程式碼已上傳 GitHub 當成 Supabase 設定已套用成功。

完成後，逐項展示「新增 → 儲存 → 重新整理 → 讀返」結果，並核對 Supabase 入面真係有對應資料及原圖。同時提供 GitHub repository 網址、branch、commit ID，以及已套用到 Supabase 嘅變更。任何未成功嘅步驟都要清楚列出。

05WHAT CODEX BUILDS

資料放在哪裏？誰可以看？

Codex 要建立的不只是一個登入畫面。示範使用四張資料表：一位客戶可以有多個項目；收入屬於項目；支出可屬於項目，亦可暫時「未分配」。收據圖片放在私人 Storage，支出記錄則保存對應的檔案路徑。

06LOGIN / SAVE / READ BACK

由你登入，再親手讀回。

示範的 Dashboard 用 Supabase Auth 電郵登入連結。先在專案的 Authentication → URL Configuration 設定本機 Site URL 與 Redirect URLs。原型使用 http://localhost:3000；若你的預覽連接埠不同，請按實際網址調整。之後在本機登入畫面填寫你控制的測試電郵，登入連結由你自己在收件箱完成。詳見轉向設定及Magic Link指引。

如何跑一次保存測試？

只需使用一個由你控制的測試帳戶和虛構資料。每完成一步，先看 Dashboard 的結果；需要時請 Codex 協助核對 Supabase 中的記錄。

1. 01

   新增假客戶與項目

   登入 Dashboard，新增一位假客戶，例如「測試花店」，再在其下建立「開幕花藝佈置」項目。重新整理頁面，確認兩者仍然存在。

2. 02

   測試收入狀態

   為項目新增 HKD 5,000「預計收款」，核對項目差額暫時不變；再改為「已收款」，確認差額增加 HKD 5,000。

3. 03

   上載並分配假收據

   上載一張虛構收據，逐筆覆核，填入 HKD 1,200 的已確認支出，然後手動分配到剛才的項目。確認項目差額變為 HKD 3,800，並可從支出記錄打開原圖。

4. 04

   重新整理，再核對 Supabase

   重新整理 Dashboard，確認客戶、項目、收入、支出和 HKD 3,800 差額仍在。請 Codex 帶你到 Supabase Table Editor 與私人 Storage，核對資料列、收據原圖及支出的 receipt_path 是否對應。

Rap3HK 本次示範依照上述順序，用假資料完成了新增、刷新與讀回。這項練習驗證資料保存，並不等於完成所有權限測試；不要因此把測試版直接用於真實客戶資料。

07KEEP THE BOUNDARY CLEAR

讀回成功，下一步才處理正式資料。

本篇只使用假客戶與假單據，跟做練習集中驗證單一帳戶的保存與讀回。示範原型亦曾修正收據快取問題；如果日後要處理真實客戶資料，仍須另行核對 RLS、Storage 權限、郵件、備份和營運流程。

新手常見問題