MUANMORE POS — CURRENT SYSTEM BLUEPRINT

มวลหมู่ (Muanmore) — ถอดแบบระบบขายหน้าร้าน

ไวร์เฟรมความละเอียดสูงของทุกจอตาม route จริง ครอบคลุมสถานะ loading / empty / error ไม่ใช่เฉพาะ happy path — ข้อมูลตัวอย่างใช้บริบทร้านกาแฟและเบเกอรี่ วันที่ 19 ก.ย. 2569

ล็อกอินเปิดกะ

/login · LoginPage

แบ่งซ้าย-ขวา: ฝั่งซ้าย story panel พื้น ink เล่าเรื่องร้าน ฝั่งขวาเป็นการ์ดล็อกอินด้วยรหัส PIN — แสดงพร้อม state กำลังส่งและ error เชื่อมต่อเซิร์ฟเวอร์ไม่ได้

มม

หน้าร้าน / หลังร้าน / เรื่องเดียวกัน

ระบบขายหน้าร้านของมวลหมู่

ขายคล่อง
ยอดตรง
ร้านเดินต่อ
เรียบง่ายพอสำหรับทุกกะ

สาขาเชียงใหม่ นิมมานฯ · เปิด 07:30–17:30 น.

เริ่มกะของคุณ

!ยังเชื่อมต่อเซิร์ฟเวอร์ไม่ได้

รหัส PIN

ใช้ตัวเลข 4–8 หลักที่ได้รับจากผู้ดูแลร้าน

PIN จะไม่ถูกบันทึกไว้ในอุปกรณ์นี้

หน้าขาย (POS)

/pos · PosPage

จอหลักที่พนักงานใช้ทั้งวัน — ซ้ายเป็นตะแกรงสินค้าแตะง่าย ขวาเป็นตะกร้า มีแถบเตือนออฟไลน์ค้างไว้เมื่อเน็ตหลุด

สถานะปกติ + เตือนออฟไลน์

มม

มวลหมู่

นดนิดา — พนักงานขาย · กะเช้า

empty — ตะกร้าว่าง

บิลปัจจุบัน

เลือกสินค้า แตะปุ่มสินค้าด้านซ้ายเพื่อเริ่มบิลใหม่

loading — โหลดสินค้า

กำลังโหลดรายการสินค้า…

ดายอะล็อกหน้าขาย

/pos · dialogs

ทุกดายอะล็อกแสดงซ้อนบน backdrop สี ink โปร่ง — หัวและท้ายดายอะล็อกตรึง เนื้อกลางเลื่อนได้

CheckoutDialog — แบ่งจ่าย 3 คน

ชำระเงิน — ฿430.00

จำนวนคน

ยอดต่อคน฿143.33 – ฿143.34

คนที่ 1✓ จ่ายแล้ว · เงินสด

฿143.33

คนที่ 2… รอยืนยัน · PromptPay

฿143.33

คนที่ 3! คงเหลือ

จ่ายแล้ว

฿143.33

รอยืนยัน

฿143.33

คงเหลือ

฿143.34

PromptPayDialog — รอยืนยัน

PromptPay — คนที่ 2

ยอดที่ต้องชำระ

฿143.33

… รอยืนยัน — รอแอปธนาคารยืนยัน

ให้ลูกค้าสแกนด้วยแอปธนาคารใดก็ได้ ระบบจะยืนยันอัตโนมัติเมื่อเงินเข้า

HoldDialog — พักบิล

พักบิลนี้

ชื่อบิลพัก (ไม่บังคับ)

บิลพักจะถูกเรียกคืนได้จากปุ่ม “บิลพัก” ที่หน้าขาย รายการในบิลยังไม่ถูกตัดสต็อกหรือรวมยอดขาย

HeldOrdersDialog — เรียกบิลพักคืน

บิลพัก 2

โต๊ะ 3 — คุณแพร3 รายการ · ฿360.00 · พักไว้ 13:58 น.

ไม่มีชื่อ2 รายการ · ฿140.00 · พักไว้ 14:21 น.

OptionDialog — ตัวเลือกสินค้า

ลาเต้ร้อน — ฿60

ขนาด

ความหวาน

นม

รวมต่อแก้ว

฿70.00

ItemNoteDialog — หมายเหตุรายการ

หมายเหตุ — ครัวซองต์อัลมอนด์

หมายเหตุถึงครัว

PendingOrdersDialog — ออเดอร์รอส่ง

ออเดอร์ที่รอส่ง 2

A104 — รับที่เคาน์เตอร์อเมริกาโน่เย็น ×1, บานอฟฟี่ ×1 · สั่ง 14:36 น.

… กำลังทำ

A105 — รับที่เคาน์เตอร์ชาไทยเย็น ×2 · สั่ง 14:41 น.

… กำลังทำ

ออเดอร์ที่ชำระแล้วจะเข้าคิวหน้า “คิวออเดอร์” โดยอัตโนมัติ

คิวออเดอร์

/orders · OrderQueuePage

จอสำหรับครัว/บาริสต้า — การ์ดคิวเรียงตามเวลา ปุ่มปิดงานชัดเจน พร้อมสถานะว่าง กำลังโหลด และ error

