Design to Deploy Cloud POS

คือเว็บแอปพลิเคชันที่สร้างด้วย Next.js จำลองระบบขายหน้าร้าน (POS) บนคลาวด์แบบครบวงจร เหมาะสำหรับธุรกิจร้านกาแฟและร้านอาหารที่มีหลายสาขาหรือธุรกิจ SME ค้าขาย

POS Terminal หน้าขาย

หน้าขายหลัก แบ่งซ้าย-ขวา ฝั่งซ้ายคือพื้นที่สินค้า — มีช่องค้นหา (พิมพ์หรือสแกนบาร์โค้ด), filter chip หมวดหมู่ และตารางสินค้าแบบ responsive พร้อมรูปภาพ, ราคา, SKU และ badge จำนวนคงเหลือ   กดสินค้าเพื่อเพิ่มเข้าตะกร้า ฝั่งขวาคือตะกร้า แสดงรายการพร้อมปุ่ม +/− และลบทีละชิ้น ด้านล่างตะกร้ามี summary ยอดรวม, ส่วนลด (เปิด modal เลือก %), VAT 7% และยอดสุทธิ บริเวณปุ่มแอ็กชันมีสามปุ่มรอง — เลือกสมาชิก,    พักบิล, ดูบิลพัก — และปุ่ม "ชำระเงิน" เต็มแถบพร้อมยอดรวม กดชำระเงินจะเปิด modal สี่ช่องทาง: เงินสด (มี chip เงินทอนด่วนและคำนวณเงินทอน), QR PromptPay, บัตรเครดิต และโอนเงิน บนมือถือ (≤ 768 px)   ตะกร้าซ่อนไว้และแสดงเป็นแถบล่างแบบ sticky มี badge จำนวนสินค้าและปุ่มชำระเงิน กดแล้ว drawer จะ slide ขึ้นมาจากล่าง

Dashboard

หน้าภาพรวมหลักของสาขาที่เลือกอยู่ แบ่งเป็นสองแถว KPI — แถวแรกแสดงยอดขายวันนี้, จำนวนบิล, ยอดเฉลี่ยต่อบิล และจำนวนสาขาที่เปิดกะ แถวที่สองแสดงส่วนลดรวม, VAT ที่เก็บได้, ลูกค้าใหม่ และสินค้าใกล้หมด ถัดมาคือ   panel เปรียบเทียบประสิทธิภาพทุกสาขาพร้อม progress bar และ spark chart จากนั้นเป็นกราฟคู่ — ยอดขาย 7 วันย้อนหลัง (area chart) และยอดขายรายชั่วโมงวันนี้ (bar chart) ด้านล่างสุดคือตารางบิลล่าสุดแบบ   pagination และ donut chart สัดส่วนช่องทางชำระเงิน มีปุ่มรีเฟรชและส่งรายงานทางอีเมลที่ header

Branch Management จัดการสาขา

หน้าสำหรับติดตามและบริหารจัดการทุกสาขา KPI 4 กล่องบนสุดแสดงยอดขายรวมทุกสาขาวันนี้, จำนวนสาขาที่เปิดกะ, บิลรวม และ % ความคืบหน้าเฉลี่ย ถัดมาเป็น card grid แต่ละสาขา — แสดงชื่อ, จำนวนพนักงาน, สถานะกะ   (pill เปิด/ปิดพร้อม pulse animation), ยอดขายวันนี้, จำนวนบิล, badge เตือนสินค้าใกล้หมด, progress bar เป้าหมาย และ spark chart กดที่ card สาขาจะเปิด panel รายละเอียดด้านขวาแสดงที่อยู่, เบอร์โทร,   ผู้จัดการ, วันที่เปิดสาขา, พื้นที่ร้าน, จำนวน terminal และ KPI tile สามช่อง (ยอดขาย, พนักงาน, สมาชิก) มีปุ่มเพิ่มสาขาที่ header และแสดงข้อความแจ้งเมื่อถึง limit สาขาของ demo

