From 8c0b5a2a3419a7f195f544232deabc10d33dec0b Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 15 Jun 2026 05:04:10 -0400
Subject: [PATCH] x

---
 apps/spa/src/pages/ProfilePage.tsx | 96 ++++++++++++++++++------------
 1 file changed, 59 insertions(+), 37 deletions(-)

diff --git a/apps/spa/src/pages/ProfilePage.tsx b/apps/spa/src/pages/ProfilePage.tsx
index aa51d8a..f0b2e79 100644
--- a/apps/spa/src/pages/ProfilePage.tsx
+++ b/apps/spa/src/pages/ProfilePage.tsx
@@ -331,30 +331,30 @@ export default function ProfilePage() {
           /* Logged In Dashboard Layout */
           <div className="space-y-10 animate-fade-in">
             {/* Header Profile Banner */}
-            <div className="bg-white rounded-3xl border border-spa-stone/10 p-8 flex flex-col md:flex-row justify-between items-center gap-6 shadow-sm relative overflow-hidden">
-              <div className="absolute top-0 inset-x-0 h-1.5 bg-gradient-to-r from-spa-sage via-spa-forest to-spa-stone opacity-50" />
+            <div className="bg-white rounded-2xl border border-spa-stone/10 p-5 sm:p-6 flex flex-col sm:flex-row justify-between items-center sm:items-center gap-4 shadow-sm relative overflow-hidden">
+              <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-spa-sage via-spa-forest to-spa-stone opacity-40" />
               
               {/* User Avatar & Info */}
-              <div className="flex flex-col md:flex-row items-center gap-5 text-center md:text-left">
-                <div className="w-24 h-24 rounded-full overflow-hidden border-2 border-spa-forest/20 shadow-md">
+              <div className="flex items-center gap-4 w-full sm:w-auto">
+                <div className="w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden border border-spa-forest/20 shadow-sm shrink-0">
                   <img 
                     src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`} 
                     alt="LINE Profile" 
                     className="w-full h-full object-cover" 
                   />
                 </div>
-                <div className="space-y-1.5">
-                  <h1 className="text-3xl font-bold text-pop-black">{customer.displayName}</h1>
-                  <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 text-xs font-semibold text-spa-stone">
+                <div className="space-y-1 min-w-0">
+                  <h1 className="text-xl sm:text-2xl font-bold text-pop-black truncate">{customer.displayName}</h1>
+                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] font-semibold text-spa-stone">
                     {dbCustomer?.phone && (
-                      <span className="flex items-center gap-1.5 justify-center md:justify-start">
-                        <Phone className="w-3.5 h-3.5" />
+                      <span className="flex items-center gap-1">
+                        <Phone className="w-3 h-3 text-spa-stone/70" />
                         <span>{dbCustomer.phone}</span>
                       </span>
                     )}
                     {dbCustomer?.email && (
-                      <span className="flex items-center gap-1.5 justify-center md:justify-start">
-                        <Mail className="w-3.5 h-3.5" />
+                      <span className="flex items-center gap-1">
+                        <Mail className="w-3 h-3 text-spa-stone/70" />
                         <span>{dbCustomer.email}</span>
                       </span>
                     )}
@@ -362,67 +362,89 @@ export default function ProfilePage() {
                 </div>
               </div>
 
-              {/* Point Cards */}
-              <div className="bg-gradient-to-br from-spa-forest to-spa-stone text-white p-6 rounded-2xl w-full md:w-auto min-w-[220px] text-center space-y-1.5 shadow-md border border-white/5 relative overflow-hidden">
-                <div className="absolute -right-8 -bottom-8 w-24 h-24 bg-white/5 rounded-full" />
-                <p className="text-[10px] uppercase font-bold tracking-widest text-spa-sage">คะแนนสะสมของคุณ</p>
-                <div className="text-4xl font-extrabold flex items-center justify-center gap-1">
-                  <span>{dbCustomer?.points ?? customer.points ?? 0}</span>
+              {/* Point Card Compact */}
+              <div className="bg-spa-light border border-spa-stone/10 rounded-xl px-4 py-3 flex items-center justify-between gap-4 w-full sm:w-auto min-w-[200px] shrink-0">
+                <div className="flex items-center gap-2.5">
+                  <div className="w-8 h-8 rounded-full bg-spa-forest/10 flex items-center justify-center shrink-0">
+                    <Award className="w-4.5 h-4.5 text-spa-forest" />
+                  </div>
+                  <div className="text-left">
+                    <p className="text-[9px] uppercase font-bold tracking-wider text-spa-stone">คะแนนสะสมของคุณ</p>
+                    <p className="text-lg font-extrabold text-pop-black leading-none mt-0.5">
+                      {dbCustomer?.points ?? customer.points ?? 0} <span className="text-[10px] font-semibold text-spa-stone ml-0.5">คะแนน</span>
+                    </p>
+                  </div>
                 </div>
-                <p className="text-[10px] text-spa-sage/95 font-semibold">1 คะแนนมีค่าเท่ากับ ฿1 สำหรับใช้เป็นส่วนลด</p>
               </div>
             </div>
 
-            {/* Dashboard Tabs & Content */}
-            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
+            {/* Dashboard Horizontal Tabs & Content */}
+            <div className="space-y-6">
               
-              {/* Vertical Menu Tabs */}
-              <div className="bg-white rounded-2xl border border-spa-stone/10 p-3 shadow-sm space-y-1">
+              {/* Horizontal Tab UI */}
+              <div className="border-b border-spa-stone/10 flex justify-between sm:justify-start gap-2 sm:gap-8 overflow-x-auto no-scrollbar">
                 <button
                   onClick={() => setActiveTab('orders')}
-                  className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
+                  className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
                     activeTab === 'orders'
-                      ? 'bg-spa-forest text-white shadow-sm'
-                      : 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
+                      ? 'text-spa-forest'
+                      : 'text-spa-stone hover:text-pop-black'
                   }`}
                 >
