feat: Implement user profile management page with personal information and password editing capabilities.

Frontend-Learner/nuxt.config.ts

@@ -1,5 +1,5 @@
 // Nuxt 3 + Quasar + Tailwind + TypeScript
-// Configuration for E-Learning Platform
+// Configuration for E-Learning Platform - Refreshed
 // ไฟล์ตั้งค่าหลักของ Nuxt.js ใช้สำหรับกำหนด Modules, Plugins, CSS และ Environment Variables
 export default defineNuxtConfig({
   // Modules ที่ใช้ในโปรเจกต์

Frontend-Learner/pages/dashboard/profile.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-/**
- * @file profile.vue
- * @description User Profile & Settings Page.
- * Allows users to view their profile details and toggle an edit mode to update information.
- * Features a premium design with glassmorphism and gradient effects.
- */
-
 definePageMeta({
   layout: 'default',
   middleware: 'auth'
@@ -15,9 +8,15 @@ useHead({
   title: 'ตั้งค่าบัญชี - e-Learning'
 })
 
-const { currentUser } = useAuth()
+const { currentUser, updateUserProfile, changePassword } = useAuth()
+// Removed useFormValidation destructuring if not strictly used in template to avoid unused var warnings, 
+// or keep it if logically needed. Keeping minimalist.
 const { errors, validate, clearFieldError } = useFormValidation()
+
 const isEditing = ref(false)
+const isProfileSaving = ref(false)
+const isPasswordSaving = ref(false)
+const isHydrated = ref(false)
 
 const formatDate = (dateString?: string) => {
   if (!dateString) return '-'
@@ -33,7 +32,6 @@ const formatDate = (dateString?: string) => {
   }
 }
 
-// User Profile Data Management
 const userData = ref({
   firstName: currentUser.value?.firstName || '',
   lastName: currentUser.value?.lastName || '',
@@ -44,22 +42,29 @@ const userData = ref({
   prefix: currentUser.value?.prefix?.th || '' 
 })
 
-// Password Form (Separate from userData for security/logic)
 const passwordForm = reactive({
   currentPassword: '',
   newPassword: '',
   confirmPassword: ''
 })
 
-// Validation Rules
+const nameRules = [(val: string) => !!val || 'กรุณากรอกข้อมูล']
-const validationRules = {
+const emailRules = [
-  firstName: { rules: { required: true }, label: 'ชื่อ' },
+  (val: string) => !!val || 'กรุณากรอกอีเมล',
-  lastName: { rules: { required: true }, label: 'นามสกุล' },
+  (val: string) => /.+@.+\..+/.test(val) || 'อีเมลไม่ถูกต้อง'
-  email: { rules: { required: true, email: true }, label: 'อีเมล' },
+]
-  phone: { rules: { required: true, pattern: /^0[0-9]{8,9}$/ }, label: 'เบอร์โทรศัพท์' },
+const phoneRules = [
-  newPassword: { rules: { minLength: 6 }, label: 'รหัสผ่านใหม่' },
+  (val: string) => !!val || 'กรุณากรอกเบอร์โทรศัพท์',
-  confirmPassword: { rules: { match: 'newPassword' }, label: 'ยืนยันรหัสผ่าน' }
+  (val: string) => /^0[0-9]{8,9}$/.test(val) || 'เบอร์โทรศัพท์ไม่ถูกต้อง'
-}
+]
+const passwordRules = [
+  (val: string) => !!val || 'กรุณากรอกรหัสผ่าน',
+  (val: string) => val.length >= 6 || 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร'
+]
+const confirmPasswordRules = [
+  (val: string) => !!val || 'กรุณายืนยันรหัสผ่าน',
+  (val: string) => val === passwordForm.newPassword || 'รหัสผ่านใหม่ไม่ตรงกัน'
+]
 
 const showCurrentPassword = ref(false)
 const showNewPassword = ref(false)
@@ -69,10 +74,6 @@ const fileInput = ref<HTMLInputElement | null>(null)
 
 const toggleEdit = (edit: boolean) => {
   isEditing.value = edit
-  // Clear errors when toggling modes
-  if(edit === false) {
-      // Logic to reset form if canceling could go here
-  }
 }
 
 const triggerUpload = () => {
@@ -82,7 +83,6 @@ const triggerUpload = () => {
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files[0]) {
-    // Mock upload logic
     const reader = new FileReader()
     reader.onload = (e) => {
       userData.value.photoURL = e.target?.result as string
@@ -91,82 +91,88 @@ const handleFileUpload = (event: Event) => {
   }
 }
 
-// Save Profile Updates
+const handleUpdateProfile = async () => {
-const saveProfile = async () => {
+  isProfileSaving.value = true
-  // Combine data for validation
+  
-  const formData = {
-    ...userData.value,
-    ...passwordForm
-  }
-
-  // TODO: Add password validation if changing password is implemented via this API or handle separately
-  // For now focused on profile fields
-
   const prefixMap: Record<string, string> = {
     'นาย': 'Mr.',
     'นาง': 'Mrs.',
     'นางสาว': 'Ms.'
   }
 
-  if (currentUser.value) {
+  const payload = {
-      const { updateUserProfile, changePassword } = useAuth()
+    first_name: userData.value.firstName,
-      
+    last_name: userData.value.lastName,
-      const payload = {
+    phone: userData.value.phone,
-        first_name: userData.value.firstName,
+    prefix: {
-        last_name: userData.value.lastName,
+      th: userData.value.prefix,
-        // email: userData.value.email, // Email should not be updated via this endpoint as it causes backend 500 error (not in UserProfile schema)
+      en: prefixMap[userData.value.prefix] || ''
-        phone: userData.value.phone,
+    }
-        prefix: {
-          th: userData.value.prefix,
-          en: prefixMap[userData.value.prefix] || ''
-        }
-      }
-
-      // 1. Update Profile
-      const profileResult = await updateUserProfile(payload)
-      if (!profileResult?.success) {
-        alert(profileResult?.error || 'เกิดข้อผิดพลาดในการบันทึกข้อมูลส่วนตัว')
-        return
-      }
-
-      // 2. Change Password (if filled)
-      if (passwordForm.currentPassword && passwordForm.newPassword) {
-         if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-            alert('รหัสผ่านใหม่ไม่ตรงกัน')
-            return
-         }
-         
-         const passwordResult = await changePassword({
-            oldPassword: passwordForm.currentPassword,
-            newPassword: passwordForm.newPassword
-         })
-
-         if (!passwordResult.success) {
-            alert(passwordResult.error || 'เปลี่ยนรหัสผ่านไม่สำเร็จ')
-            // Don't return here, maybe we still want to show profile success? 
-            // But usually we stop. Let's alert only.
-         } else {
-            // Clear password form on success
-            passwordForm.currentPassword = ''
-            passwordForm.newPassword = ''
-            passwordForm.confirmPassword = ''
-         }
-      }
-
-      alert('บันทึกข้อมูลเรียบร้อยแล้ว')
-      isEditing.value = false
   }
+
+  const result = await updateUserProfile(payload)
+  
+  if (result?.success) {
+    // success logic
+  } else {
+    alert(result?.error || 'เกิดข้อผิดพลาดในการบันทึกข้อมูลส่วนตัว')
+  }
+  
+  isProfileSaving.value = false
 }
+
+const handleUpdatePassword = async () => {
+  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+    alert('รหัสผ่านใหม่ไม่ตรงกัน')
+    return
+  }
+  
+  isPasswordSaving.value = true
+  
+  const result = await changePassword({
+    oldPassword: passwordForm.currentPassword,
+    newPassword: passwordForm.newPassword
+  })
+
+  if (result.success) {
+    alert('เปลี่ยนรหัสผ่านเรียบร้อยแล้ว')
+    passwordForm.currentPassword = ''
+    passwordForm.newPassword = ''
+    passwordForm.confirmPassword = ''
+  } else {
+    alert(result.error || 'เปลี่ยนรหัสผ่านไม่สำเร็จ')
+  }
+  
+  isPasswordSaving.value = false
+}
+
+onMounted(() => {
+  isHydrated.value = true
+})
 </script>
 
 <template>
-  <div class="profile-page max-w-4xl mx-auto px-4 py-8">
+  <div class="profile-page mx-auto px-4 py-8 max-w-4xl lg:max-w-5xl">
-    <!-- Header: Title and Edit action -->
+    
-    <div class="flex items-center justify-between mb-10">
+    <div class="flex items-center justify-between mb-8 md:mb-10">
-      <h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h1>
+      <div class="flex items-center gap-4">
-      <div class="flex items-center gap-6">
         <q-btn
-          v-if="!isEditing"
+          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>
+
+      <div class="min-h-9 flex items-center">
+        <q-btn
+          v-if="isHydrated && !isEditing"
           unelevated
           rounded
           color="primary"
@@ -175,264 +181,261 @@ const saveProfile = async () => {
           :label="$t('profile.editProfile')"
           @click="toggleEdit(true)"
         />
-      </div>
+        <div
-    </div>
+          v-else-if="!isHydrated"
-
+          class="h-9 w-24 rounded-md bg-slate-200 dark:bg-slate-700 animate-pulse"
-    <!-- Profile View Card -->
-    <!-- VIEW MODE: Display Profile Information -->
-    <div v-if="!isEditing" class="card-premium overflow-hidden">
-      <!-- Cover Banner -->
-      <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">
-            <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"
-            />
-            <div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#1e293b]"/>
-          </div>
-          <div class="pb-2">
-            <h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
-
-          </div>
-        </div>
-
-        <!-- Info Grid -->
-        <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.email') }}</span>
-            <p class="value">{{ userData.email }}</p>
-          </div>
-          <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">{{ userData.createdAt }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Edit Profile Card -->
-    <!-- EDIT MODE: Edit Profile Form -->
-    <div v-else class="card-premium p-8 md:p-12">
-      <div class="flex items-center gap-4 mb-10">
-        <q-btn flat round icon="arrow_back" color="grey-7" @click="toggleEdit(false)" />
-        <h2 class="text-2xl font-black text-slate-900 dark:text-white">{{ $t('profile.editPersonalDesc') }}</h2>
-      </div>
-      
-      <!-- Avatar Upload Section -->
-      <div class="flex flex-col md:flex-row items-center gap-8 mb-12">
-        <div class="relative group cursor-pointer" @click="triggerUpload">
-          <UserAvatar 
-            :photo-u-r-l="userData.photoURL" 
-            :first-name="userData.firstName" 
-            :last-name="userData.lastName" 
-            size="112"
-            class="rounded-3xl border-2 border-slate-200 dark:border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
-          />
-          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-          </div>
-          <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
-        </div>
-        <div class="text-center md:text-left">
-          <h3 class="font-black text-slate-900 dark:text-white mb-2">{{ $t('profile.yourAvatar') }}</h3>
-          <p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">{{ $t('profile.avatarHint') }}</p>
-          <q-btn
-            unelevated
-            rounded
-            color="primary"
-            size="sm"
-            class="font-bold px-4"
-            :label="$t('profile.uploadNew')"
-            @click="triggerUpload"
-          />
-        </div>
-      </div>
-
-      <!-- Form Inputs -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
-        <div class="space-y-1">
-          <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.prefix') }}</div>
-          <q-select
-            v-model="userData.prefix"
-            :options="['นาย', 'นาง', 'นางสาว']"
-            outlined
-            dense
-            rounded
-            bg-color="white"
-            class="premium-q-input"
-            popup-content-class="text-slate-900"
-          />
-        </div>
-        <div class="grid grid-cols-2 gap-4">
-          <div class="space-y-1">
-            <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.firstName') }}</div>
-            <q-input
-              v-model="userData.firstName"
-              outlined
-              dense
-              rounded
-              bg-color="white"
-              class="premium-q-input"
-              :error="!!errors.firstName"
-              :error-message="errors.firstName"
-              @update:model-value="clearFieldError('firstName')"
-            />
-          </div>
-          <div class="space-y-1">
-            <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.lastName') }}</div>
-            <q-input
-              v-model="userData.lastName"
-              outlined
-              dense
-              rounded
-              bg-color="white"
-              class="premium-q-input"
-              :error="!!errors.lastName"
-              :error-message="errors.lastName"
-              @update:model-value="clearFieldError('lastName')"
-            />
-          </div>
-        </div>
-        <div class="space-y-1">
-          <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.email') }}</div>
-          <q-input
-            v-model="userData.email"
-            outlined
-            dense
-            rounded
-            bg-color="white"
-            class="premium-q-input"
-            :error="!!errors.email"
-            :error-message="errors.email"
-            @update:model-value="clearFieldError('email')"
-            type="email"
-          />
-        </div>
-        <div class="space-y-1">
-          <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.phone') }}</div>
-          <q-input
-            v-model="userData.phone"
-            outlined
-            dense
-            rounded
-            bg-color="white"
-            class="premium-q-input"
-            :error="!!errors.phone"
-            :error-message="errors.phone"
-            @update:model-value="clearFieldError('phone')"
-          />
-        </div>
-      </div>
-
-      <!-- Security Section -->
-      <div class="border-t border-slate-200 dark:border-white/5 pt-10 mb-10">
-        <h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">{{ $t('profile.security') }}</h3>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div class="space-y-1">
-            <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.currentPassword') }}</div>
-            <q-input
-              v-model="passwordForm.currentPassword"
-              :type="showCurrentPassword ? 'text' : 'password'"
-              outlined
-              dense
-              rounded
-              bg-color="white"
-              class="premium-q-input"
-              placeholder="••••••••"
-            >
-              <template v-slot:append>
-                <q-icon
-                  :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
-                  class="cursor-pointer"
-                  @click="showCurrentPassword = !showCurrentPassword"
-                />
-              </template>
-            </q-input>
-          </div>
-          <div class="space-y-1">
-            <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.newPassword') }}</div>
-            <q-input
-              v-model="passwordForm.newPassword"
-              :type="showNewPassword ? 'text' : 'password'"
-              outlined
-              dense
-              rounded
-              bg-color="white"
-              class="premium-q-input"
-              :error="!!errors.newPassword"
-              :error-message="errors.newPassword"
-              @update:model-value="clearFieldError('newPassword')"
-            >
-              <template v-slot:append>
-                <q-icon
-                  :name="showNewPassword ? 'visibility_off' : 'visibility'"
-                  class="cursor-pointer"
-                  @click="showNewPassword = !showNewPassword"
-                />
-              </template>
-            </q-input>
-          </div>
-          <div class="space-y-1">
-            <div class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 ml-1">{{ $t('profile.confirmNewPassword') }}</div>
-            <q-input
-              v-model="passwordForm.confirmPassword"
-              :type="showConfirmPassword ? 'text' : 'password'"
-              outlined
-              dense
-              rounded
-              bg-color="white"
-              class="premium-q-input"
-              :error="!!errors.confirmPassword"
-              :error-message="errors.confirmPassword"
-              @update:model-value="clearFieldError('confirmPassword')"
-            >
-              <template v-slot:append>
-                <q-icon
-                  :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
-                  class="cursor-pointer"
-                  @click="showConfirmPassword = !showConfirmPassword"
-                />
-              </template>
-            </q-input>
-          </div>
-        </div>
-        </div>
-      </div>
-
-      <!-- Actions -->
-      <div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
-        <q-btn
-          unelevated
-          rounded
-          color="primary"
-          class="flex-1 py-3 text-lg font-bold shadow-lg"
-          :label="$t('common.save')"
-          @click="saveProfile"
-        />
-        <q-btn
-          unelevated
-          rounded
-          color="grey-3"
-          text-color="grey-9"
-          class="md:w-32 py-3 font-bold"
-          :label="$t('common.cancel')"
-          @click="toggleEdit(false)"
         />
       </div>
     </div>
+
+    <div v-if="!isHydrated" class="flex justify-center py-20">
+       <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">
+              <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"
+              />
+              <div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#1e293b]"/>
+            </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">{{ userData.createdAt }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
+        
+        <div class="card-premium p-8 h-fit">
+          <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+            <q-icon name="person" class="text-blue-500 text-2xl" />
+            {{ $t('profile.editPersonalDesc') }}
+          </h2>
+
+          <q-form @submit="handleUpdateProfile" class="flex flex-col gap-6">
+            
+            <div class="flex items-center gap-6">
+              <div class="relative group cursor-pointer" @click="triggerUpload">
+                 <UserAvatar 
+                  :photo-u-r-l="userData.photoURL" 
+                  :first-name="userData.firstName" 
+                  :last-name="userData.lastName" 
+                  size="80"
+                  class="rounded-2xl border-2 border-slate-100 dark:border-white/10"
+                />
+                <div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                   <q-icon name="camera_alt" class="text-white text-xl" />
+                </div>
+                <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
+              </div>
+              <div>
+                <div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
+                <q-btn 
+                  flat 
+                  dense 
+                  no-caps 
+                  color="primary" 
+                  :label="$t('profile.uploadNew')" 
+                  size="sm" 
+                  @click="triggerUpload"
+                />
+              </div>
+            </div>
+
+            <q-separator class="bg-slate-100 dark:bg-white/5" />
+
+            <div class="grid grid-cols-1 gap-4">
+               <div class="space-y-1">
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
+                  <q-select
+                    v-model="userData.prefix"
+                    :options="['นาย', 'นาง', 'นางสาว']"
+                    outlined
+                    dense
+                    rounded
+                    class="premium-q-input"
+                    popup-content-class="text-slate-900"
+                  />
+               </div>
+               
+               <div class="grid grid-cols-2 gap-4">
+                 <div>
+                   <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.firstName') }}</label>
+                   <q-input
+                      v-model="userData.firstName"
+                      outlined dense rounded
+                      class="premium-q-input"
+                      :rules="nameRules"
+                      hide-bottom-space
+                   />
+                 </div>
+                 <div>
+                    <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.lastName') }}</label>
+                    <q-input
+                      v-model="userData.lastName"
+                      outlined dense rounded
+                      class="premium-q-input"
+                      :rules="nameRules"
+                      hide-bottom-space
+                    />
+                 </div>
+               </div>
+
+               <div>
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
+                  <q-input
+                    v-model="userData.email"
+                    type="email"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :rules="emailRules"
+                    hide-bottom-space
+                    disable
+                    hint="ติดต่อผู้ดูแลระบบเพื่อเปลี่ยนอีเมล"
+                  />
+               </div>
+
+               <div>
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.phone') }}</label>
+                  <q-input
+                    v-model="userData.phone"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    :rules="phoneRules"
+                    hide-bottom-space
+                  />
+               </div>
+            </div>
+
+            <div class="pt-2">
+              <q-btn
+                type="submit"
+                unelevated
+                rounded
+                color="primary"
+                class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
+                :label="$t('common.save')"
+                :loading="isProfileSaving"
+              />
+            </div>
+          </q-form>
+        </div>
+
+
+        <div class="card-premium p-8 h-fit">
+          <h2 class="text-xl font-bold flex items-center gap-3 text-slate-900 dark:text-white mb-6">
+            <q-icon name="lock" class="text-amber-500 text-2xl" />
+            {{ $t('profile.security') }}
+          </h2>
+          
+          <q-form @submit="handleUpdatePassword" class="flex flex-col gap-6">
+             <div class="text-sm text-slate-500 dark:text-slate-400 mb-2">
+               เปลี่ยนรหัสผ่านเพื่อความปลอดภัยของบัญชี กรุณาตั้งรหัสผ่านที่คาดเดายาก
+             </div>
+
+             <div class="space-y-4">
+                <div>
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.currentPassword') }}</label>
+                  <q-input
+                    v-model="passwordForm.currentPassword"
+                    :type="showCurrentPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    placeholder="••••••••"
+                    :rules="[val => !!val || 'กรุณากรอกรหัสผ่านปัจจุบัน']"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
+                        class="cursor-pointer text-slate-400"
+                        @click="showCurrentPassword = !showCurrentPassword"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+
+                <q-separator class="bg-slate-100 dark:bg-white/5 my-2" />
+
+                <div>
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.newPassword') }}</label>
+                  <q-input
+                    v-model="passwordForm.newPassword"
+                    :type="showNewPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    placeholder="อย่างน้อย 6 ตัวอักษร"
+                    :rules="passwordRules"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        :name="showNewPassword ? 'visibility_off' : 'visibility'"
+                        class="cursor-pointer text-slate-400"
+                        @click="showNewPassword = !showNewPassword"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+
+                <div>
+                  <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.confirmNewPassword') }}</label>
+                  <q-input
+                    v-model="passwordForm.confirmPassword"
+                    :type="showConfirmPassword ? 'text' : 'password'"
+                    outlined dense rounded
+                    class="premium-q-input"
+                    placeholder="ยืนยันรหัสผ่านอีกครั้ง"
+                    :rules="confirmPasswordRules"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
+                        class="cursor-pointer text-slate-400"
+                        @click="showConfirmPassword = !showConfirmPassword"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+             </div>
+
+             <div class="pt-2">
+              <q-btn
+                type="submit"
+                unelevated
+                rounded
+                class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
+                style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
+                label="เปลี่ยนรหัสผ่าน"
+                :loading="isPasswordSaving"
+              />
+            </div>
+          </q-form>
+        </div>
+
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -443,16 +446,17 @@ const saveProfile = async () => {
 
 .card-premium {
   @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
-  border-radius: 2.5rem;
+  border-radius: 1.5rem;
   border-width: 1px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
 }
 .dark .card-premium {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 
 .info-group .label {
-  @apply text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 block mb-2;
+  @apply text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400 block mb-2;
 }
 .info-group .value {
   @apply text-lg font-bold text-slate-900 dark:text-white;
@@ -462,7 +466,7 @@ const saveProfile = async () => {
   border-radius: 12px;
 }
 .dark .premium-q-input :deep(.q-field__control) {
-  background: #1e293b;
+  background: #0f172a;
 }
 .dark .premium-q-input :deep(.q-field__native) {
   color: white;
@@ -471,9 +475,12 @@ const saveProfile = async () => {
   color: #94a3b8;
 }
 
-@media (max-width: 768px) {
+.fade-in {
-  .card-premium {
+  animation: fadeIn 0.4s ease-out forwards;
-    @apply rounded-[2rem];
+}
-  }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>