Final Design — Locked

BookEase × Ease POS · Cross-product consistency · 2026-04-26

✅ DECISION LOCKED

📐 Design contract

BookEase
┌─ Header (stats + date) ──┐
│  [รายการ] [ตารางเวลา]    │ ← view toggle
│   (List)    (Sheet)      │
│                          │
│   Content area           │
│                          │
└──────────────────────────┘
   📅 นัด      📥 ออเดอร์      ← 2 bottom tabs
Ease POS
┌─ Header (stats + date) ──┐
│  [รายการ] [ตารางเวลา]    │ ← view toggle (SAME)
│   (List)    (Sheet)      │
│                          │
│   Content area           │
│                          │
└──────────────────────────┘
   📅 นัด  💰 คิดเงิน  👥 ลูกค้า  ← 3 bottom tabs
The shared core: [รายการ] [ตารางเวลา] toggle inside [นัด] tab — identical UX in both products. Ease POS adds [คิดเงิน] (full POS) + [ลูกค้า] (CRM) which BookEase doesn't have.

BookEase

Customer-facing · Sell channel · 2 tabs

Sabai Day Spa
8 นัด · ฿9,800 วันนี้
🔍 ▣
◀ ส 25 เม.ย. 69 ▶
ช่าง 1 ช่าง 2 ช่าง 3 ช่าง 4 ช่าง 5
10:00 walk
เท้า
฿600
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00 walk
เท้า
฿800
14:30
+
📅 นัด
📥 ออเดอร์

BookEase tabs

นัด Appointments destination · contains [รายการ] / [ตารางเวลา] toggle (active above)
ออเดอร์ Cashflow · paid bookings · daily revenue summary · payout history

Ease POS

Full POS · Sell + manage + checkout · 3 tabs

Sabai Day Spa
8 นัด · ฿9,800 วันนี้
🔍 ▣
◀ ส 25 เม.ย. 69 ▶
ช่าง 1 ช่าง 2 ช่าง 3 ช่าง 4 ช่าง 5
10:00 walk
เท้า
฿600
10:30
11:00
11:30
12:00
12:30
13:00
13:30
14:00 walk
เท้า
฿800
14:30
+
📅 นัด
💰 คิดเงิน
👥 ลูกค้า

Ease POS tabs

นัด SAME as BookEase · contains [รายการ] / [ตารางเวลา] toggle
คิดเงิน Full POS · in-shop sale · receipt printer · cash drawer · không có ใน BookEase
ลูกค้า CRM · customer DB · history · loyalty · không có ใน BookEase

🔗 Component reuse map (BookEase ↔ Ease POS)

Green = identical · Yellow = product-specific

Component BookEase Ease POS Notes
<TopHeader> (logo + stats + actions)✅✅SAME · share component
<DateStepper> ◂ ▸✅✅SAME
<ViewToggle> [รายการ] [ตารางเวลา]✅✅SAME · biggest reuse win
<ListView> (รายการ)✅✅SAME data shape
<SheetView> (ตารางเวลา · 5-col grid)✅✅SAME · auto-create N officers
<FAB> +✅✅SAME (different brand color)
<BookingCard> tap → expand sheet✅✅SAME
Tab "นัด"✅✅Identical destination
Tab "ออเดอร์" (BookEase) ≈ "คิดเงิน" (POS) lite✅⚠️BookEase = paid-only summary · Ease POS = full POS engine
Tab "คิดเงิน" (full POS)—✅Ease POS only · BookEase doesn't have
Tab "ลูกค้า" (CRM)—✅Ease POS only · merge customer DB · loyalty

📋 Implementation plan — BookEase first

Phase 1 — Tab structure (1-2 days)
  • Collapse 3 tabs → 2: [นัด] [ออเดอร์]
  • Move existing list → child of "นัด" tab
  • Reorder old "ออเดอร์" content as 2nd tab
  • Update bottom-nav component with 2-col grid
  • Remove old "ปฏิทิน" tab
Phase 2 — View toggle (0.5 day)
  • Build <ViewToggle> component (pill toggle)
  • Mount inside [นัด] tab above content
  • Default: รายการ (familiar pattern)
  • Persist `activeView` to localStorage
Phase 3 — Sheet view (2-3 days)
  • Build <SheetView> component (grid table)
  • N-staff column generator (dynamic based on active officers)
  • Color-coded cells: paid · walk-in · booked · free
  • Tap empty cell → walk-in modal pre-filled
  • Tap booked cell → expand actions sheet (mark complete · edit · cancel)
  • Horizontal scroll if N > 5 staff
Phase 4 — Polish (0.5-1 day)
  • Header stats top (replace footer summary)
  • Search → 🔍 icon + bottom sheet
  • Filter → 🎛 icon + bottom sheet
  • Mark complete inline button on list rows
  • Reorder "ออเดอร์" inside [ออเดอร์] tab
Total estimate: ~4-6 days for BookEase
Risk: Medium · Sheet view component ใหม่
When BookEase ships, port shared components (<ViewToggle>, <ListView>, <SheetView>) to Ease POS as design-system package — separate effort, separate sprint.

✅ Ready to ship?

Final design locked · 2 tabs + view toggle inside [นัด] · cross-product consistency with Ease POS confirmed

A) Phase 1 only
Just collapse 3→2 tabs · 1-2 days · no sheet view yet
B) Full implementation ⭐
All 4 phases · 4-6 days · sheet view + view toggle + polish
C) Update preview more
Iterate mockup before code · zero risk
Final design locked · BookEase × Ease POS shared component reuse · 2026-04-26