สถานะปกติ — มี 3 คิว

คิวกำลังรอ 3

← หน้าขาย

A10314:28 น. · รอ 14 นาที

ลาเต้ร้อน (กลาง, หวาน 50%)×2
ครัวซองต์อัลมอนด์×2

อุ่นก่อนเสิร์ฟ ไม่โรยไอซิ่ง

A10414:36 น. · รอ 6 นาที

อเมริกาโน่เย็น×1
บานอฟฟี่×1

A10514:41 น. · รอ 1 นาที

ชาไทยเย็น (ไม่หวาน)×2

แยกน้ำแข็ง

empty

ยังไม่มีคิวที่กำลังทำ ออเดอร์ใหม่จะแสดงที่นี่อัตโนมัติ

กำลังโหลดคิว…

error

ใบเสร็จ

/receipts/:id · ReceiptPage

ใบเสร็จแบบกระดาษหลังชำระสำเร็จ — พร้อมทางลัดกลับไปขายบิลถัดไป

มวลหมู่

กาแฟ & เบเกอรี่ · นิมมานเหมินท์ ซ. 9 เชียงใหม่

โทร 081-234-5678

เลขบิลMM-25690919-0042

วันที่19 ก.ย. 2569 · 14:32 น.

พนักงานนิดา

ลาเต้ร้อน (กลาง, หวาน 50%)2 × 70.00140.00

ชาไทยเย็น (ไม่หวาน)1 × 50.0050.00

ครัวซองต์อัลมอนด์2 × 85.00170.00

ยอดรวม฿360.00

เงินสด฿400.00

เงินทอน฿40.00

วิธีชำระเงินสด

ขอบคุณที่อุดหนุนมวลหมู่
แล้วพบกันใหม่กะหน้า

กลับหน้าขาย ← ขายบิลถัดไป

ภาพรวมร้าน

/admin · DashboardPage

back office เป็น app shell เต็มจอ — nav ซ้ายและ top bar ตรึง มีเฉพาะเนื้อหาที่เลื่อน

สถานะปกติ

ร้านวันนี้/ LIVE LEDGER

ภาพรวมร้าน

● เปิดร้านอยู่ · กะเช้า

ยอดขายเดือนนี้

128,450บาท

19 ก.ย. 2569 · 684 บิล

ยอดเฉลี่ย / บิล

186บาท

คิดจากบิลที่ชำระแล้ว

เงินสด

42,180บาท

ส่วนที่เหลือ PromptPay 86,270 บาท

บิลยกเลิก

3บิล

รวม ฿735 · ล่าสุด 13:52 น.

ยอดตามชั่วโมง

จังหวะของวันนี้ — 19 ก.ย. 2569 (พีก 11:00 น.)

4.2k

7.8k

11.6k

18.4k

15.1k

9.9k

8.6k

6.4k

5.0k

3.1k

กำลังรวมยอด…

สินค้า

/admin/products · ProductsPage

จัดการราคา ตัวเลือก และสถานะที่หน้าขายใช้จริง — ProductForm เป็น drawer เลื่อนจากขวากว้าง 640–680px แบบ header คงที่ / body เลื่อน / footer คงที่

สถานะปกติ — ตารางสินค้า

สินค้า

ราคา ตัวเลือก และสถานะที่หน้าขายใช้จริง

สินค้า	หมวด	ราคา	สถานะ
ลาเต้ร้อน มีตัวเลือก: ขนาด, ความหวาน, นม	กาแฟ	฿60	✓ ขายอยู่
อเมริกาโน่เย็น มีตัวเลือก: ขนาด, ความหวาน	กาแฟ	฿55	✓ ขายอยู่
ชาไทยเย็น มีตัวเลือก: ความหวาน	ชา & โซดา	฿50	✓ ขายอยู่
ครัวซองต์อัลมอนด์	เบเกอรี่	฿85	✓ ขายอยู่
บานอฟฟี่	เค้ก	฿75	! หมดวันนี้
มะนาวโซดา	ชา & โซดา	฿55	✕ ปิดขาย

ProductForm — drawer จากขวา (แก้ไข “ครัวซองต์อัลมอนด์”)

แก้ไขสินค้า

รูปสินค้า

แสดงบนปุ่มสินค้าหน้าขายเมื่อมีรูป — รองรับ JPG/PNG

ชื่อสินค้า

ราคา (บาท)

หมวด

สถานะ

ขายอยู่

ปุ่มสินค้าแสดงที่หน้าขาย

ตัวเลือกที่หน้าขายถามทุกครั้ง

อุ่นก่อนเสิร์ฟ ✕ หั่นครึ่ง ✕

หมายเหตุด่วน (quick notes)

ไม่โรยไอซิ่ง ✕

empty — ยังไม่มีสินค้า

ยังไม่มีสินค้า เริ่มจากเพิ่มรายการแรก

ค้นไม่เจอ

ไม่พบสินค้าที่ค้นหา ลองคำอื่น หรือล้างตัวกรองหมวดและสถานะ

หมวดหมู่

/admin/categories · CategoriesPage

