Phase A — Polished design preview

Code change shipped — BottomNav.tsx

3 tabs [ออเดอร์][นัด][ปฏิทิน] → 2 tabs [นัด][ออเดอร์] · behavior-first ordering · /calendar route still mounted (Phase B will absorb as view-toggle)

ที่เห็นวันนี้

รายการ (List view)

10:00

คุณรุ่ง

นวดอโรม่า · 60 นาที · ช่าง Ease

฿1,200

11:30

Sun Atiz

นวดไทย · 90 นาที · ช่างก้อง

฿1,800

NOW

15:00

นันทพจน์ Kasidit

Spa · 90 นาที · ช่าง Ease

฿2,300

⚠

Pain spot: Phone rings — "พรุ่งนี้บ่าย 2 ว่างไหม?" → staff scrolls list rows · GUESSES · capacity invisible

Phase B จะแก้ด้วย [ตารางเวลา] view toggle ขวา

ที่จะมาเฟส B

ตารางเวลา (Timeline view)

09:00

10:00

11:00

12:00

13:00

คุณรุ่ง

นวดอโรม่า · ช่าง Ease ✓ เสร็จแล้ว

฿1,200

Sun Atiz

นวดไทย · ช่างก้อง ● กำลังทำ

11:30–13:00 · 32/90m

฿1,800

📱 Mobile · what merchant sees

Sabai Day Spa

3 นัด · ฿5,300 วันนี้

🔍▣

10:00

คุณรุ่ง

นวดอโรม่า · 60นาที · ช่าง Ease

฿1,200

11:30

Sun Atiz

นวดไทย · 90นาที · ช่างก้อง

฿1,800

NOW

15:00

นันทพจน์

Spa · 90นาที · ช่าง Ease

฿2,300

📅 นัด

📥 ออเดอร์

📋 What ships in this commit

✅ Done in this commit

BottomNav.tsx — collapsed 3 tabs → 2 tabs [นัด][ออเดอร์]
Tab order — behavior-first: นัด ก่อน ออเดอร์
ActiveTab type — narrowed from 3 values to 2 (calendar pathname falls into "appointments")
Default landing — already /appointments via redirect-to-index-page
Calendar route — kept mounted in routes.ts (deep links work) but bottom-nav entry removed

🔜 Phase B (next sprint)

Build <ViewToggle> pill component
Mount inside /appointments route
Render <ListView> when toggle = รายการ
Render <TimelineView> when toggle = ตารางเวลา
Persist activeView to localStorage
Adopt design polish ที่เห็นในตัวอย่างนี้: status dots · NOW line · sage/blue tints · capsule pills

🎨 Design language adopted from Art's reference

Card: rounded-3xl shadow-sm
Status dots: 🟢 done / 🔵 active (pulse) / ⚪ future (ring)
NOW line: red-500 horizontal divider with "NOW" label
Capsule pills: rounded-full border
Time markers: tabular-nums, weight-700
Branch dropdown: pill style, slate-200 border
Primary CTA: blue-500 capsule "+ รับลูกค้า"
Sage green tint = done · sky blue tint = in-progress (timeline blocks)

⚙️ Phase A status: code shipped, awaiting verify

รอให้ Mod รัน npm run dev --prefix shop-frontend แล้วดู bottom-nav มี 2 tabs ครับ — ก่อน commit on develop/sarasin

Verify next

รัน npx tsc --noEmit ใน shop-frontend เช็ค type errors

Then commit

git commit -m "Phase A: collapse bottom-nav 3→2 tabs"

Then Phase B

Build view-toggle + adopt polished design language

Phase A — polished preview

⚙️ Phase A status: code shipped, awaiting verify