From 7ead98375eb34fea43cb9240b2192aaf05805653 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Wed, 11 Feb 2026 11:25:55 +0700
Subject: [PATCH] feat: Implement core e-learning features including course
 discovery, classroom components, user profile management, and
 internationalization for English and Thai.

---
 .../classroom/AnnouncementModal.vue           | 16 ++++---
 .../classroom/CurriculumSidebar.vue           |  6 ++-
 .../components/course/CourseCard.vue          |  6 ++-
 .../components/discovery/CategorySidebar.vue  |  9 ++--
 .../components/discovery/CourseDetailView.vue | 43 +++++++++++--------
 .../components/layout/MobileNav.vue           | 13 +++---
 .../components/profile/ProfileEditForm.vue    | 12 ++++--
 Frontend-Learner/composables/useCourse.ts     |  7 ++-
 Frontend-Learner/i18n/locales/en.json         | 16 ++++++-
 Frontend-Learner/i18n/locales/th.json         | 16 ++++++-
 .../pages/dashboard/my-courses.vue            |  6 ++-
 11 files changed, 107 insertions(+), 43 deletions(-)

diff --git a/Frontend-Learner/components/classroom/AnnouncementModal.vue b/Frontend-Learner/components/classroom/AnnouncementModal.vue
index 7d937ba3..aedb1177 100644
--- a/Frontend-Learner/components/classroom/AnnouncementModal.vue
+++ b/Frontend-Learner/components/classroom/AnnouncementModal.vue
@@ -13,11 +13,15 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
 }>();
 
+const { locale, t } = useI18n()
+
 // Helper for localization
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 </script>
 
@@ -30,9 +34,9 @@ const getLocalizedText = (text: any) => {
                     <div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
                         <q-icon name="campaign" size="22px" />
                     </div>
-                    {{ $t('classroom.announcements', 'ประกาศในคอร์สเรียน') }}
+                    {{ $t('classroom.announcements') }}
                  </div>
-                 <div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</div>
+                 <div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} {{ $t('common.items') }}</div>
              </div>
              <q-btn icon="close" flat round dense v-close-popup class="text-slate-400 hover:text-slate-700 dark:hover:text-white bg-slate-50 dark:bg-slate-800" />
           </q-card-section>
@@ -62,16 +66,16 @@ const getLocalizedText = (text: any) => {
                             </q-avatar>
                            <div class="flex-1">
                               <div class="font-bold text-lg text-slate-900 dark:text-white leading-tight pr-8 capitalize font-display">
-                                {{ getLocalizedText(ann.title) || 'ประกาศ' }}
+                                {{ getLocalizedText(ann.title) || $t('sidebar.announcements') }}
                               </div>
                               <div class="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2 mt-1.5">
                                   <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
                                     <q-icon name="today" size="12px" />
-                                    {{ new Date(ann.created_at || Date.now()).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' }) }}
+                                    {{ new Date(ann.created_at || Date.now()).toLocaleDateString(locale === 'th' ? 'th-TH' : 'en-US', { day: 'numeric', month: 'short', year: 'numeric' }) }}
                                   </span>
                                   <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
                                     <q-icon name="access_time" size="12px" />
-                                    {{ new Date(ann.created_at || Date.now()).toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }) }}
+                                    {{ new Date(ann.created_at || Date.now()).toLocaleTimeString(locale === 'th' ? 'th-TH' : 'en-US', { hour: '2-digit', minute: '2-digit' }) }}
                                   </span>
                               </div>
                            </div>
diff --git a/Frontend-Learner/components/classroom/CurriculumSidebar.vue b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
index 360d3dda..ccd87df4 100644
--- a/Frontend-Learner/components/classroom/CurriculumSidebar.vue
+++ b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
@@ -19,11 +19,15 @@ const emit = defineEmits<{
   (e: 'open-announcements'): void;
 }>();
 
+const { locale } = useI18n()
+
 // Helper for localization
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 </script>
 
diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index c3b235e2..0c4b92a0 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -39,10 +39,14 @@ const emit = defineEmits<{
   viewCertificate: []
 }>()
 
+const { locale } = useI18n()
+
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 
 const displayTitle = computed(() => getLocalizedText(props.title))
diff --git a/Frontend-Learner/components/discovery/CategorySidebar.vue b/Frontend-Learner/components/discovery/CategorySidebar.vue
index e5b8c1d6..213bd8a2 100644
--- a/Frontend-Learner/components/discovery/CategorySidebar.vue
+++ b/Frontend-Learner/components/discovery/CategorySidebar.vue
@@ -13,12 +13,15 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: number[]): void;
 }>();
 
