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

apps/spa/src/pages/CouponsPage.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
+import EmptyState from '../components/EmptyState'
 import { API_BASE, type Category } from '../types'
 import { Ticket, Copy, CheckCircle2, ArrowRight } from 'lucide-react'
 
@@ -61,15 +62,15 @@ export default function CouponsPage() {
   }
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen bg-pop-bg">
       <Navbar categories={categories} />
 
       <main className="max-w-6xl mx-auto px-6 pt-32 pb-24 min-h-[70vh]">
         <div className="text-center space-y-4 mb-16">
-          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-cyan-glow to-blue-500 bg-clip-text text-transparent">
+          <h1 className="text-4xl md:text-5xl font-bold text-pop-black">
             Exclusive Offers
           </h1>
-          <p className="text-slate-400 max-w-2xl mx-auto">
+          <p className="text-spa-stone max-w-2xl mx-auto">
             คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
           </p>
         </div>
@@ -77,63 +78,58 @@ export default function CouponsPage() {
         {loading ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {[1, 2, 3].map(i => (
-              <div key={i} className="h-64 bg-white/5 rounded-3xl animate-pulse" />
+              <div key={i} className="h-64 bg-spa-stone/10 rounded-3xl animate-pulse" />
             ))}
           </div>
         ) : coupons.length === 0 ? (
-          <div className="text-center py-20 bg-night-900/50 rounded-3xl border border-white/5">
-            <Ticket className="w-16 h-16 text-slate-600 mx-auto mb-4" />
-            <h2 className="text-xl font-bold text-white mb-2">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
-            <p className="text-slate-400 mb-6">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
-            <button 
-              onClick={() => navigate('/shop')}
-              className="px-8 py-3 bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900 font-bold rounded-xl transition-all"
-            >
-              ไปช้อปปิ้งกันก่อน
-            </button>
-          </div>
+          <EmptyState 
+            title="ยังไม่มีคูปองส่วนลดในขณะนี้"
+            message="กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง"
+            actionText="ไปช้อปปิ้งกันก่อน"
+            actionLink="/shop"
+          />
         ) : (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {coupons.map(coupon => (
               <div 
                 key={coupon.id}
-                className="group relative bg-night-900 border border-white/10 rounded-3xl overflow-hidden hover:border-cyan-glow/50 transition-all duration-500"
+                className="group relative bg-white border border-spa-stone/10 rounded-3xl overflow-hidden hover:border-spa-forest transition-all duration-500 shadow-sm hover:shadow-md"
               >
                 {/* Decoration */}
-                <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-glow/10 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2" />
+                <div className="absolute top-0 right-0 w-32 h-32 bg-spa-sage/20 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2" />
                 
                 <div className="p-8 space-y-6 relative z-10">
                   <div className="flex items-start justify-between">
-                    <div className="w-12 h-12 rounded-xl bg-cyan-glow/10 text-cyan-glow flex items-center justify-center border border-cyan-glow/20">
+                    <div className="w-12 h-12 rounded-xl bg-spa-sage/30 text-spa-forest flex items-center justify-center border border-spa-stone/10">
                       <Ticket className="w-6 h-6" />
                     </div>
                     {coupon.expiresAt && (
-                      <span className="text-[10px] font-bold text-amber-400 bg-amber-500/10 px-2 py-1 rounded-md uppercase tracking-wider">
+                      <span className="text-[10px] font-bold text-rose-500 bg-rose-500/10 px-2 py-1 rounded-md uppercase tracking-wider">
                         หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
                       </span>
                     )}
                   </div>
 
                   <div>
-                    <h3 className="text-3xl font-black text-white mb-1">
+                    <h3 className="text-3xl font-black text-pop-black mb-1">
                       {formatDiscount(coupon.type, coupon.value)}
                     </h3>
-                    <p className="text-sm text-slate-400">
+                    <p className="text-sm text-spa-stone">
                       เมื่อซื้อครบ {coupon.minPurchase} บาท
                     </p>
                   </div>
 
-                  <div className="flex items-center gap-2 bg-night-950 p-1 pl-4 rounded-xl border border-white/5">
-                    <span className="flex-1 font-mono text-cyan-glow font-bold tracking-widest uppercase">
+                  <div className="flex items-center gap-2 bg-spa-light p-1 pl-4 rounded-xl border border-spa-stone/20">
+                    <span className="flex-1 font-mono text-spa-forest font-bold tracking-widest uppercase">
                       {coupon.code}
                     </span>
                     <button
                       onClick={() => handleCopy(coupon.code)}
-                      className="p-3 hover:bg-white/5 rounded-lg text-slate-400 hover:text-white transition-all group/btn"
+                      className="p-3 hover:bg-spa-stone/10 rounded-lg text-spa-stone hover:text-spa-forest transition-all group/btn"
                       title="Copy Code"
                     >
                       {copiedCode === coupon.code ? (
-                        <CheckCircle2 className="w-5 h-5 text-emerald-400" />
+                        <CheckCircle2 className="w-5 h-5 text-emerald-500" />
                       ) : (
                         <Copy className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
                       )}
@@ -142,7 +138,7 @@ export default function CouponsPage() {
 
                   <button
                     onClick={() => handleUseNow(coupon.code)}
-                    className="w-full py-4 bg-white/5 hover:bg-cyan-glow text-white hover:text-night-900 font-bold rounded-xl flex items-center justify-center gap-2 transition-all duration-300"
+                    className="w-full py-4 bg-spa-forest text-white hover:bg-spa-stone font-bold rounded-xl flex items-center justify-center gap-2 transition-all duration-300 shadow-sm"
                   >
                     ใช้คูปองนี้เลย
                     <ArrowRight className="w-4 h-4" />
@@ -150,8 +146,8 @@ export default function CouponsPage() {
                 </div>
 
                 {/* Scalloped edge effect */}
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-r border-white/10" />
-                <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-l border-white/10" />
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-pop-bg rounded-full border-r border-spa-stone/10" />
+                <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-pop-bg rounded-full border-l border-spa-stone/10" />
               </div>
             ))}
           </div>