Inventory สต๊อกสินค้า

ติดตามระดับสต๊อกสินค้าของสาขาที่เลือก KPI 4 กล่องแสดงจำนวน SKU ทั้งหมด, มูลค่าสต๊อกรวม, จำนวนสินค้าต่ำกว่าเกณฑ์ (ไฮไลต์แดง) และการย้ายสินค้าระหว่างสาขา ส่วนหลักคือตารางค้นหา/กรองสินค้าทั้งหมด แสดง SKU,   ชื่อ, หมวดหมู่, จำนวนคงเหลือ (badge สี — เขียว/เหลือง/แดง), ราคาต่อหน่วย และมูลค่าสต๊อกรวม ด้านข้างตารางมี panel สองกล่อง — รายการสินค้าใกล้หมดและสรุปมูลค่าสต๊อกแยกตามหมวดหมู่ ปุ่ม "เพิ่มสินค้า" เปิด modal    ฟอร์มกรอก รูป, ชื่อ, SKU, หมวด, ราคา และสต๊อกเริ่มต้น

Staff Management จัดการพนักงาน

หน้ารายชื่อพนักงานทุกคนในทุกสาขา KPI บนสุดแสดงพนักงานทั้งหมด, ที่ active วันนี้, คะแนนประสิทธิภาพเฉลี่ย และจำนวนที่กำลังเปิดกะอยู่ ตารางหลักแสดงชื่อพร้อม avatar, role badge (แคชเชีย, ซูเปอร์ไวเซอร์, ผู้จัดการ    ฯลฯ), สาขาที่สังกัด, สถานะกะ, คะแนน performance และวันที่เริ่มงาน กดแถวพนักงานจะเปิด panel รายละเอียดด้านขวาสามแท็บ: Info (ข้อมูลติดต่อ, ที่อยู่, ผู้ติดต่อฉุกเฉิน), Permissions (toggle สิทธิ์แต่ละอย่าง —   ใช้ POS, ยกเลิกบิล, อนุมัติส่วนลด, เข้า backoffice, ดูรายงาน) และ Activity (log การทำรายการล่าสุด) มีปุ่มเพิ่มพนักงานและ export รายชื่อ

Settings

หน้าตั้งค่าแบบ tab มีหกแท็บ

1. ตั้งค่าหลัก ชื่อร้าน, ที่อยู่สำนักงานใหญ่, เบอร์โทร, เลขผู้เสียภาษี, อัปโหลดโลโก้, สกุลเงิน, timezone, รูปแบบวันที่, ภาษา และ VAT

2. ระบบชำระเงิน เปิด/ปิดช่องทางชำระเงิน (เงินสด, QR, บัตร, โอน), ตั้ง PromptPay ID, กฎการปัดเศษและ service charge

3. อุปกรณ์หน้าร้าน รุ่นเครื่องพิมพ์ใบเสร็จ, ความกว้างกระดาษ, พิมพ์อัตโนมัติ, ลิ้นชักเงินสด, port สแกนเนอร์ และพอร์ตจอลูก

4. ความปลอดภัย OTP เมื่อสลับสาขา, PIN ผู้จัดการสำหรับส่วนลด, session timeout และการเข้าถึง audit log

5. คลาวด์และซิงก์ ความถี่ซิงก์ข้อมูลระหว่างสาขา, schedule backup และระยะเวลาเก็บข้อมูล

6. Integration เชื่อมต่อ LINE OA (ส่งใบเสร็จ/โปรโมชัน), export ข้อมูลไปโปรแกรมบัญชี, webhook Delivery platform (Grab, Foodpanda, LINE MAN) และจัดการ API Key สำหรับ custom integration

Click here to visit https://designtodeploy-pos-mockup.vercel.app/

Tech Stack

• Framework & Runtime - Next.js 16.2.6 (App Router) - React 19.2.4

• State Management - Zustand 5.0.13

• Styling - Tailwind CSS v4

• Language - TypeScript