From acff387a9b15619be64a11fe036491acb0f8f4e4 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Wed, 11 Feb 2026 15:05:19 +0700
Subject: [PATCH] feat: Implement user dashboard with recommended courses, a
 'My Courses' page for enrolled courses, and a reusable CourseCard component.

---
 Frontend-Learner/components/course/CourseCard.vue | 5 +++--
 Frontend-Learner/components/user/UserMenu.vue     | 2 +-
 Frontend-Learner/pages/dashboard/index.vue        | 8 ++++----
 Frontend-Learner/pages/dashboard/my-courses.vue   | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index 0c4b92a0..b26d9ea1 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -8,12 +8,12 @@
 interface CourseCardProps {
   id?: number
   title: string | { th: string; en: string }
-  category?: string
+  category?: string | { th: string; en: string }
   level?: string
   price?: string
   description?: string | { th: string; en: string }
   rating?: string
-  lessons?: string
+  lessons?: string | number
   duration?: string
   progress?: number
   completed?: boolean
@@ -51,6 +51,7 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
 
 const displayTitle = computed(() => getLocalizedText(props.title))
 const displayDescription = computed(() => getLocalizedText(props.description))
+const displayCategory = computed(() => getLocalizedText(props.category))
 </script>
 
 <template>
diff --git a/Frontend-Learner/components/user/UserMenu.vue b/Frontend-Learner/components/user/UserMenu.vue
index b719b44d..8d66bddd 100644
--- a/Frontend-Learner/components/user/UserMenu.vue
+++ b/Frontend-Learner/components/user/UserMenu.vue
@@ -58,7 +58,7 @@ const handleLogout = async () => {
         self="top end" 
         :offset="[0, 10]"
         content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
-        style="min-width: 240px;"
+        style="width: 240px;"
       >
         <q-list class="py-2">
           <q-item 
diff --git a/Frontend-Learner/pages/dashboard/index.vue b/Frontend-Learner/pages/dashboard/index.vue
index e642ac63..3ccf351d 100644
--- a/Frontend-Learner/pages/dashboard/index.vue
+++ b/Frontend-Learner/pages/dashboard/index.vue
@@ -41,9 +41,9 @@ onMounted(async () => {
   if (res.success && res.data?.length) {
     recommendedCourses.value = res.data.map((c: any) => ({
       id: c.id,
-      title: getLocalizedText(c.title),
-      category: getLocalizedText(catMap.get(c.category_id)) || 'General',
-      duration: c.lessons ? `${c.lessons} ${t('course.lessonsUnit')}` : '',
+      title: c.title,
+      category: catMap.get(c.category_id),
+      lessons: c.lessons,
       image: c.thumbnail_url || '',
       badge: '', 
       badgeType: '' 
@@ -55,7 +55,7 @@ onMounted(async () => {
 <template>
   <div class="page-container">
     <!-- Welcome Header Section -->
-    <div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition-all border border-white/5">
+    <div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition border border-white/5">
       <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
         <div class="text-center md:text-left">
           <ClientOnly>
diff --git a/Frontend-Learner/pages/dashboard/my-courses.vue b/Frontend-Learner/pages/dashboard/my-courses.vue
index 15b0f6e4..5b80a822 100644
--- a/Frontend-Learner/pages/dashboard/my-courses.vue
+++ b/Frontend-Learner/pages/dashboard/my-courses.vue
@@ -69,7 +69,7 @@ const loadEnrolledCourses = async () => {
     enrolledCourses.value = courses.map(item => ({
       id: item.course_id, 
       enrollment_id: item.id,
-      title: getLocalizedText(item.course.title),
+      title: item.course.title,
       progress: item.progress_percentage || 0, 
       completed: item.status === 'COMPLETED',
       thumbnail_url: item.course.thumbnail_url