feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.

Frontend-Learner/pages/browse/discovery.vue

@@ -150,39 +150,26 @@ onMounted(() => {
 
       <!-- Top Header Area -->
       <div class="flex flex-col gap-6 mb-10">
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
-          <!-- Title -->
-          <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
-            <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
-            {{ $t('discovery.title') }}
-          </h1>
-
-          <!-- Right Side: Search -->
-          <div class="flex items-center gap-3 w-full md:w-auto">
-            <q-input
-              v-model="searchQuery"
-              dense
-              outlined
-              rounded
-              :placeholder="$t('discovery.searchPlaceholder')"
-              class="w-full md:w-72 search-input shadow-sm"
-              bg-color="transparent"
-            >
-              <template v-slot:prepend>
-                <q-icon name="search" class="text-slate-400" />
-              </template>
-            </q-input>
+        <div class="flex items-start gap-4 mb-4">
+          <span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
+          <div>
+            <h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
+              {{ $t('discovery.title') }}
+            </h1>
+            <p v-if="filteredCourses.length > 0" class="text-slate-500 dark:text-slate-400 mt-1 font-medium">
+              พบทั้งหมด <span class="text-blue-600 font-bold leading-none">{{ filteredCourses.length }}</span> รายการ
+            </p>
           </div>
         </div>
 
         <!-- Unified Filter Section: Categories -->
-        <div class="flex flex-wrap items-center gap-2">
+        <div class="bg-white dark:bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm">
            <q-btn
              flat
              rounded
              dense
-             class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
-             :class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
+             class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+             :class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
              @click="selectedCategoryIds = []"
              :label="$t('discovery.showAll')"
            />
@@ -192,8 +179,8 @@ onMounted(() => {
              flat
              rounded
              dense
-             class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
-             :class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
+             class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+             :class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
              @click="toggleCategory(cat.id)"
              :label="getLocalizedText(cat.name)"
            />

Frontend-Learner/pages/dashboard/index.vue

@@ -32,7 +32,7 @@ onMounted(async () => {
   try {
     const [catRes, enrollRes, courseRes] = await Promise.all([
       fetchCategories(),
-      fetchEnrolledCourses({ limit: 3, status: 'IN_PROGRESS' }), // Fetch recent enrolled
+      fetchEnrolledCourses({ limit: 10 }), // Fetch more enrolled courses for library section
       fetchCourses({ limit: 3, random: true, forceRefresh: true, is_recommended: true }) // Fetch 3 Recommended Courses
     ])
 
@@ -46,19 +46,33 @@ onMounted(async () => {
     
     // Map Enrolled Courses
     if (enrollRes.success && enrollRes.data) {
-       enrolledCourses.value = enrollRes.data.map((item: any) => ({
+       // Sort by last_accessed_at descending (Newest first)
+       const sortedEnrollments = [...enrollRes.data].sort((a, b) => {
+         const dateA = new Date(a.last_accessed_at || a.enrolled_at).getTime()
+         const dateB = new Date(b.last_accessed_at || b.enrolled_at).getTime()
+         return dateB - dateA
+       })
+
+       enrolledCourses.value = sortedEnrollments.map((item: any) => ({
          id: item.course_id,
          title: item.course.title,
          thumbnail_url: item.course.thumbnail_url,
          progress: item.progress_percentage || 0,
          total_lessons: item.course.total_lessons || 10,
-         completed_lessons: Math.floor((item.progress_percentage / 100) * (item.course.total_lessons || 10))
+         completed_lessons: Math.floor((item.progress_percentage / 100) * (item.course.total_lessons || 10)),
+         // For CourseCard compatibility in library section
+         category: catMap.get(item.course.category_id),
+         lessons: item.course.total_lessons || 0,
+         image: item.course.thumbnail_url,
+         enrolled: true
        }))
+
+       // Update libraryCourses with only 2 courses
+       libraryCourses.value = enrolledCourses.value.slice(0, 2)
     }
 
-    // Map Recommended/Library Courses
+    // Map Recommended Courses
     if (courseRes.success && courseRes.data) {
-       // Use fetched courses for recommended section
        recommendedCourses.value = courseRes.data.map((c: any) => ({
           id: c.id,
           title: c.title,
@@ -70,9 +84,6 @@ onMounted(async () => {
           price: c.price, 
           is_free: c.is_free
        }))
-
-       // Just for demo, use same data for library if needed or fetch separately
-       libraryCourses.value = courseRes.data.slice(0, 2)
     }
 
   } catch (err) {
@@ -93,7 +104,46 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
     
 
 
-    <div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
+    <div class="container mx-auto px-6 md:px-12 space-y-16 mt-10">
+        <!-- 1. Dashboard Hero Banner (Refined) -->
+        <section class="relative overflow-hidden bg-gradient-to-br from-white to-slate-50 rounded-[2rem] py-10 md:py-14 px-8 md:px-12 shadow-sm border border-slate-100 flex flex-col items-center text-center">
+            <!-- Subtle Decorative Elements -->
+            <div class="absolute top-[-20%] left-[-10%] w-[300px] h-[300px] bg-blue-500/5 rounded-full blur-3xl -z-10" />
+            <div class="absolute bottom-[-20%] right-[-10%] w-[300px] h-[300px] bg-indigo-500/5 rounded-full blur-3xl -z-10" />
+            
+            <div class="max-w-2xl space-y-6 relative z-10">
+
+                
+                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 leading-[1.5] tracking-tight">
+                    อัปสกิลของคุณต่อเนื่อง 
+                    <span class="inline-block text-blue-600 mt-1 md:mt-2">เพื่อเป้าหมายที่วางไว้</span>
+                </h1>
+                
+                <p class="text-slate-500 font-medium text-base md:text-lg max-w-xl mx-auto leading-relaxed">
+                    วันนี้คุณเรียนไปกี่นาทีแล้ว? มาสร้างนิสัยการเรียนรู้ที่ยอดเยี่ยมกันเถอะ เรามีคอร์สแนะนำใหม่ๆ มากมายรอคุณอยู่
+                </p>
+                
+                <div class="flex flex-wrap justify-center gap-4 pt-4">
+                    <q-btn 
+                        unelevated 
+                        rounded 
+                        color="primary" 
+                        label="ไปที่คอร์สเรียนของฉัน" 
+                        class="px-8 h-[48px] font-bold no-caps shadow-lg shadow-blue-500/10 hover:-translate-y-0.5 transition-all text-sm"
+                        to="/dashboard/my-courses"
+                    />
+                    <q-btn 
+                        outline 
+                        rounded 
+                        color="primary" 
+                        label="ค้นหาคอร์สใหม่" 
+                        class="px-8 h-[48px] font-bold no-caps hover:bg-white transition-all border-1 text-sm"
+                        style="border-width: 1.5px;"
+                        to="/browse/discovery"
+                    />
+                </div>
+            </div>
+        </section>
 
         <!-- 2. Continue Learning Section -->
         <section v-if="enrolledCourses.length > 0">
@@ -106,11 +156,12 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
 
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 <!-- Hero Card (Left) -->
-                <div v-if="heroCourse" class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white shadow-sm border border-gray-100 hover:shadow-md transition-all h-[320px]">
+                <div v-if="heroCourse" 
+                     class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white shadow-sm border border-gray-100 hover:shadow-md transition-all h-[320px]"
+                     @click="navigateTo(`/classroom/learning?course_id=${heroCourse.id}`)">
                     <img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
                     
                     <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
-                        <div class="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
                         <h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
                         
                         <!-- Progress -->
@@ -119,10 +170,15 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                                 <span>{{ heroCourse.progress }}%</span>
                             </div>
                             <div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
-                                <div class="h-full bg-blue-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
+                                <div class="h-full rounded-full transition-all duration-500" 
+                                     :class="heroCourse.progress === 100 ? 'bg-emerald-500' : 'bg-blue-500'"
+                                     :style="{ width: `${heroCourse.progress}%` }"></div>
                             </div>
                             <div class="mt-4 flex justify-end">
-                                <span class="text-white font-bold text-sm hover:underline">{{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
+                                <span class="font-bold text-sm hover:underline transition-colors"
+                                      :class="heroCourse.progress === 100 ? 'text-emerald-400' : 'text-white'">
+                                    {{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}
+                                </span>
                             </div>
                         </div>
                     </div>
@@ -139,10 +195,16 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                              
                              <div class="mt-auto">
                                 <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
-                                    <div class="h-full bg-blue-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
+                                    <div class="h-full rounded-full transition-all duration-500" 
+                                         :class="course.progress === 100 ? 'bg-emerald-500' : 'bg-blue-600'"
+                                         :style="{ width: `${course.progress}%` }"></div>
                                 </div>
                                 <div class="flex justify-end items-center text-xs">
-                                    <span class="text-blue-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">{{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
+                                    <span class="font-bold cursor-pointer hover:underline transition-colors" 
+                                          :class="course.progress === 100 ? 'text-emerald-600' : 'text-blue-600'"
+                                          @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">
+                                        {{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}
+                                    </span>
                                 </div>
                              </div>
                         </div>
@@ -170,6 +232,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                   :key="course.id"
                   v-bind="course"
                   :image="course.thumbnail_url"
+                  hide-progress
+                  hide-actions
                   class="h-full md:col-span-1"
                 />
 

Frontend-Learner/pages/dashboard/my-courses.vue

@@ -151,22 +151,41 @@ const validCourseId = computed(() => {
 
 
     <!-- Page Header & Filters (Unified Layout) -->
-    <div class="flex flex-col gap-6 mb-10">
-       <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
-          <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
-            <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
-            {{ $t('sidebar.myCourses') }}
-          </h1>
+    <div class="mb-8">
+       <div class="flex items-start gap-4 mb-2">
+          <span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
+          <div>
+            <h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
+              {{ $t('sidebar.myCourses') }}
+            </h1>
+          </div>
+       </div>
+
+       <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
+          <!-- Filter Tabs (Horizontal Bar) -->
+          <div class="bg-white dark:bg-slate-900/50 p-1.5 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex items-center gap-1 shadow-sm">
+            <q-btn
+              v-for="filter in ['all', 'progress', 'completed']"
+              :key="filter"
+              @click="activeFilter = filter as any"
+              flat
+              rounded
+              dense
+              class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+              :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
+              :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
+            />
+          </div>
 
           <!-- Search Input -->
-          <div class="flex items-center gap-3 w-full md:w-auto">
+          <div class="w-full md:w-72">
             <q-input
               v-model="searchQuery"
               dense
               outlined
               rounded
               :placeholder="$t('discovery.searchPlaceholder')"
-              class="w-full md:w-72 search-input shadow-sm"
+              class="search-input shadow-sm"
               bg-color="transparent"
             >
               <template v-slot:prepend>
@@ -175,21 +194,6 @@ const validCourseId = computed(() => {
             </q-input>
           </div>
        </div>
-
-       <!-- Filter Tabs (Horizontal Bar) -->
-       <div class="flex flex-wrap items-center gap-2">
-         <q-btn
-           v-for="filter in ['all', 'progress', 'completed']"
-           :key="filter"
-           @click="activeFilter = filter as any"
-           flat
-           rounded
-           dense
-           class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
-           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
-           :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
-         />
-       </div>
     </div>
 
     <!-- Courses Grid -->

Frontend-Learner/pages/dashboard/profile.vue

@@ -15,6 +15,7 @@ const { locale, t } = useI18n()
 
 
 const isEditing = ref(false)
+const activeTab = ref<'general' | 'security'>('general')
 const isProfileSaving = ref(false)
 const isPasswordSaving = ref(false)
 const isSendingVerify = ref(false)
@@ -204,20 +205,24 @@ onMounted(async () => {
 <template>
   <div class="page-container">
     
-    <div class="flex items-center justify-between mb-8 md:mb-10">
+    <div class="flex items-center justify-between mb-8">
       <div class="flex items-center gap-4">
         <q-btn
           v-if="isHydrated && isEditing"
           flat
           round
           icon="arrow_back"
-          color="slate-700"
           class="dark:text-white"
           @click="toggleEdit(false)"
         />
-        <h1 class="text-3xl font-black text-slate-900 dark:text-white">
-          {{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
-        </h1>
+        <div class="flex items-start gap-4">
+          <span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
+          <div>
+            <h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
+              {{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
+            </h1>
+          </div>
+        </div>
       </div>
 
       <div class="min-h-9 flex items-center">
@@ -242,60 +247,127 @@ onMounted(async () => {
        <q-spinner size="3rem" color="primary" />
     </div>
 
-    <div v-else>
-      <div v-if="!isEditing" class="card-premium overflow-hidden fade-in">
-        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-32 w-full"/>
-        <div class="px-8 pb-10 -mt-16">
-          <div class="flex flex-col md:flex-row items-end gap-6 mb-10">
-            <div class="relative flex-shrink-0">
+    <div v-else class="max-w-4xl mx-auto">
+      <!-- Unified Premium Container -->
+      <div class="card-premium overflow-hidden fade-in min-h-[600px] flex flex-col">
+        
+        <!-- Part 1: Identity Header (Banner & Avatar) -->
+        <div class="relative">
+          <div class="h-40 bg-gradient-to-r from-blue-700 via-blue-600 to-indigo-700 relative overflow-hidden">
+             <!-- Abstract Patterns -->
+             <div class="absolute inset-0 opacity-10">
+                <div class="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-white blur-3xl"></div>
+                <div class="absolute -bottom-10 -left-10 w-48 h-48 rounded-full bg-indigo-300 blur-3xl"></div>
+             </div>
+          </div>
+          
+          <div class="px-8 md:px-12 flex flex-col md:flex-row items-center md:items-end gap-8 md:gap-12 -mt-12 pb-8 border-b border-slate-100 dark:border-white/5 relative z-10">
+            <div class="relative group flex-shrink-0">
               <UserAvatar 
                 :photo-u-r-l="userData.photoURL" 
                 :first-name="userData.firstName" 
                 :last-name="userData.lastName" 
-                size="128"
-                class="border-4 border-white dark:border-[#1e293b] shadow-2xl bg-slate-800"
+                size="140"
+                class="border-[6px] border-white dark:border-slate-800 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-900"
               />
-
             </div>
-            <div class="pb-2">
-              <h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
-              <p class="text-slate-500 dark:text-slate-400 font-medium">{{ userData.email }}</p>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div class="info-group">
-              <span class="label">{{ $t('profile.phone') }}</span>
-              <p class="value">{{ userData.phone || '-' }}</p>
-            </div>
-            <div class="info-group">
-              <span class="label">{{ $t('profile.joinedAt') }}</span>
-              <p class="value">{{ formatDate(userData.createdAt) }}</p>
+            
+            <div class="text-center md:text-left pt-4 md:pt-0 flex-grow min-w-0">
+              <h2 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-2 leading-tight tracking-tight break-words">
+                {{ userData.firstName }} {{ userData.lastName }}
+              </h2>
+              <div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-white/5 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
+                      <q-icon name="alternate_email" size="xs" class="text-blue-500" />
+                      <span class="text-sm">{{ userData.email }}</span>
+                  </div>
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-white/5 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
+                      <q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
+                      <span class="text-sm">{{ userData.emailVerifiedAt ? 'ยืนยันแล้ว' : 'รอการยืนยัน' }}</span>
+                  </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
+        <!-- Part 2: Interactive Controls & Content -->
+        <div class="p-8 md:p-12 flex-grow">
+          
+          <!-- Tab Selector (Segmented Pill) -->
+          <div v-if="isEditing" class="flex justify-center mb-12">
+            <div class="bg-slate-100 dark:bg-slate-800/50 p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-white/5 shadow-inner">
+                <button 
+                  @click="activeTab = 'general'"
+                  class="px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
+                  :class="activeTab === 'general' ? 'bg-white dark:bg-slate-700 text-blue-600 shadow-md scale-100' : 'text-slate-500 hover:text-slate-700 dark:hover:text-white scale-95 opacity-70'"
+                >
+                  <q-icon name="person_outline" size="18px" /> ข้อมูลทั่วไป
+                </button>
+                <button 
+                  @click="activeTab = 'security'"
+                  class="px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
+                  :class="activeTab === 'security' ? 'bg-white dark:bg-slate-700 text-amber-600 shadow-md scale-100' : 'text-slate-500 hover:text-slate-700 dark:hover:text-white scale-95 opacity-70'"
+                >
+                  <q-icon name="lock_open" size="18px" /> ความปลอดภัย
+                </button>
+            </div>
+          </div>
 
+          <!-- Content Switching -->
+          <div class="max-w-3xl mx-auto h-full">
+            <template v-if="!isEditing">
+               <div class="fade-in">
+                  <h3 class="text-sm font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 mb-8">
+                     <span class="w-2 h-2 bg-blue-600 rounded-full"></span> รายละเอียดบัญชี
+                  </h3>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
+                     <div class="flex items-center gap-4 group">
+                        <div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 group-hover:scale-110 transition-transform">
+                           <q-icon name="smartphone" size="24px" />
+                        </div>
+                        <div>
+                           <div class="text-[10px] font-black text-slate-400 uppercase tracking-wider mb-0.5">เบอร์โทรศัพท์</div>
+                           <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
+                        </div>
+                     </div>
+                     <div class="flex items-center gap-4 group">
+                        <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 group-hover:scale-110 transition-transform">
+                           <q-icon name="calendar_today" size="24px" />
+                        </div>
+                        <div>
+                           <div class="text-[10px] font-black text-slate-400 uppercase tracking-wider mb-0.5">วันที่เริ่มเป็นสมาชิก</div>
+                           <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </template>
 
-      <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
-        
-        <ProfileEditForm
-          v-model="userData"
-          :loading="isProfileSaving"
-          :verifying="isSendingVerify"
-          @submit="handleUpdateProfile"
-          @upload="handleFileUpload"
-          @verify="handleSendVerifyEmail"
-        />
-
-
-        <PasswordChangeForm
-          v-model="passwordForm"
-          :loading="isPasswordSaving"
-          @submit="handleUpdatePassword"
-        />
-
+            <template v-else>
+               <div class="fade-in">
+                  <div v-if="activeTab === 'general'">
+                      <ProfileEditForm
+                          v-model="userData"
+                          :loading="isProfileSaving"
+                          :verifying="isSendingVerify"
+                          @submit="handleUpdateProfile"
+                          @upload="handleFileUpload"
+                          @verify="handleSendVerifyEmail"
+                          flat
+                      />
+                  </div>
+                  <div v-else>
+                      <PasswordChangeForm
+                          v-model="passwordForm"
+                          :loading="isPasswordSaving"
+                          @submit="handleUpdatePassword"
+                          flat
+                      />
+                  </div>
+               </div>
+            </template>
+          </div>
+        </div>
       </div>
     </div>