จัดลำดับปุ่มที่พนักงานเห็นในหน้าขาย — ลากแถวเพื่อเรียงใหม่ได้

สถานะปกติ — ลากจัดลำดับได้

หมวดหมู่

จัดลำดับปุ่มที่พนักงานเห็นในหน้าขาย

	ลำดับ	ชื่อ	จำนวนสินค้า
⠿	1	กาแฟ	6
⠿	2	เบเกอรี่ ⇅ กำลังลาก	4
⠿	3	ชา & โซดา	4
⠿	4	เค้ก	3
⠿	5	เซตคู่	2

ลำดับนี้ตรงกับแถบหมวดบนหน้าจอขายทุกเครื่อง

empty

ยังไม่มีหมวดหมู่ เพิ่มหมวดแรกเพื่อเริ่มจัดกลุ่มสินค้า

บิลวันนี้

/admin/sales · SalesPage

ตรวจสอบบิลและส่งคำขอคืนเงินสำหรับบิลที่ชำระแล้ว — สถานะบิลมีทั้งไอคอนและข้อความกำกับ ไม่พึ่งสีอย่างเดียว

สถานะปกติ — วันที่ 19 ก.ย. 2569

บิลวันนี้

ตรวจสอบบิลและส่งคำขอคืนเงินสำหรับบิลที่ชำระแล้ว

← กลับภาพรวม

บิลในวันที่เลือก

42บิล

ยอดสุทธิรวม

7,812บาท

ยกเลิก

1บิล

คำขอคืนเงิน

1รายการ

เวลา / พนักงาน	บิล	ยอดสุทธิ	สถานะ
14:32 · นิดา	MM-25690919-0042	฿360.00	✓ ชำระแล้ว · เงินสด
14:18 · ต้น	MM-25690919-0041	฿245.00	✓ ชำระแล้ว · PromptPay
14:05 · นิดา	MM-25690919-0040	฿150.00	↩ รอคืนเงิน	รอผู้ดูแลอนุมัติ
13:52 · ต้น	MM-25690919-0039	฿235.00	✕ ยกเลิก	ยกเลิกโดย ต้น
13:47 · นิดา	MM-25690919-0038	฿520.00	✓ ชำระแล้ว · แบ่งจ่าย 2 คน

empty — วันที่ไม่มีบิล

ยังไม่มีบิลในวันที่เลือก บิลใหม่จะแสดงที่นี่หลังจากมีรายการขาย

ตั้งค่า

/admin/settings · SettingsPage

ตั้งค่าร้าน — ส่วนหลักคือบัญชี PromptPay ที่ใช้สร้าง QR รับเงินหน้าร้าน

สถานะปกติ

ตั้งค่า

ค่าระดับร้าน ใช้กับทุกเครื่องขาย

PromptPay

บัญชี PromptPay ที่ใช้สร้าง QR รับเงินหน้าร้าน

เบอร์โทร / เลข PromptPay

ชื่อบัญชีที่แสดง

เว้นว่างทั้งสองช่องเพื่อปิดรับชำระด้วย PromptPay

ทดสอบบัญชี

สร้าง QR ยอดทดสอบเพื่อเช็กว่าเงินเข้าบัญชีถูก

สแกนด้วยแอปธนาคารเพื่อตรวจว่าเงินเข้าบัญชีที่ถูกต้อง ยอด ฿1.00 นี้เป็นการโอนจริง

คอมโพเนนต์ร่วม

component sheet

ชิ้นส่วนที่ใช้ซ้ำทั้งระบบ — toast, confirm dialog, search, date picker, drawer และปุ่มครบทุก state

Snackbar / Toast — ลอยมุมขวาล่างบน desktop

✓

บันทึกสินค้า ครัวซองต์แล้วเปลี่ยนแปลงมีผลที่หน้าขายทันที

ยกเลิกบิล MM-25690919-0041 ไม่สำเร็จตรวจสอบเครือข่ายแล้วลองอีกครั้ง

ConfirmDialog — ยืนยันการทำลาย

ยกเลิกบิล MM-25690919-0041?

บิลนี้ชำระด้วย PromptPay แล้ว ฿245.00 การยกเลิกจะสร้างคำขอคืนเงินให้ผู้ดูแลอนุมัติ และไม่สามารถแก้ย้อนได้

ใช้รูปเดียวกันตอนทิ้งการแก้ไขที่ยังไม่บันทึก และตอนยกเลิก PromptPay ค้าง

SearchField

⌕

สูง 48px · focus ใช้ outline สี sun 3px

DatePicker popover

กันยายน 2569

อา	จ	อ	พ	พฤ	ศ	ส

Drawer — 3 ส่วน (header คงที่ / body เลื่อน / footer คงที่)

แก้ไขสินค้า✕

เนื้อหาส่วนนี้เลื่อน ส่วน header/footer ไม่ขยับ

ปุ่ม — ครบทุก state

primary hover focus (outline sun) active disabled loading

secondary ghost danger disabled loading

ทุกปุ่มสูงอย่างน้อย 48px · เป้าแตะ ≥ 44×44px · hover ขยับพื้นหลังเท่านั้น ไม่เฟดตัวอักษร