feat: implement my courses page with course fetching, filtering, and enrollment/certificate modals.

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

@@ -27,38 +27,63 @@ onMounted(() => {
   }
 })
 
-// Mock Enrolled Courses Data
-const courses = [
-  {
-    id: 1,
-    title: 'เบื้องต้นการออกแบบ UX/UI',
-    progress: 65,
-    category: 'progress'
-  },
-  {
-    id: 2,
-    title: 'การเข้าถึงเว็บ (WCAG)',
-    progress: 10,
-    category: 'progress'
-  },
-  {
-    id: 3,
-    title: 'HTML5 พื้นฐาน',
-    progress: 100,
-    completed: true,
-    category: 'completed'
-  }
-]
+// 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 || ''
+}
 
-// Computed property to filter courses
-const filteredCourses = computed(() => {
-  if (activeFilter.value === 'all') return courses
-  return courses.filter(c => c.category === activeFilter.value)
+// Data Handling
+const { fetchEnrolledCourses } = useCourse()
+const enrolledCourses = ref<any[]>([])
+const isLoading = ref(false)
+
+const loadEnrolledCourses = async () => {
+  isLoading.value = true
+  const apiStatus = activeFilter.value === 'all' 
+    ? undefined // No status param = all
+    : activeFilter.value === 'completed' 
+      ? 'COMPLETED' 
+      : 'IN_PROGRESS' // 'progress' -> IN_PROGRESS
+
+  // Actually, 'all' in UI might mean showing everything locally, OR fetching everything.
+  // The API supports status filter. Let's use clean fetching for simplicity and accuracy.
+  // Although checking the previous mock, 'all' showed both. 
+  // If we want 'all' to show everything, we should pass undefined status.
+  // If we filter client side, we fetch ALL first.
+  
+  // Strategy: Fetch based on filter.
+  // If 'all', do not send status.
+  const res = await fetchEnrolledCourses({ 
+    status: activeFilter.value === 'all' ? undefined : (activeFilter.value === 'completed' ? 'COMPLETED' : 'IN_PROGRESS')
+  })
+
+  if (res.success) {
+    enrolledCourses.value = (res.data || []).map(item => ({
+      id: item.course_id, // CourseCard might expect course id for links, or enrollment id? Usually CourseCard links to course detail.
+      // Wait, CourseCard likely needs course ID to link to /classroom/learning/:id
+      enrollment_id: item.id,
+      title: getLocalizedText(item.course.title),
+      progress: item.progress_percentage,
+      completed: item.status === 'COMPLETED',
+      thumbnail_url: item.course.thumbnail_url // CourseCard might need this
+    }))
+  }
+  isLoading.value = false
+}
+
+// Watch filter changes to reload
+watch(activeFilter, () => {
+  loadEnrolledCourses()
 })
 
-const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
-  activeFilter.value = filter
-}
+onMounted(() => {
+  if (route.query.enrolled) {
+    showEnrollModal.value = true
+  }
+  loadEnrolledCourses()
+})
 
 // Mock certificate download action
 const downloadCertificate = () => {
@@ -77,21 +102,21 @@ const downloadCertificate = () => {
         <button 
           :class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('all')"
+          @click="activeFilter = 'all'"
         >
           {{ $t('myCourses.filterAll') }}
         </button>
         <button 
           :class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('progress')"
+          @click="activeFilter = 'progress'"
         >
           {{ $t('myCourses.filterProgress') }}
         </button>
         <button 
           :class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'" 
           style="white-space: nowrap;"
-          @click="filterCourses('completed')"
+          @click="activeFilter = 'completed'"
         >
           {{ $t('myCourses.filterCompleted') }}
         </button>
@@ -99,19 +124,27 @@ const downloadCertificate = () => {
     </div>
 
     <!-- Courses Grid -->
-    <div class="my-courses-grid">
-      <template v-for="course in filteredCourses" :key="course.id">
+    <div v-if="isLoading" class="flex justify-center py-20">
+       <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
+          <span class="visually-hidden">Loading...</span>
+       </div>
+    </div>
+    <div v-else class="my-courses-grid">
+      <template v-for="course in enrolledCourses" :key="course.id">
         <!-- In Progress Course Card -->
         <CourseCard 
           v-if="!course.completed"
           :title="course.title"
           :progress="course.progress"
+          :image="course.thumbnail_url"
           show-continue
         />
         <!-- Completed Course Card -->
         <CourseCard 
           v-else
           :title="course.title"
+          :progress="100"
+          :image="course.thumbnail_url"
           :completed="true"
           show-certificate
           show-study-again
@@ -121,7 +154,7 @@ const downloadCertificate = () => {
     </div>
 
     <!-- Empty State -->
-    <div v-if="filteredCourses.length === 0" class="empty-state">
+    <div v-if="!isLoading && enrolledCourses.length === 0" class="empty-state">
       <div class="empty-state-icon">📚</div>
       <h3 class="empty-state-title">{{ $t('myCourses.emptyTitle') }}</h3>
       <p class="empty-state-description">{{ $t('myCourses.emptyDesc') }}</p>