Nava Clinic — UX/UI Mockup

1. เลือกวัน/เวลา

‹ จองคิว Nava Clinic

ขั้นตอน 1 จาก 3 — เลือกวันและเวลา

เลือกวันที่

จ.29มิ.ย.

อ.30มิ.ย.

พ.1ก.ค.

พฤ.2ก.ค.

ศ.3ก.ค.

ช่วงเวลาว่าง (ดึงข้อมูล Real-time จาก Master_Schedule)

10:00

11:00

13:00

14:00

15:00

16:00

17:00

18:00

19:00

UX note: ช่องที่ "เต็ม" แสดงสถานะ disable ทันที — ป้องกันลูกค้าเลือกคิวที่ถูกล็อคจาก LockService (Task 3.2)

2. กรอกข้อมูล + อัปโหลดสลิป

‹ ข้อมูลผู้จอง

ขั้นตอน 2 จาก 3 — กรอกข้อมูลติดต่อ

วันเวลาที่เลือก

วันที่อังคาร 30 มิ.ย. 2569

เวลา13:00 น.

ข้อมูลติดต่อ

ชื่อ-นามสกุล

เบอร์โทรศัพท์

หัตถการที่ต้องการ

แนบสลิปโอนเงินมัดจำ

📎แตะเพื่ออัปโหลดรูปสลิป
(บันทึกไปยัง Google Drive อัตโนมัติ)

3. หน้าสรุปผลการจอง (Success)

จองคิวสำเร็จ

✓

จองคิวเรียบร้อยแล้ว

ระบบส่งอีเมลแจ้งเตือนไปยังคลินิกแล้ว

รายละเอียดการจอง

หมายเลขจองBKG-0241

วันที่30 มิ.ย. 2569

เวลา13:00 น.

สถานะรอยืนยัน

1. เปิดผ่าน LINE LIFF — ลงทะเบียนสมาชิก

เปิดใน LINE • Nava Clinic Official

‹ สมัครสมาชิก

ข้อมูลของคุณ (ดึงจากประวัติ Guest เดิม)

ชื่อ-นามสกุล

เบอร์โทรศัพท์

PDPA Consent

คลินิกขอเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคล เช่น ชื่อ เบอร์โทร และประวัติการรักษา เพื่อวัตถุประสงค์ในการนัดหมาย ติดตามผลการรักษา และแจ้งข่าวสารผ่าน LINE ตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ท่านสามารถถอนความยินยอมได้ทุกเมื่อ...

ข้าพเจ้ายินยอมให้คลินิกเก็บและใช้ข้อมูลส่วนบุคคลตามที่ระบุข้างต้น

2. ผูก LINE UID สำเร็จ

เปิดใน LINE • Nava Clinic Official

สมาชิก Nava Clinic

💚

ยินดีต้อนรับสู่สมาชิก

บัญชี LINE ของคุณเชื่อมกับข้อมูลลูกค้าเดิมแล้ว

สถานะสมาชิกActive

วันที่สมัคร29 มิ.ย. 2569

เมนูด่วน

UX note: หน้านี้ทำงานหลัง doPost() อัปเดต LINE UID ลง Sheet Users สำเร็จ (Task 2.2)

📋 คิวจองวันนี้ — Staff Dashboard

‹ อังคาร 30 มิ.ย. 2569 ›

12

คิววันนี้

3

รอยืนยัน

8

ยืนยันแล้ว

1

ปฏิเสธ

เวลา	Booking ID	ลูกค้า	หัตถการ	สลิป	สถานะ	Secret Code
10:00	BKG-0238	คุณวริศรา	ทำหน้า	ดูสลิป	ยืนยันแล้ว	NV-7741
11:00	BKG-0239	คุณกิตติ	ฉีดผิว	ดูสลิป	รอยืนยัน	NV-3302
13:00	BKG-0241	คุณสมหญิง	ปรึกษาทั่วไป	ดูสลิป	รอยืนยัน	NV-9120
15:00	BKG-0240	คุณนภัส	สกินแคร์	ดูสลิป	ปฏิเสธ	NV-5567

UX note: ชื่อลูกค้าจริงไม่แสดงในคอลัมน์ Treatment Log — พนักงานเห็นเฉพาะ Secret Code เพื่อรักษาความลับของผู้เข้ารับบริการ (Task 3.1)