-                  <Package className="w-4.5 h-4.5" />
+                  <Package className="w-4 h-4" />
                   <span>ประวัติการสั่งซื้อ</span>
-                  <span className="ml-auto bg-spa-sage/20 text-[10px] px-2 py-0.5 rounded-full font-extrabold text-spa-forest">
+                  <span className={`text-[9px] px-1.5 py-0.5 rounded-full font-extrabold transition-colors ${
+                    activeTab === 'orders'
+                      ? 'bg-spa-forest/10 text-spa-forest'
+                      : 'bg-spa-stone/10 text-spa-stone'
+                  }`}>
                     {orders.length}
                   </span>
+                  {activeTab === 'orders' && (
+                    <div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
+                  )}
                 </button>
 
                 <button
                   onClick={() => setActiveTab('addresses')}
-                  className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
+                  className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
                     activeTab === 'addresses'
-                      ? 'bg-spa-forest text-white shadow-sm'
-                      : 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
+                      ? 'text-spa-forest'
+                      : 'text-spa-stone hover:text-pop-black'
                   }`}
                 >
-                  <MapPin className="w-4.5 h-4.5" />
+                  <MapPin className="w-4 h-4" />
                   <span>สมุดที่อยู่จัดส่ง</span>
-                  <span className="ml-auto bg-spa-sage/20 text-[10px] px-2 py-0.5 rounded-full font-extrabold text-spa-forest">
+                  <span className={`text-[9px] px-1.5 py-0.5 rounded-full font-extrabold transition-colors ${
+                    activeTab === 'addresses'
+                      ? 'bg-spa-forest/10 text-spa-forest'
+                      : 'bg-spa-stone/10 text-spa-stone'
+                  }`}>
                     {addresses.length}
                   </span>
+                  {activeTab === 'addresses' && (
+                    <div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
+                  )}
                 </button>
 
                 <button
                   onClick={() => setActiveTab('settings')}
-                  className={`w-full py-3 px-4 rounded-xl font-bold text-left text-sm flex items-center gap-3 transition-all ${
+                  className={`pb-3 px-2 text-xs sm:text-sm font-bold flex items-center justify-center gap-2 transition-all relative shrink-0 ${
                     activeTab === 'settings'
-                      ? 'bg-spa-forest text-white shadow-sm'
-                      : 'text-spa-stone hover:bg-spa-light hover:text-pop-black'
+                      ? 'text-spa-forest'
+                      : 'text-spa-stone hover:text-pop-black'
                   }`}
                 >
-                  <Settings className="w-4.5 h-4.5" />
+                  <Settings className="w-4 h-4" />
                   <span>ข้อมูลติดต่อของฉัน</span>
+                  {activeTab === 'settings' && (
+                    <div className="absolute bottom-0 inset-x-0 h-0.5 bg-spa-forest rounded-full" />
+                  )}
                 </button>
               </div>
 
               {/* Tab Display Area */}
-              <div className="lg:col-span-3 space-y-8">
+              <div className="space-y-8">
                 
                 {/* 1. ORDERS TAB */}
                 {activeTab === 'orders' && (