feat: implement core e-learning pages, course composable, and i18n localization.

Frontend-Learner/pages/dashboard/profile.vue

@@ -9,6 +9,7 @@ useHead({
 })
 
 const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
+const { fetchAllCertificates, getLocalizedText } = useCourse()
 const { t } = useI18n()
 
 
@@ -19,6 +20,10 @@ const isPasswordSaving = ref(false)
 const isSendingVerify = ref(false)
 const isHydrated = ref(false)
 
+// Certificates State
+const certificates = ref<any[]>([])
+const isLoadingCerts = ref(false)
+
 const formatDate = (dateString?: string) => {
   if (!dateString) return '-'
   try {
@@ -46,18 +51,6 @@ const userData = ref({
 
 // ...
 
-// Watch for changes in global user state (e.g. after avatar upload)
-watch(() => currentUser.value, (newUser) => {
-  if (newUser) {
-    userData.value.photoURL = newUser.photoURL || ''
-    userData.value.firstName = newUser.firstName
-    userData.value.lastName = newUser.lastName
-    userData.value.prefix = newUser.prefix?.th || ''
-    userData.value.email = newUser.email
-    userData.value.phone = newUser.phone || ''
-    userData.value.emailVerifiedAt = newUser.emailVerifiedAt
-  }
-}, { deep: true })
 
 const passwordForm = reactive({
   currentPassword: '',
@@ -188,7 +181,7 @@ const handleUpdatePassword = async () => {
   isPasswordSaving.value = false
 }
 
-// Watch for changes in global user state (e.g. after avatar upload)
+// Watch for changes in global user state (e.g. after avatar upload or profile update)
 watch(() => currentUser.value, (newUser) => {
   if (newUser) {
     userData.value.photoURL = newUser.photoURL || ''
@@ -197,11 +190,28 @@ watch(() => currentUser.value, (newUser) => {
     userData.value.prefix = newUser.prefix?.th || ''
     userData.value.email = newUser.email
     userData.value.phone = newUser.phone || ''
+    userData.value.emailVerifiedAt = newUser.emailVerifiedAt
   }
 }, { deep: true })
 
+const loadCertificates = async () => {
+  isLoadingCerts.value = true
+  const res = await fetchAllCertificates()
+  if (res.success) {
+    certificates.value = res.data || []
+  }
+  isLoadingCerts.value = false
+}
+
+const viewCertificate = (url: string) => {
+  if (url) {
+    window.open(url, '_blank')
+  }
+}
+
 onMounted(async () => {
   await fetchUserProfile(true)
+  loadCertificates()
   isHydrated.value = true
 })
 </script>
@@ -281,6 +291,35 @@ onMounted(async () => {
         </div>
       </div>
 
+      <!-- Section: My Certificates -->
+      <div v-if="!isEditing && certificates.length > 0" class="mt-12 fade-in" style="animation-delay: 0.1s;">
+         <h2 class="text-2xl font-black mb-6 text-slate-900 dark:text-white flex items-center gap-3">
+           <q-icon name="workspace_premium" color="warning" size="32px" />
+           ประกาศนียบัตรของฉัน
+         </h2>
+         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div v-for="cert in certificates" :key="cert.certificate_id" class="card-premium p-6 hover:border-warning/50 transition-all group">
+               <div class="flex items-start justify-between mb-4">
+                  <div class="p-3 rounded-xl bg-orange-50 dark:bg-orange-900/10 text-orange-600 dark:text-orange-400">
+                     <q-icon name="card_membership" size="32px" />
+                  </div>
+                  <q-btn flat round color="primary" icon="download" @click="viewCertificate(cert.download_url)" class="opacity-0 group-hover:opacity-100 transition-opacity" />
+               </div>
+               <h3 class="font-bold text-slate-900 dark:text-white mb-1 line-clamp-1">{{ getLocalizedText(cert.course_title) }}</h3>
+               <p class="text-xs text-slate-500 dark:text-slate-400 mb-4 italic">ออกเมื่อ: {{ formatDate(cert.issued_at) }}</p>
+               <q-btn 
+                 unelevated 
+                 rounded 
+                 color="warning" 
+                 text-color="dark" 
+                 class="w-full font-bold" 
+                 label="ดูประกาศนียบัตร" 
+                 @click="viewCertificate(cert.download_url)" 
+               />
+            </div>
+         </div>
+      </div>
+
       <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
         
         <ProfileEditForm
@@ -311,21 +350,42 @@ onMounted(async () => {
 }
 
 .card-premium {
-  @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
+  background-color: white;
+  border-color: #e2e8f0;
   border-radius: 1.5rem;
   border-width: 1px;
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
 }
+
 .dark .card-premium {
+  background-color: #1e293b;
+  border-color: rgba(255, 255, 255, 0.05);
   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-400 block mb-2;
+  font-size: 0.75rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #64748b;
+  display: block;
+  margin-bottom: 0.5rem;
 }
+
+.dark .info-group .label {
+  color: #94a3b8;
+}
+
 .info-group .value {
-  @apply text-lg font-bold text-slate-900 dark:text-white;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.dark .info-group .value {
+  color: white;
 }
 
 .premium-q-input :deep(.q-field__control) {