+const { locale, t } = useI18n();
 const showAllCategories = ref(false);
 
 const getLocalizedText = (text: any) => {
   if (!text) return "";
   if (typeof text === "string") return text;
-  return text.th || text.en || "";
+  
+  const currentLocale = locale.value as 'th' | 'en';
+  return text[currentLocale] || text.th || text.en || "";
 };
 </script>
 
@@ -26,7 +29,7 @@ const getLocalizedText = (text: any) => {
   <div class="category-sidebar-root border rounded-2xl overflow-hidden shadow-sm">
     <q-expansion-item
       expand-separator
-      :label="`หมวดหมู่ (${modelValue.length})`"
+      :label="`${$t('discovery.categoryTitle')} (${modelValue.length})`"
       class="category-sidebar-expansion"
       header-class="category-sidebar-header"
       default-opened
@@ -67,7 +70,7 @@ const getLocalizedText = (text: any) => {
         >
           <q-item-section>
             <div class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-              {{ showAllCategories ? "แสดงน้อยลง" : "แสดงเพิ่มเติม" }}
+              {{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="h-4 w-4"
diff --git a/Frontend-Learner/components/discovery/CourseDetailView.vue b/Frontend-Learner/components/discovery/CourseDetailView.vue
index 9ce55d07..3ccad2a2 100644
--- a/Frontend-Learner/components/discovery/CourseDetailView.vue
+++ b/Frontend-Learner/components/discovery/CourseDetailView.vue
@@ -15,14 +15,21 @@ const emit = defineEmits<{
     (e: 'enroll', courseId: number): void;
 }>();
 
+const { locale, t } = useI18n();
+
 const getLocalizedText = (text: any) => {
     if (!text) return ''
     if (typeof text === 'string') return text
-    return text.th || text.en || ''
+    
+    const currentLocale = locale.value as 'th' | 'en'
+    return text[currentLocale] || text.th || text.en || ''
 }
 
 const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(price);
+    return new Intl.NumberFormat(locale.value === 'th' ? 'th-TH' : 'en-US', { 
+        style: 'currency', 
+        currency: 'THB' 
+    }).format(price);
 }
 
 const enrollmentLoading = ref(false);
@@ -43,7 +50,7 @@ const handleEnroll = () => {
         <q-btn 
             flat 
             icon="arrow_back" 
-            label="ย้อนกลับ" 
+            :label="$t('common.back')" 
             class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors"
             @click="emit('back')"
         />
@@ -72,7 +79,7 @@ const handleEnroll = () => {
                         />
                          <div class="absolute inset-0 flex items-center justify-center">
                              <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
-                                 <q-icon name="play_arrow" size="40px" class="text-white" />
+                                  <q-icon name="play_arrow" size="40px" class="text-white" />
                              </div>
                          </div>
                      </template>
@@ -86,11 +93,11 @@ const handleEnroll = () => {
                     <div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
                         <span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
                             <q-icon name="category" size="16px" class="text-blue-500" />
-                            {{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
+                            {{ getLocalizedText(course.category?.name) }}
                         </span>
                          <span class="flex items-center gap-1">
                             <q-icon name="schedule" size="16px" />
-                            {{ course.duration_minutes || 60 }} นาที
+                            {{ course.duration_minutes || 60 }} {{ $t('course.minutes') }}
                         </span>
                          <span class="flex items-center gap-1">
                             <q-icon name="person" size="16px" />
@@ -107,14 +114,14 @@ const handleEnroll = () => {
                 <div class="bg-slate-50 dark:bg-white/5 rounded-3xl p-6 md:p-8">
                     <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
                          <q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
-                         เนื้อหาบทเรียน
+                         {{ $t('course.courseContent') }}
                     </h3>
                     
                     <div class="space-y-4">
                         <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
                              <div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
-                                 <span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
-                                 <span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
+                                 <span>{{ Number(idx) + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
+                                 <span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
                              </div>
                              <div class="divide-y divide-slate-100 dark:divide-slate-800">
                                  <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
@@ -124,13 +131,13 @@ const handleEnroll = () => {
                                         size="18px"
                                      />
                                      <span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
-                                     <span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} นาที</span>
+                                     <span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} {{ $t('course.minutes') }}</span>
                                      <q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
                                  </div>
                              </div>
                         </div>
                          <div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 dark:text-slate-600 py-8">
-                             ยังไม่มีเนื้อหาในขณะนี้
+                             {{ $t('course.noContent') }}
                         </div>
                     </div>
                 </div>
@@ -145,10 +152,10 @@ const handleEnroll = () => {
                           
                           <div class="relative">
                             <div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display">
-                                {{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
+                                {{ course.price > 0 ? formatPrice(course.price) : $t('course.free') }}
                             </div>
                             <div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
-                                 {{ formatPrice(course.price * 2) }}
+                                 {{ formatPrice(Number(course.price) * 2) }}
                             </div>
 
                             <q-btn
@@ -157,13 +164,13 @@ const handleEnroll = () => {
                                 size="lg"
                                 color="primary"
                                 class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold"
-                                :label="user ? (course.enrolled ? 'เข้าสู่บทเรียน' : (course.price > 0 ? 'ซื้อคอร์สเรียนนี้' : 'ลงทะเบียนเรียนฟรี')) : 'เข้าสู่ระบบเพื่อลงทะเบียน'"
+                                :label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')"
                                 :loading="enrollmentLoading"
                                 @click="handleEnroll"
                             />
                             
                             <div class="text-xs text-center text-slate-400 dark:text-slate-500">
-                                รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
+                                {{ $t('course.satisfactionGuarantee') }}
                             </div>
 
                             <hr class="my-6 border-slate-100 dark:border-slate-800">
@@ -171,15 +178,15 @@ const handleEnroll = () => {
                             <div class="space-y-3 block">
                                 <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                     <q-icon name="check_circle" class="text-green-500" />
-                                    เข้าเรียนได้ตลอดชีพ
+                                    {{ $t('course.lifetimeAccess') }}
                                 </div>
                                 <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                     <q-icon name="check_circle" class="text-green-500" />
-                                    ทำแบบทดสอบไม่จำกัด
+                                    {{ $t('course.unlimitedQuizzes') }}
                                 </div>
                                 <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
                                     <q-icon name="check_circle" class="text-green-500" />
-                                    ใบประกาศนียบัตรเมื่อเรียนจบ
+                                    {{ $t('course.certificate') }} ({{ $t('course.available') }})
                                 </div>
                             </div>
                           </div>
diff --git a/Frontend-Learner/components/layout/MobileNav.vue b/Frontend-Learner/components/layout/MobileNav.vue
index cfe857a1..c0ee0cab 100644
--- a/Frontend-Learner/components/layout/MobileNav.vue
+++ b/Frontend-Learner/components/layout/MobileNav.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-const navItems = [
-  { to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
-  { to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
-  { to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
-]
+const { t } = useI18n()
+
+const navItems = computed(() => [
+  { to: '/dashboard', icon: 'dashboard', label: t('sidebar.overview') },
+  { to: '/browse/discovery', icon: 'explore', label: t('sidebar.browseCourses') },
+  { to: '/dashboard/my-courses', icon: 'school', label: t('sidebar.myCourses') }
+])
+
 const handleNavigate = (path: string) => {
   if (import.meta.client) {
     window.location.href = path
diff --git a/Frontend-Learner/components/profile/ProfileEditForm.vue b/Frontend-Learner/components/profile/ProfileEditForm.vue
index 659dcbb3..60607e6d 100644
--- a/Frontend-Learner/components/profile/ProfileEditForm.vue
+++ b/Frontend-Learner/components/profile/ProfileEditForm.vue
@@ -111,7 +111,13 @@ const handleFileUpload = (event: Event) => {
                 <label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.prefix') }}</label>
                 <q-select
                 v-model="modelValue.prefix"
-                :options="['นาย', 'นาง', 'นางสาว']"
+                :options="[
+                    { label: $t('profile.mr'), value: 'นาย' },
+                    { label: $t('profile.mrs'), value: 'นาง' },
+                    { label: $t('profile.miss'), value: 'นางสาว' }
+                ]"
+                emit-value
+                map-options
                 outlined
                 dense
                 rounded
@@ -161,7 +167,7 @@ const handleFileUpload = (event: Event) => {
                     <template v-slot:append>
                          <div v-if="modelValue.emailVerifiedAt" class="flex items-center gap-1">
                              <q-icon name="check_circle" color="positive" />
-                             <span class="text-green-600 text-xs font-bold">{{ $t('profile.emailVerified') || 'ยืนยันแล้ว' }}</span>
+                             <span class="text-green-600 text-xs font-bold">{{ $t('profile.emailVerified') }}</span>
                          </div>
                          <q-btn
                             v-else
@@ -170,7 +176,7 @@ const handleFileUpload = (event: Event) => {
                             no-caps
                             color="negative"
                             icon="mark_email_read"
-                            :label="$t('profile.verifyEmail') || 'ยืนยัน'"
+                            :label="$t('profile.verifyEmail')"
                             class="text-sm font-bold"
                             :loading="verifying"
                             @click="$emit('verify')"
diff --git a/Frontend-Learner/composables/useCourse.ts b/Frontend-Learner/composables/useCourse.ts
index 25ee2aad..ce2cd3f4 100644
--- a/Frontend-Learner/composables/useCourse.ts
+++ b/Frontend-Learner/composables/useCourse.ts
@@ -644,14 +644,19 @@ export const useCourse = () => {
         }
     }
 
+    const { locale } = useI18n()
+
     /**
      * Helper: แปลงข้อมูล 2 ภาษาเป็นข้อความตาม locale ปัจจุบัน หรือค่าที่มีอยู่
      */
     const getLocalizedText = (text: string | { th: string; en: string } | undefined | null) => {
         if (!text) return ''
         if (typeof text === 'string') return text
+        
+        // Return based on current locale, fallback to th then en
+        const currentLocale = locale.value as 'th' | 'en'
         // @ts-ignore
-        return text.th || text.en || ''
+        return text[currentLocale] || text.th || text.en || ''
     }
 
     return {
diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json
index f3ef2399..fc22ff1a 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -39,7 +39,15 @@
     "startLearning": "Start Learning",
     "studyAgain": "Study Again",
     "downloadCertificate": "Download Certificate",
-    "completed": "Completed"
+    "completed": "Completed",
+    "lifetimeAccess": "Lifetime access",
+    "unlimitedQuizzes": "Unlimited quizzes",
+    "satisfactionGuarantee": "Satisfaction guarantee, 7-day refund",
+    "noContent": "No content available yet",
+    "buyNow": "Buy this course",
+    "enrollFree": "Enroll for free",
+    "loginToEnroll": "Log in to enroll",
+    "minutes": "Minutes"
   },
   "sidebar": {
     "overview": "Home",
@@ -99,6 +107,9 @@
     "removeAvatar": "Remove Profile Photo",
     "uploadLimit": "PNG, JPG, WEBP only, max 5 MB",
     "prefix": "Prefix",
+    "mr": "Mr.",
+    "mrs": "Mrs.",
+    "miss": "Ms.",
     "firstName": "First Name",
     "lastName": "Last Name",
     "security": "Security",
@@ -166,7 +177,8 @@
     "back": "Back",
     "backToHome": "Back to Home",
     "error": "Error",
-    "loading": "Loading"
+    "loading": "Loading",
+    "items": "Items"
   },
   "classroom": {
     "backToDashboard": "Back to My Courses",
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index 8561e0fb..66d4fa04 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -39,7 +39,15 @@
     "startLearning": "เริ่มเรียนทันที",
     "studyAgain": "ทบทวนบทเรียน",
     "downloadCertificate": "ดาวน์โหลดประกาศนียบัตร",
-    "completed": "เรียนจบเรียบร้อย"
+    "completed": "เรียนจบเรียบร้อย",
+    "lifetimeAccess": "เข้าเรียนได้ตลอดชีพ",
+    "unlimitedQuizzes": "ทำแบบทดสอบไม่จำกัด",
+    "satisfactionGuarantee": "รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน",
+    "noContent": "ยังไม่มีเนื้อหาในขณะนี้",
+    "buyNow": "ซื้อคอร์สเรียนนี้",
+    "enrollFree": "ลงทะเบียนเรียนฟรี",
+    "loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน",
+    "minutes": "นาที"
   },
   "sidebar": {
     "overview": "หน้าหลัก",
@@ -99,6 +107,9 @@
     "removeAvatar": "ลบรูปโปรไฟล์",
     "uploadLimit": "เฉพาะไฟล์ png, jpg, ขนาดไม่เกิน 5 MB",
     "prefix": "คำนำหน้า",
+    "mr": "นาย",
+    "mrs": "นาง",
+    "miss": "นางสาว",
     "firstName": "ชื่อ",
     "lastName": "นามสกุล",
     "security": "ความปลอดภัย",
@@ -166,7 +177,8 @@
     "back": "ย้อนกลับ",
     "backToHome": "กลับสู่หน้าหลัก",
     "error": "เกิดข้อผิดพลาด",
-    "loading": "กำลังโหลด"
+    "loading": "กำลังโหลด",
+    "items": "รายการ"
   },
   "classroom": {
     "backToDashboard": "กลับไปคอร์สของฉัน",
diff --git a/Frontend-Learner/pages/dashboard/my-courses.vue b/Frontend-Learner/pages/dashboard/my-courses.vue
index fa37ebcd..15b0f6e4 100644
--- a/Frontend-Learner/pages/dashboard/my-courses.vue
+++ b/Frontend-Learner/pages/dashboard/my-courses.vue
@@ -27,11 +27,15 @@ onMounted(() => {
   }
 })
 
+const { locale } = useI18n()
+
 // Helper to get localized text
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 
 // Data Handling