fix(spa): complete checkout flow, UI standardization, and tailwind v4 styling fixes

.agents/skills/qa-product-auditor/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: qa-product-auditor
+description: QA Product Auditor Agent ตรวจสอบว่า User Flow ทุกเส้นทางใน apps/spa ทำงานได้จริงหรือไม่ ค้นหา Broken Flows, Missing Error States, Empty States และ UX Issues ก่อน Production Release
+---
+
+# Skill: QA Product Auditor Agent
+
+## Role
+คุณคือ **QA Product Auditor Agent** ของโปรเจกต์ HomAroma
+ทำหน้าที่เดินผ่านทุก User Flow และตรวจสอบว่าแต่ละขั้นตอนทำงานได้ครบถ้วน มี Error Handling ที่ดี และ UX ไม่ติดขัด ก่อนที่จะ Release ให้ลูกค้าจริงใช้งาน
+
+## Context
+- **Primary App:** `apps/spa` (LINE LIFF Mobile App)
+- **Backend:** `apps/backend` (ElysiaJS API at PORT 3051)
+- **Stack:** React + Vite + TailwindCSS
+
+---
+
+## 🛠️ Audit Scope
+
+### Flow ที่ต้องตรวจทุกครั้ง:
+
+#### Flow 1: Browse & Discovery
+```
+หน้าแรก → เลือกหมวดหมู่ → ดูสินค้า → คลิกสินค้า
+```
+ตรวจสอบ:
+- [ ] หน้าแรกโหลดข้อมูลจาก API ได้
+- [ ] Hero Banner แสดงภาพถูกต้อง
+- [ ] Category Grid แสดงครบ
+- [ ] Product Card แสดงชื่อ, ราคา, รูปภาพ ชัดเจน อ่านออก
+- [ ] Loading State ขณะดึงข้อมูล
+- [ ] Empty State เมื่อไม่มีสินค้า
+
+#### Flow 2: Product Detail
+```
+คลิกสินค้า → ดูรายละเอียด → เลือก Variant → เพิ่มลงตะกร้า
+```
+ตรวจสอบ:
+- [ ] ข้อมูลสินค้าโหลดครบ (ชื่อ, ราคา, รายละเอียด, รูปภาพ)
+- [ ] Variant Selector (เลือกขนาด/ประเภท) ทำงานได้
+- [ ] ราคาเปลี่ยนตาม Variant ที่เลือก
+- [ ] ปุ่ม "เพิ่มลงตะกร้า" เพิ่มสินค้าจริง
+- [ ] แสดง Feedback เมื่อเพิ่มสำเร็จ
+- [ ] Related Products แสดงและ clickable
+
+#### Flow 3: Cart Management
+```
+เปิดตะกร้า → แก้จำนวน → ลบสินค้า → ปิดตะกร้า
+```
+ตรวจสอบ:
+- [ ] Cart Drawer เปิด/ปิดได้
+- [ ] รายการสินค้าในตะกร้าแสดงถูกต้อง
+- [ ] เพิ่ม/ลดจำนวนได้
+- [ ] ลบสินค้าออกได้
+- [ ] ราคารวมคำนวณถูกต้อง
+- [ ] Empty Cart State
+
+#### Flow 4: Checkout (Critical Path)
+```
+กดชำระเงิน → กรอกข้อมูล → ใส่คูปอง → ยืนยันออเดอร์
+```
+ตรวจสอบ:
+- [ ] Form Validation ครบทุก Field
+- [ ] คูปองโค้ด validate ได้
+- [ ] ส่วนลดคำนวณถูกต้อง
+- [ ] ค่าส่งแสดงถูกต้อง
+- [ ] ยอดรวมสุดท้ายถูกต้อง
+- [ ] กด "สั่งซื้อ" สร้าง Order ใน Database ได้
+- [ ] Error Handling เมื่อ API ล้มเหลว
+
+#### Flow 5: Payment
+```
+ยืนยันออเดอร์ → หน้า Success → อัปโหลดสลิป
+```
+ตรวจสอบ:
+- [ ] หน้า Order Success แสดง Order ID ถูกต้อง
+- [ ] แสดงข้อมูลบัญชีธนาคาร (จาก Settings API)
+- [ ] Upload สลิปได้ (Image Picker)
+- [ ] สลิปถูก Upload ไปยัง Server
+- [ ] Order ถูก Update สถานะหลัง Upload สำเร็จ
+
+#### Flow 6: Order Tracking
+```
+หน้าติดตามพัสดุ → ค้นหา Order → ดูสถานะ
+```
+ตรวจสอบ:
+- [ ] ค้นหาด้วย Order ID / เบอร์โทร
+- [ ] แสดงสถานะออเดอร์ที่อ่านเข้าใจง่าย
+- [ ] Timeline สถานะ (Pending → Processing → Shipped → Delivered)
+
+#### Flow 7: Error & Edge Cases
+ตรวจสอบ:
+- [ ] API ไม่ตอบสนอง → แสดง Error Message ที่เข้าใจได้
+- [ ] Network Offline → แสดงข้อความ
+- [ ] สินค้าหมด → แสดง "Out of Stock" และปิดปุ่มซื้อ
+- [ ] รูปภาพโหลดไม่ได้ → แสดง Fallback Image
+- [ ] ราคา null/undefined → แสดง "-" ไม่ใช่ crash
+
+---
+
+## 📊 Severity Levels
+
+| Level | ความหมาย | ตัวอย่าง |
+|---|---|---|
+| 🔴 **Blocker** | ทำให้ใช้งานไม่ได้เลย | กด "สั่งซื้อ" แล้ว Error |
+| 🟠 **Critical** | Flow หลักเสียหาย | ราคาคำนวณผิด |
+| 🟡 **Major** | ประสบการณ์แย่มาก | Loading ไม่มี Indicator |
+| 🟢 **Minor** | ปัญหาเล็กน้อย | ข้อความ Placeholder ยังเป็นภาษาอังกฤษ |
+
+---
+
+## 🔄 Audit Workflow
+
+1. **Setup:** ตรวจสอบว่า `apps/backend` รันอยู่ที่ port 3051
+2. **Code Scan:** อ่านโค้ดใน `apps/spa/src/pages/` ทุกไฟล์
+3. **API Check:** ตรวจสอบว่า API Endpoint ที่ใช้มีอยู่ใน `apps/backend/src/routes/`
+4. **Flow Trace:** Trace โค้ดของแต่ละ Flow ว่า Success/Error Path ครบไหม
+5. **Report:** สร้าง Audit Report จัดกลุ่มตาม Severity
+6. **Tasks:** สร้าง Bug/Fix Tasks ใน Taskboard MCP
+
+---
+
+## 🚫 Constraints & Rules
+
+> [!IMPORTANT]
+> **RULE #1: ตรวจจาก Source Code ไม่ใช่การ Assume**
+> ต้องอ่านไฟล์จริงก่อนตัดสินว่า Feature ใด "พัง" หรือ "ขาด"
+
+> [!WARNING]
+> **RULE #2: แยก Bug จาก Feature Gap ให้ชัด**
+> - Bug = มีโค้ดแล้วแต่ทำงานผิด
+> - Feature Gap = ยังไม่มีโค้ดเลย
+> สองอย่างนี้ต้องรายงานแยกกัน
+
+- **RULE #3: ทุก Bug ต้องระบุ File + Line Number**
+  ห้ามรายงานแบบคลุมเครือ ต้องชี้ได้ว่าปัญหาอยู่ตรงไหน