📖 Overview
POS ร้านค้าปลีก · 60 สินค้า · สแกนบาร์โค้ด
🛠️ Tech Stack
vanilla JS
🏷️ Tags
- pos
- retail
POS Grocery - ระบบขายของชำ/ค้าปลีก (v2.3.1)
released 2026-07-08🗣️ User Command
v2.3.1: เรียก renderQuickCash() ใน addToCart() เพื่อ refresh ทันที
🤖 AI Response
Hotfix 3: addToCart() เรียก renderQuickCash() ทันที ทำให้ Smart Change buttons แสดงตามยอดปัจจุบันเสมอ
✅ What Changed
- ["v2.3.1 hotfix3: renderQuickCash() \u0e43\u0e19 addToCart() - Smart Change refresh \u0e41\u0e1a\u0e1a real-time"]
POS Grocery - ระบบขายของชำ/ค้าปลีก (v2.3)
released 2026-07-08🗣️ User Command
v2.3: Ship A (Smart Change) + B (VAT 7%) + C (Order History + Reprint + Refund)
🤖 AI Response
Shipped ครบ 3 systems: (A) Smart Change - ปุ่มเงินทอนเร็ว [💵 พอดี] + smart rounded-up (50/100/500) + quick ฿500/1000/2000 → 1-click change calc (B) VAT 7% - toggle ใน Settings (off by default) + cart total รวม VAT + receipt แยกยอด (ราคาก่อน VAT / VAT 7% / รวม) (C) Order History - topbar 📋 + filter chips (วันนี้/7วัน/เดือน/ปกติ/คืนแล้ว/ทั้งหมด) + row click → detail modal + พิมพ์ซ้ำ + คืนเงิน (restore stock + mark refunded)
✅ What Changed
- ["v2.3 \u2014 Smart Change + VAT 7% + Order History", "\ud83d\udcb5 A: Smart Change", " - \u0e1b\u0e38\u0e48\u0e21 \ud83d\udcb5 \u0e1e\u0e2d\u0e14\u0e35 \u2192 cashReceived = cartTotal", " - Smart rounded-up: \u0e41\u0e19\u0e30\u0e19\u0e33\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b (\u0e1b\u0e31\u0e14\u0e02\u0e36\u0e49\u0e19 50/100/500 \u0e15\u0e32\u0e21\u0e22\u0e2d\u0e14)", " - Quick amounts: \u0e3f500 / \u0e3f1000 / \u0e3f2000", " - 3 visual variants: qc-exact (\u0e40\u0e02\u0e35\u0e22\u0e27), qc-smart (\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e07), qc-fixed (\u0e40\u0e17\u0e32)", "\ud83d\udcb8 B: VAT 7%", " - toggle \u0e43\u0e19 Settings (off by default, persist localStorage)", " - cartTotal() \u0e23\u0e27\u0e21 VAT \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14 (Math.round)", " - order \u0e40\u0e01\u0e47\u0e1a vat + vatRate field", " - receipt \u0e41\u0e2a\u0e14\u0e07 VAT 7% line \u0e41\u0e22\u0e01\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19", "\ud83e\uddfe C: Order History", " - topbar \u0e1b\u0e38\u0e48\u0e21 \ud83d\udccb (icon-btn primary)", " - OrderHistoryModal + 6 filter chips + \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 orders", " - Row click \u2192 OrderDetailModal (\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21/\u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14/VAT/\u0e15\u0e49\u0e19\u0e17\u0e38\u0e19/\u0e01\u0e33\u0e44\u0e23/\u0e40\u0e07\u0e34\u0e19\u0e17\u0e2d\u0e19)", " - \ud83d\udda8\ufe0f \u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0b\u0e49\u0e33 (re-renderReceipt + openModal)", " - \ud83d\udcb8 \u0e04\u0e37\u0e19\u0e40\u0e07\u0e34\u0e19 + restore stock + mark refunded=1 + refundedAt timestamp", " - \u2705 refund-badge (\u0e41\u0e14\u0e07) \u0e41\u0e2a\u0e14\u0e07\u0e1a\u0e19 row \u0e17\u0e35\u0e48\u0e04\u0e37\u0e19\u0e41\u0e25\u0e49\u0e27", " - \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 filter '\u0e04\u0e37\u0e19\u0e40\u0e07\u0e34\u0e19\u0e41\u0e25\u0e49\u0e27' \u0e14\u0e39\u0e22\u0e49\u0e2d\u0e19\u0e2b\u0e25\u0e31\u0e07", "\ud83d\udcca UX: kawaii pink + modals escape layout + responsive mobile", "\ud83d\udce6 Size: +18KB JS + +5KB CSS"]
POS Grocery - ระบบขายของชำ/ค้าปลีก (v2.2)
released 2026-07-08🗣️ User Command
v2.2: เพิ่มระบบต้นทุน & กำไร + charts ขั้นสูง + low stock alert
🤖 AI Response
เพิ่ม 3 systems ใหญ่: (A) Cost & Profit — ตั้งราคาทุนต่อสินค้า + margin pill + cost badge + profit tracking ใน orders (B) Advanced Charts — 24-hour heatmap + top 5 best sellers (พร้อม profit) + 14-day profit trend (Canvas chart รายได้ vs ต้นทุน) (C) Low Stock Alert — pulse animation + red badge + top-toast notification + threshold setting (default 5) + Analytics modal (📈 ปุ่ม) รวม 6 cards: profit summary / top sellers / hourly heatmap / product cost coverage / low stock threshold / inline cost editor + Bulk import รองรับ column cost แล้ว (import ราคาทุนพร้อมสินค้าได้)
✅ What Changed
- ["v2.2 \u2014 Cost, Profit, Analytics, Low Stock", "\ud83d\udcb0 A: Cost & Profit Tracking", " - \u0e40\u0e1e\u0e34\u0e48\u0e21 field cost \u0e43\u0e19 product + Excel import column cost", " - Cost badge (\u0e21\u0e38\u0e21\u0e0b\u0e49\u0e32\u0e22\u0e1a\u0e19) + Margin pill (% \u0e01\u0e33\u0e44\u0e23) \u0e43\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32", " - \u0e04\u0e33\u0e19\u0e27\u0e13 profit/order \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 (revenue - cost)", " - \u0e41\u0e2a\u0e14\u0e07 total cost + total profit + margin% \u0e43\u0e19\u0e17\u0e38\u0e01 report", "\ud83d\udcc8 B: Advanced Charts", " - 24-hour heatmap (color levels 0-5, hover tooltip)", " - Top 5 best sellers \u0e1e\u0e23\u0e49\u0e2d\u0e21 profit \u0e41\u0e15\u0e48\u0e25\u0e30\u0e15\u0e31\u0e27", " - 14-day profit trend (Canvas: \u0e23\u0e32\u0e22\u0e44\u0e14\u0e49 vs \u0e15\u0e49\u0e19\u0e17\u0e38\u0e19, dots, legend)", " - Analytics modal 6 cards (\u0e23\u0e27\u0e21 settings)", "\ud83d\udce6 C: Low Stock Alert", " - Pulse animation \u0e01\u0e32\u0e23\u0e4c\u0e14\u0e40\u0e21\u0e37\u0e48\u0e2d stock \u2264 threshold", " - Red badge \u0e21\u0e38\u0e21\u0e02\u0e27\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e08\u0e33\u0e19\u0e27\u0e19\u0e04\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d", " - Top-toast notification \u0e15\u0e2d\u0e19 finalize order", " - Configurable threshold (default 5, persist localStorage)", "\ud83c\udfa8 UI: kawaii pink theme + cards + modals + tables", "\ud83d\udce6 Size: 167KB \u2192 187KB (+20KB)"]
POS Grocery - ร้บบขายของชำ/ค้าปลีก (v2.1)
released 2026-07-08🗣️ User Command
v2.1: bug fix กดคลิ๊กแล้วแอดรัวๆ ให้กด 1 ครั้ง = 1 ชิ้น
🤖 AI Response
แก้ bug ใน long-press logic (เดิม 380ms threshold + interval 180ms = แอดรัวๆ 15+ ครั้ง): (1) เพิ่ม threshold 380ms → 500ms + cancel timer เก่าก่อนตั้งใหม่ (ป้องกัน pointerdown fires หลายครั้ง stack timer) (2) เอา setInterval auto-repeat ออก — long-press trigger add 1 ครั้งต่อการกดค้าง (bulk add ใช้ +3/+5 quick buttons แทน) (3) card.onclick skip ถ้า target เป็น .add-btn/.quick-add-row + skip ถ้า long-press เพิ่ง trigger ไปแล้ว (กัน double-fire) ผลลัพธ์: 1 click = 1 add ทุก scenario (single tap, long press, rapid double tap, different card)
✅ What Changed
- ["v2.1 \u2014 Critical Bug Fix: rapid add bug", "\ud83d\udc1b FIX: 1 click \u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e19\u0e35\u0e49 = 17 addToCart calls (long-press fires too aggressive)", "\u23f1\ufe0f Long-press threshold: 380ms \u2192 500ms (clearer separation between tap and hold)", "\ud83d\udee1\ufe0f Clear stale timer before creating new (prevent pointerdown duplication)", "\ud83d\udeab Removed setInterval auto-repeat (long-press now = single add per press, no spam)", "\ud83c\udfaf card.onclick skips .add-btn/.quick-add-row clicks + skips after long-press triggered", "\u2705 Quick-add buttons +3/+5 remain (use these for bulk add)", "\u2705 Result: 1 click = 1 add (verified across single tap, long press, rapid tap, different card)"]
POS Grocery - ร้บบขายของชำ/ค้าปลีก (v2.0)
released 2026-07-08🗣️ User Command
v2.0: เพิ่ม Smart Receipt + Daily Target + Bulk Import
🤖 AI Response
เพิ่ม 3 features ใหม่: (A) Smart Receipt with LINE OA QR อัตโนมัติ, (B) Daily Target Tracker พร้อม confetti เมื่อถึงเป้า, (C) Bulk Import จาก Excel/CSV รองรับ paste tab-separated พร้อม preview
✅ What Changed
- ["v2.0 \u2014 Smart Receipt + Daily Target + Bulk Import", "\ud83e\uddfe A: Smart Receipt with LINE OA QR \u2014 \u0e2a\u0e23\u0e49\u0e32\u0e07 QR \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e43\u0e19\u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08 (line.me/R/ti/p/
) + fallback API QR + \u0e0b\u0e48\u0e2d\u0e19\u0e43\u0e19\u0e42\u0e2b\u0e21\u0e14 print", "\ud83c\udfaf B: Daily Target Tracker \u2014 top progress bar \u0e41\u0e2a\u0e14\u0e07\u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22 vs \u0e40\u0e1b\u0e49\u0e32 + confetti animation \u0e15\u0e2d\u0e19\u0e16\u0e36\u0e07\u0e40\u0e1b\u0e49\u0e32 + sessionStorage \u0e40\u0e0a\u0e47\u0e04\u0e04\u0e23\u0e31\u0e49\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27\u0e15\u0e48\u0e2d\u0e27\u0e31\u0e19", "\ud83d\udce5 C: Bulk Import \u2014 paste \u0e08\u0e32\u0e01 Excel/Sheets (TSV/CSV) + preview table + smart header detection + new category auto-creation", "\u2699\ufe0f Settings modal \u0e43\u0e2b\u0e21\u0e48 \u2014 \u0e15\u0e31\u0e49\u0e07 LINE OA name/id + daily target \u0e43\u0e19\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19", "\ud83c\udfa8 confetti animation + receipt-qr styling + responsive", "\ud83d\udce6 Size: 156KB \u2192 167KB (+11KB)"]
POS Grocery v1.3 — Minimal modern UI redesign
released 2026-07-08🗣️ User Command
ออกแบบ ปรับ UI UX ให้สวย ใช้ง่ายกว่านี้ อันนี้ดูรกๆไปหน่อย
🤖 AI Response
ลด visual noise — เอาปุ่ม quick-add (+3/+5) ออก, เอา stock text ออก, เอาปุ่ม + ลอยออก, flat design ไม่มี gradient, single accent color (เขียว #0f9d58), เปลี่ยน topbar ให้แบน, stats cards flat, cart summary แบ่ง section ชัดเจน, เพิ่ม breathing room (padding/spacing) + fix bug cart-items ถูกบีบใน landscape (เพิ่ม max-height + overflow ที่ cart-summary)
✅ What Changed
- Product card redesign — เอา quick-add row (+3/+5), + overlay, stock text ออก เหลือแค่ รูป + ชื่อ + ราคา
- Topbar flatter — เอา shadow, ปุ่ม icon โปร่งใส, logo เป็น block เดียว
- Category chips — เปลี่ยน active จากเขียวเป็นดำ flat
- Search bar — พื้นเทาอ่อน, border บาง
- Stats cards — เอา gradient ใช้แบน (ดำ/ส้ม/ขาว)
- Cart summary — flat design, cart-actions row รวมปุ่มพักบิล+ล้าง
- Payment methods — flat row layout ไม่ใช่ column
- Single accent color — เขียวเป็น primary, แดง=ลบ, ส้ม=quick-add, เขียว=action
- Bug fix: cart-items ถูกบีบเหลือ 16px ในแนวนอน → fix flex:1 1 0 + min-height:0 + max-height:55% overflow
- Bug fix: ปุ่ม 'ลบ' สีแดงโผล่ทุกแถว → display:none default, แสดงตอน swipe เท่านั้น
POS Grocery v1.2 — Responsive portrait/landscape phone + tablet
released 2026-07-08🗣️ User Command
ทำให้รอบรับมือถือ หน้าจอ แนวตั้งก็ได้ แนวนอนก็ได้
🤖 AI Response
Auto-detect orientation + body class phone-landscape/landscape/portrait + 2-column layout สำหรับ phone landscape (สินค้าซ้าย + ตะกร้าขวา 340px) + tablet 600-899px media query + toggle cart button + landscape hint banner + compact components ในจอสั้น
✅ What Changed
- JS detectOrientation() — resize + orientationchange listener, ตั้ง body class phone-landscape/landscape/portrait
- CSS @media (max-height: 520px) and (orientation: landscape) — 2-column layout 340px cart + compact topbar
- CSS @media (min-width: 600px) and (max-width: 899px) — tablet 2-column 320px cart
- CSS @media (max-height: 380px) — small landscape phones (เครื่องเล็ก)
- Toggle cart button — ซ่อนตะกร้าในแนวนอนเพื่อขยายพื้นที่สินค้า
- Landscape hint banner — 🖥️ โหมด POS สินค้าทางซ้าย · ตะกร้าทางขวา
- Compact components ในจอแนวนอน — pay-btn เป็น row layout, smaller fonts, summary row บางลง
POS Grocery v1.1 — Touch enhancements + Discount + Park Sale + Scanner + Z-Report
released 2026-07-08🗣️ User Command
ควรเพิ่มอะไร + ขอลองรับการกดทัชสกีนด้วย
🤖 AI Response
เพิ่ม long-press bulk add + swipe-to-delete cart + haptic vibration (Vibration API) + เสียง effects (Web Audio) + ปุ่มตัวเลขใหญ่ (numpad) + สแกนบาร์โค้ดด้วยกล้อง (BarcodeDetector API + manual input fallback) + ระบบส่วนลด (%/บาท) + พักบิล (park sale) + Dark mode toggle + Z-Report ปิดกะ
✅ What Changed
- Long-press bulk add — กดค้างที่การ์ดสินค้า 380ms → เพิ่มอัตโนมัติทุก 180ms
- Swipe-to-delete cart — ลากนิ้วซ้ายบนรายการ ≥80px → ลบ
- Haptic feedback — vibrate(8) ทุก tap + vibrate([30,50,30]) ตอนขายสำเร็จ
- เสียง effects — beep ตอนเพิ่ม + เสียงสแกน + success sound (Web Audio API)
- ปุ่มตัวเลขใหญ่ (numpad) — slide-up จากล่าง พร้อม quick +20/+50/+100/+1000
- Barcode scanner — ปุ่มใน topbar, เปิดกล้องหลัง + BarcodeDetector API + manual input
- ระบบส่วนลด — ปุ่มลัด -5%/-10%/-20% + custom %/จำนวนเงิน
- พักบิล (park sale) — บันทึก cart ปัจจุบันไว้, เปิดบิลกลับมาภายหลังได้
- Dark mode toggle — ปุ่ม 🌙/☀️ ใน topbar + persist localStorage + auto-detect prefers-color-scheme
- Z-Report ปิดกะ — สรุปยอดขายวันนี้ + แยกตามช่องทาง + top sellers + พิมพ์ได้
POS Grocery — ระบบขายของชำหน้าร้าน
released 2026-07-08🗣️ User Command
ทำระบบ POS ขายของชำ/ค้าปลีก มีรูปสินค้า รองรับมือถือ สแกน QR Code เข้าระบบ
🤖 AI Response
vanilla HTML + CSS + JS single-file 29MB (รูป 28 ภาพ inline base64) — 60 สินค้าจริง 11 หมวด + สแกนบาร์โค้ด + QR login + responsive + Dark mode + ส่วนลด + พักบิล + Z-Report
✅ What Changed
- ["Single index.html 29MB self-contained (28 \u0e20\u0e32\u0e1e inline base64)", "60 \u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e43\u0e19 11 \u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48 (\u0e1c\u0e31\u0e01/\u0e1c\u0e25\u0e44\u0e21\u0e49, \u0e19\u0e21/\u0e44\u0e02\u0e48, \u0e02\u0e19\u0e21\u0e1b\u0e31\u0e07, \u0e1a\u0e30\u0e2b\u0e21\u0e35\u0e48, \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2a\u0e31\u0e15\u0e27\u0e4c, \u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21, \u0e02\u0e19\u0e21, \u0e02\u0e49\u0e32\u0e27/\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e1b\u0e23\u0e38\u0e07, \u0e02\u0e2d\u0e07\u0e43\u0e0a\u0e49, \u0e22\u0e32/\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e)", "Long-press bulk add \u2014 \u0e01\u0e14\u0e04\u0e49\u0e32\u0e07 380ms \u2192 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e17\u0e38\u0e01 180ms", "Swipe-to-delete cart \u2014 \u0e25\u0e32\u0e01\u0e19\u0e34\u0e49\u0e27\u0e0b\u0e49\u0e32\u0e22 \u226580px \u2192 \u0e25\u0e1a", "Haptic feedback \u2014 Vibration API \u0e17\u0e38\u0e01 tap + success", "Web Audio API \u2014 \u0e40\u0e2a\u0e35\u0e22\u0e07 effects (beep/scan/success)", "Numpad slide-up \u2014 \u0e1b\u0e38\u0e48\u0e21\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e43\u0e2b\u0e0d\u0e48 + quick +20/+50/+100", "Barcode scanner \u2014 \u0e01\u0e25\u0e49\u0e2d\u0e07\u0e2b\u0e25\u0e31\u0e07 + BarcodeDetector API + manual input", "Discount system \u2014 -5%/-10%/-20% + custom %/\u0e1a\u0e32\u0e17", "Park sale \u2014 \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 cart \u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19 + \u0e40\u0e1b\u0e34\u0e14\u0e1a\u0e34\u0e25\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32", "Dark mode \u2014 CSS variable + body class + localStorage persist", "Z-Report \u0e1b\u0e34\u0e14\u0e01\u0e30 \u2014 \u0e2a\u0e23\u0e38\u0e1b\u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49 + \u0e41\u0e22\u0e01\u0e15\u0e32\u0e21\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07", "Responsive \u2014 orientation detect + 2-col phone-landscape + tablet 600-899px", "Minimal UI v1.3 \u2014 flat design, single accent #0f9d58, fix cart-items bug", "QR login \u2014 qrcode.js \u0e2a\u0e41\u0e01\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d", "Chart.js \u2014 \u0e01\u0e23\u0e32\u0e1f\u0e41\u0e17\u0e48\u0e07 7 \u0e27\u0e31\u0e19", "localStorage persist \u2014 \u0e15\u0e30\u0e01\u0e23\u0e49\u0e32+\u0e2a\u0e15\u0e4a\u0e2d\u0e01+\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19", "\u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e44\u0e14\u0e49 \u2014 window.print + print CSS", "\ud83d\udee1 Ship.py-style \u2014 self-contained file, all assets inlined, live_url INSIDE codehub.sj88ai.com"]