← 回後台主控台

ChefsMate · POS → Flutter

UI 並排驗收

把現在的 POS App(Swift)跟正在重做的 Flutter 新版逐張並排。左邊是真機截圖、右邊是 Flutter 新版(假資料、免登入的預覽)。逐張看像不像,看完跟 AI 說哪張要調什麼。

左 = Swift 現役 App(真機) 右 = Flutter 新版(gallery 假資料) ⚠️ 兩邊資料不同(真機是當下店況、新版是示範假資料)→ 看的是版面/元件/顏色,不是同一筆資料

① 登入 / 選餐廳

登入頁 SignInView.swift

已對齊:logo、Google 藍鈕、Email 連結、條款。「以 LINE 繼續」本次已改成跟 Swift 一樣的啟用綠(#06C755)。

Swift 真機
Swift 登入頁
Flutter 新版
Flutter 登入頁

※ Swift 那張是全新模擬器抓的,所以上面壓了一個系統「通知權限」對話框(截圖工具點不掉),看版面就好。

📋 操作流程 / 說明書草稿

使用者怎麼操作

  1. 開啟 App → 進入登入頁。
  2. 點「以 Google 繼續」→ 跳系統瀏覽器完成 Google 登入 → 自動帶回 App 建立登入。
  3. 或點「以 LINE 繼續」(即將推出)。
  4. 或點「使用 Email 登入 / 註冊」→ 輸入 Email → 系統判斷此 Email 是否已有帳號。
  5. 登入成功 → 自動進入「選擇餐廳」。

判斷 / 邊界

  • Email 已存在 → 顯示「登入」(輸入密碼);不存在 → 顯示「註冊」(設定密碼 + 確認)。
  • 註冊密碼少於 6 碼、或兩次密碼不一致 → 擋住並提示。
  • 忘記密碼 → 寄出重設連結。

流程來源:ChefsMateShared/UI/Auth/SignInView.swift(登入頁本回直接讀 Flutter login_page.dart 對照)

✓ 版面對齊 ✓ LINE 鈕改啟用綠 功能 Phase C 才接(Google/LINE/Email)

選擇餐廳 WorkspaceSwitcherView.swift

Flutter 為 Stitch 重設計版,一次顯示三種卡片狀態:可進入(海邊小巫)、審核中、已停權。

Swift 真機
尚未抓到 Swift 基準圖
(要登入後才到得了,下次補)
Flutter 新版
Flutter 選擇餐廳
📋 操作流程 / 說明書草稿

使用者怎麼操作

  1. 登入後 → 列出你加入的所有餐廳。
  2. 可進入的餐廳(active)→ 點卡片 → 進入該店主控台開始工作。
  3. 「搜尋並加入其他餐廳」→ 輸入店名搜尋 → 申請加入 → 等店家核准。

判斷 / 邊界

  • 審核中(pending)→ 卡片變灰、顯示「申請審核中・等待店家核准」,不可點。
  • 已停權(suspended)→ 卡片變灰、顯示「已停權」,不可點。
  • 只有 active 的餐廳能被選為工作店家。

流程來源:ChefsMateShared/UI/Shared/WorkspaceSwitcher/WorkspaceSwitcherView.swift(Flutter 為 Stitch 重設計版)

✓ active / 審核中 / 停權 三狀態 待補 Swift 並排

② 主控台

主控台 POSMainControlView.swift

依並排調到一致:① 分頁列等寬塞滿、不切;② 桌位卡自適應撐滿整行(Swift 同套格子算法);③ 桌位中間的客人符號系統完整重做(徹底對照 Swift TableComponent + GuestCircleView 的 5 維狀態):訂位=圓形 / 散客(訪)=菱形、位置色(待確認金黃 / 已確認灰藍 / 待入座綠 / 遲到橘 / 用餐灰藍 / 超時紅…)、點餐 badge(紅=未出完 / 灰=已出完)、結帳 ✅、服務鈴 🔔💧💳、結帳中、待審核修改 ✎、N大M小人數;④ 底部訂位/候位改成可上拉下滑的抽屜(拖把手調高度)。

Swift 真機(海邊小巫)
Swift 主控台
Flutter 新版(假資料)
Flutter 主控台

※ Swift 那張是當下即時店況(截圖時 5 桌全空);老闆手機晚點看到的「B/C 有訪客菱形」是真客人入座了,不是版面不同。Flutter 那張是假資料,1F 對齊真機(A 空、B·C 訪 2大、D·E 空),2F 故意擺滿各種狀態讓你一次看到所有符號。

📋 操作流程 / 說明書草稿 桌位狀態邏輯已對照原始碼

怎麼看這個畫面

  1. 頂部分頁切換功能:訂位 / 主控台 / 廚房 / 外場 / 菜單 / 戰情室 / LINE訂位 / 設定。
  2. 統計卡:一眼看 空桌、未出完餐、未結帳 各幾桌。
  3. 分區(1F / 2F…)顯示每桌的小卡,桌號 + 座位數。
  4. 底部抽屜:上拉看「訂位 / 候位」清單;點「+新增訂位」。

桌位中間的符號怎麼讀

  • 形狀:圓形 = 訂位客人、菱形 = 散客(訪)。
  • 顏色:待確認金黃 / 已確認灰藍 / 待入座綠 / 遲到橘 / 用餐灰藍 / 超時紅(閃)。
  • 右上角數字:點餐狀態 — 紅 = 還有餐沒出完、灰 = 已全部出完。
  • = 已結帳;🔔💧💳 = 服務鈴(呼叫 / 加水 / 結帳); = 有待審核的修改。
  • 中央文字 = 姓氏(散客顯示「訪」)+ 人數(如「2大」「3大1小」)。

操作

  • 空桌點一下 → 開始入座 / 點餐。
  • 已入座的客人圓圈點一下 → 繼續點餐 / 結帳。
  • 浮動鈕:星星(會員集點)、拆桌、出店刪除(把客人拖到此)。

桌位狀態怎麼來的(已對照 TableStatusGate 原始碼)

  • 沒有在座 → 空桌
  • 有在座、已超過用餐門檻分鐘 → 超時(最優先提醒)。
  • 有在座、沒開單 → 已入座;有開單、餐全出完 → 已出餐;還有沒出完 → 已點餐
  • 已結帳是結帳完成後的明確結果(寫入結帳時間),不是用時間推的。

流程來源:POSMainControlView.swift + Components/TableComponent.swift + GuestCircleView.swift + 桌位狀態 Gate(lib/shared/gates/table_status_gates.dart,已單元測試)

✓ 分頁列等寬不切 ✓ 桌卡自適應撐滿整行 ✓ 客人符號系統(訂位⭕/散客◇ + 各狀態) ✓ 底部訂位/候位可拖拉抽屜 ✓ 統計卡 / 營收條 / FAB

主控台 ・ 空狀態 POSMainControlView.swift

沒有桌位 / 尚未建立樓層時的空狀態。

Swift 真機
尚未抓到 Swift 基準圖
(真機目前有桌位,下次補)
Flutter 新版
Flutter 主控台空狀態

③ 點餐 Order

點餐畫面(菜單格)POSOrderingView.swift

桌資訊 → 單點/套餐切換 → 分類膠囊 → 搜尋 → 菜單格。菜單卡狀態:已加入購物車(右上數量徽章 + 下方加減 + 藍框光暈)、套餐(左上橘標籤 + 子品項列)、剩 N 份(左下橘)、售完(黑遮罩紅標)、素食徽章。購物車是右上角圖示 → 開全螢幕購物車頁。

Swift 真機
尚未抓到 Swift 基準圖
(需在桌況點桌進入點餐,下次補)
Flutter 新版(假資料)
Flutter 點餐畫面
📋 點餐操作流程 / 說明書草稿 流程已對抗式驗證

怎麼點一桌的餐

  1. 畫面最上方顯示桌號與人數;若該桌有預約獎勵,會跳紫色提示(已自動帶入廚房,不需在此加點)。
  2. 店家同時有單點與套餐時,會出現「單點 / 套餐」切換(只有單點時不顯示)。
  3. 用分類膠囊(可左右滑)切換分類,「全部」為預設,膠囊上顯示該分類品項數。
  4. 搜尋欄輸入關鍵字即時過濾;點 X 清除。
  5. 點卡片圖片 → 開該品項詳情;點右下「+」加入購物車。
  6. 若品項有選項(辣度/份量)→ 先跳「客製選項」彈窗選完才加入。
  7. 加入後卡片右上出現數量徽章、亮起藍框,下方「- 數量 +」浮現;歸 0 即移出。
  8. 套餐卡(左上橘「套餐」標籤)加入時,若有更划算的升級套餐 → 跳「升級套餐」確認。
  9. 點右上購物車圖示 → 全螢幕購物車:逐項加減、看小計、套餐可「更換」組件、可「清空」。
  10. 按底部「送出訂單 (N 項) $金額」送單(預點餐情境為「送出預點餐」)。
  11. 若有低消且未達標 → 跳「低消提醒」,可「仍要送出」或「返回修改」。

流程來源:POSOrderingView.swift(已對抗式驗證,verify accurate)

✓ 菜單格 + 卡片各狀態 ✓ 單點/套餐 + 分類 + 搜尋 + 購物車鈕 購物車頁 / 客製 / 套餐升級 sheets 量產中 待補 Swift 並排

③ 點餐 ・ 購物車 + 彈窗(Flutter 新版)已照 Swift spec 1:1

這些是點餐流程裡的購物車與各彈窗,已照 Swift 規格做出來(假資料)。Swift 真機並排需從桌況點桌進到該流程才截得到,下次補。對應操作流程見下方「完整流程」。

購物車
購物車
客製選項
客製選項
套餐換品項
套餐換品項
升級套餐
升級套餐
✓ 購物車(含套餐組成 + 加購) ✓ 客製選項 sheet ✓ 套餐換品項 sheet ✓ 升級套餐對話框 待補 Swift 並排

③ 點餐 ・ 完整流程(含各彈窗)Order 區 7 支 Swift 檔・已驗證

以下流程全部對照原始碼 + 對抗式驗證過,可直接當使用說明書。對應的 Flutter 彈窗 UI 正依序量產(做好會在上方補截圖)。

🛒 購物車 + 送單 已驗證
  1. 加入購物車:有選項先彈客製 sheet;單品若有更貴的對應套餐先彈「升級套餐」。
  2. 加入時即時扣當日供應量(品項 + 所屬分類;套餐連同每個組件一起扣),供應不足無法加入。
  3. 同品項同選項自動合併數量;加購組合以一筆 deal 計。
  4. 右上購物車圖示 → 全螢幕購物車:縮圖、單價、選項、套餐組件、小計。
  5. -/+ 調量;減到 0 移除該列(一般品項回補供應量,含預約獎勵會釋放當日 quota)。
  6. 套餐組件可「更換」→ 開更換彈窗,差價依餐廳「更換價格政策」算(換便宜不退差等)。
  7. 底部即時「總計 $金額」→ 按送單(一般「送出訂單」/預點「送出預點餐」)。
  8. 低消未達標先跳「低消提醒」(差多少/缺哪類),可「仍要送出」或「返回修改」。
  9. 成功:一般模式建立 Order/OrderItem 送廚房;預點模式上傳 pre_orders。清空購物車、通知主控台/廚房、關閉點餐頁。

POSOrderingView.swift(submitOrder / executeSubmitOrder 各路徑)

🍱 套餐(選擇 / 升級 / 換品項) 已驗證
  1. 切到「套餐」分頁(店家有設定套餐才看得到),卡片下方列出套餐子品項。
  2. 加單品時若有對應更貴套餐 → 跳「升級為套餐更划算」:可「升級套餐 $價」或「維持單點」。
  3. 套餐加入購物車後,那一列展開列出所有組成品項。
  4. 可更換的組件後面有橘色「更換」鈕 → 開「更換品項」彈窗。
  5. 彈窗可搜尋或從同分類可替換品項挑一個;右邊顯示要補(+$ 紅)或退(-$ 綠,依政策)的差價。
  6. 想換回 → 彈窗按「恢復原品項」。
  7. 送單時套餐展開成多個獨立廚房品項(共用 comboGroupId);被換的組件在備註寫「原:A → B」。

POSOrderingView.swift(comboUpgrade / ComboSwapSheet / comboSwapPricePolicy)

⚙️ 客製選項 sheet 已驗證
  1. 點有適用選項的品項 → 開客製 sheet(頂部縮圖/品名/原價)。
  2. 各選項依序列出:單選=點了覆蓋同組其他;多選=可多選到上限,達上限再點無反應。
  3. 金額即時更新:(原價 + 已選加價)× 數量;底部加減調數量(最少 1)。
  4. 所有「必選」都選了之後,「加入購物車」才會亮起。
  5. 按「加入購物車」→ 依數量把同份選項加進車並關閉;或「取消」不加入。

MenuItemOptionSheet.swift

⚠️ 點到「已佔用桌」 已驗證
  1. 把訂位安排到「仍有未結帳客人」的桌 → 先彈桌位衝突 sheet。
  2. 上方橘色警告說明要把哪位客人(含人數)安排到哪桌、該桌還有未結帳客人。
  3. 中間列出該桌目前每組客人:姓名、人數、入座時間、已坐幾分鐘。
  4. 三選一:「選其他桌」回重挑桌 /「強制入座(前組視為同桌)」 /「取消」不處理。

TableOccupiedSheet.swift

✎ 訂單修改審核 sheet 已驗證
  1. 從訂單/通知開啟,傳入一筆待審核修改(客人請求/店家修改)。
  2. 頂部顯示來源、狀態、共幾項、多久前送出。
  3. 逐項看改了什麼:數量 2→3、新增 x1、移除、備註改、選項變更、替換為 XX、🎁 兌換獎勵變更…
  4. 待審核才會出現底部「拒絕修改 / 核准修改」;非待審核只能查看。
  5. 核准 → 呼叫後端套用 → 跳結果(全部成功/部分成功列出失敗項)。
  6. 拒絕 → 先填(選填)原因 → 確認拒絕 → 跳結果。按「確定」關閉。

OrderModificationReviewSheet.swift

📲 預點餐 → 轉現點 已驗證
  1. 候位區點訂位 → 選「先點餐」(店員代客,標題顯示「預點-姓名」、無桌位)或「自助先點餐」(產生 QR 給客人自己掃碼預點)。
  2. 照常選分類、加菜(支援單點/套餐/加購)→ 按「送出預點餐 (N 項) $金額」。
  3. 寫到雲端 pre_orders + pre_order_items,訂位標記「已預點」,主控台跳「預點餐已送出」。
  4. 訂位詳情可看橘色「已點餐」+ 預點明細。
  5. 客人到店、把訂位「安排入座」到某桌 → 系統自動把預點品項(+ 預約兌換獎勵)轉成真正廚房訂單送廚房。
  6. 轉換完成 pre_order 狀態改 converted_to_order(防重複);失敗則跳「預點訂單轉換失敗」請店員手動點餐。

POSOrderingView.swift + Services/PreOrderConversionService.swift + SeatingService.swift

④ 出餐 KDS

出餐控台(依座 / 依品)ExpediteKitchenView.swift

廚房 iPad 橫式雙欄:左可出餐區(綠)/右準備區(橘)。卡片粒度由設定切換 —— 依座(一桌一卡,桌號+等候色階+品項列+出餐/稍等)或依品(一道菜一列)。急單紅框、站別色條、催單三角、座號、改單紫標。底部懸浮工具列:縮放/全部出餐/復原/語音控單。

Flutter 新版・依座(假資料)
出餐控台 依座
Flutter 新版・依品(假資料)
出餐控台 依品
📋 出餐操作流程 / 說明書草稿 流程+計時色階已對抗式驗證

怎麼出餐

  1. 畫面分兩區:準備區(等指示)與可出餐區(已可製作/出餐)。
  2. 把準備區的菜「移到可出餐區」:單道、整桌、或「全部可做」一次全移(播『登!』音)。移錯可往回移。
  3. 插隊:「設為優先製作」丟到最前;「排在某桌之後」;「下一桌」依最早下單整桌移過去(FIFO);「這張單最後做」壓到墊底。
  4. 「催單」→ 標紅框、強制移到可出餐區、排到最前(並背景通知 server)。
  5. 做好按綠勾「出餐」:需外場送 → 變「做好等送」播『叮』鈴;不需外場送 → 直接「已送到桌」。
  6. 按錯了按「復原」可整批還原上一步(最多 30 步)。

等候時間色階(已對照原始碼)

  • 每張卡顯示「下單到現在」的分鐘數,自動變色:≥30 分 紅≥15 分 橘、其餘正常(依座綠/依品灰)。越久越紅。

ExpediteKitchenView.swift + ExpediteOrderCard/ExpeditePerDishCard.swift + ExpediteActionManager.swift(已對抗式驗證)

✓ 雙欄可出餐區/準備區 ✓ 依座 + 依品 兩模式 ✓ 計時色階 + 急單/站別/改單標記 ✓ 懸浮工具列 待補 Swift 並排

語音控單 overlayExpediteVoiceOverlay.swift

廚房手忙時用「講的」控單:點麥克風 → 說指令 → 系統即時辨識、解析、執行,並用語音回讀結果。

Flutter 新版(假資料)
語音控單
📋 語音控單流程 / 說明書草稿 已對抗式驗證
  1. 點麥克風 → 要語音辨識權限(沒給就提示去設定開)。
  2. 開始聆聽,畫面即時把你說的話轉成文字。
  3. 說中文指令(例「A桌可以做了」「B桌牛排先做」「全部可以做」「下一桌」「暫停出餐」)→ 系統辨識出指令顯示綠色預覽。
  4. 停說 2.5 秒自動完成;預設「自動執行」直接做,或關掉自動、按「執行」再做。
  5. 執行後用語音唸出結果(如「已將 3 道餐點移到可出餐區」);找不到對應餐點會唸「找不到匹配的餐點」。
  6. 說「結束/關閉/停止」或按「結束」可關閉;按「重說」重新講。

ExpediteVoiceOverlay.swift + SpeechRecognitionService.swift + ExpediteActionManager.swift(已對抗式驗證)

✓ 麥克風脈動 + 即時轉文字 ✓ 指令預覽 + 範本 + 結束/執行/重說 語音辨識本身 Phase C 接

⑤ 結帳 Checkout

結帳大廳(全額 / 現金收款 / 全部付清)POSMainControlView.swift · CheckoutSheet

結帳主畫面,單欄長捲頁(無 iPad/iPhone 分欄):貴賓摘要會員獎勵提醒(客人已用過的獎勵,紫卡提醒店員告知已扣點/折抵)→ 結帳方式(全額/分帳/按餐點)+客人端監看 → 訂單摘要(單點一列、套餐成一張分組卡,含換品項差價 +紅/-綠)→ 折扣(無/百分比/固定金額)→ 優惠券(未達門檻擋住)→ 服務費(預設 10%)→ 金額總結(小計 − 折扣 + 服務費 − 訂金折抵 = 訂單總額;部分付清顯示已結/剩餘)→ 付款方式(線上付款橘+現金收款;現金展開數字盤:收取金額、「剛好 $X」、台灣常用面額快捷含找零、應找零)→ 發票(發票內容/載具類型/統編)。付清後改顯示綠色「全部付清」橫幅+集點+傳送明細連結給客人。

未結・全額(整頁)
結帳大廳 全額
現金收款數字盤(整頁)
結帳 現金收款數字盤
全部付清(整頁)
結帳 全部付清
📋 結帳操作流程 / 說明書草稿 已對抗式驗證

怎麼結一桌的帳

  1. 主畫面點桌 → 結帳,進結帳大廳。頂部顯示桌號/人數;若客人用過會員獎勵,跳紫色「結帳提醒」(提醒店員告訴客人已扣 N 點、折抵 $X)。
  2. 選結帳方式:全額結帳分帳(除以大人數/總人數/自訂人數/按點餐人)/ 按餐點結帳(勾選要結的餐點)。
  3. 看訂單摘要:單點一列;套餐成一張分組卡(含子品項、換品項差價 +紅/-綠)。已結的品項會劃線並標「已結帳」。
  4. 加折扣(百分比/固定金額)、選優惠券(未達門檻會擋住、標「未達門檻」)、視需要加收服務費(預設 10%)。
  5. 金額即時算:小計 − 折扣 + 服務費 − 訂金折抵 = 訂單總額;部分付清時顯示「已結金額/剩餘金額」。
  6. 收款:線上付款(出 QR 給客人掃,藍新金流)或 現金收款(展開數字盤:輸入收取金額、按「剛好 $X」、台灣常用面額一鍵帶入+自動算找零、顯示應找零,按「確認收款」)。
  7. 開發票:選發票內容(逐項列出/只寫餐費)、載具類型(手機條碼/自然人憑證/捐贈碼/列印)、可填統一編號。
  8. 全部付清 → 綠色「全部付清」橫幅:可掃會員 QR 發點數、傳送明細連結給客人、回到主畫面。

CheckoutSheet(POSMainControlView.swift)+ CheckoutTypes.swift(已對抗式驗證)。⚠️ 球員證/會員優惠折扣 sheet 在 Swift 端目前 feature flag 關閉,本輪先不重建。

✓ 長頁:摘要/折扣/優惠券/服務費/總結/付款/發票 ✓ 現金數字盤+台灣常用面額+找零 ✓ 全部付清橫幅+集點 待補 Swift 並排

結帳 ・ 各付款與發票 sheet(Flutter 新版)Checkout/Views/* · 已對抗式驗證

結帳流程裡彈出的各 sheet,已照 Swift 規格 1:1 做出來(假資料)。Swift 真機並排需從桌況進到該流程才截得到,下次補。

信用卡付款
信用卡付款
線上結帳 QR・等待
線上結帳 QR 等待
線上結帳 QR・成功
線上結帳 QR 成功
客人端結帳監看
客人端結帳監看
點數要給誰(選會員)
點數要給誰
刷載具(手機條碼)
刷載具
📋 各 sheet 用途 / 流程 已對抗式驗證
  • 信用卡付款:金額卡+ TapPay 卡片表單(卡號/到期/CCV)+確認付款。⚠️ Tap to Pay 因 Apple 帳號限制暫關,固定走手動輸入。
  • 線上結帳 QR:出 QR 給客人手機掃結帳;收到付款通知即切換「付款成功」綠勾。可分享連結。
  • 客人端結帳監看:分帳時店員即時看一桌每位客人的付款狀態(已線上付款/已收現金/處理中/未付款),可代收現金、重發 QR、刷載具;全員付清可關桌。
  • 點數要給誰:結帳人非會員時,問要不要把點數累積給同桌會員(列候選人);或出 QR 請客人自己加入會員。
  • 刷載具:相機掃客人手機發票載具(手機條碼/自然人憑證)→ 辨識後確認綁定到這筆結帳。

CreditCardPaymentSheet / CheckoutQRCodeSheet / CustomerCheckoutMonitorSheet / LoyaltyChooseSheet / CarrierScannerSheet(皆已對抗式驗證)。

✓ 信用卡付款 ✓ 線上結帳 QR(等待/成功) ✓ 客人端監看(4 狀態) ✓ 選會員給點+刷載具 待補 Swift 並排