From 096b5bbc52263c32f3a8917a4ced330fbff76fce Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Fri, 20 Feb 2026 16:47:27 +0700
Subject: [PATCH] feat: Add `useCourse` composable for course data management
 and `CourseDetailView` component for displaying course details.

---
 .../components/discovery/CourseDetailView.vue | 13 +++++++---
 Frontend-Learner/composables/useCourse.ts     | 26 +++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/Frontend-Learner/components/discovery/CourseDetailView.vue b/Frontend-Learner/components/discovery/CourseDetailView.vue
index 0d26ce87..3f1446a8 100644
--- a/Frontend-Learner/components/discovery/CourseDetailView.vue
+++ b/Frontend-Learner/components/discovery/CourseDetailView.vue
@@ -55,6 +55,13 @@ const handleEnroll = () => {
     // In this pattern, we just emit.
     setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
 };
+const instructorData = computed(() => {
+    if (props.course?.instructors && props.course.instructors.length > 0) {
+        const primary = props.course.instructors.find((i: any) => i.is_primary);
+        return primary ? primary.user : props.course.instructors[0].user;
+    }
+    return props.course?.creator || null;
+});
 </script>
 
 <template>
@@ -122,14 +129,14 @@ const handleEnroll = () => {
                     <!-- Instructor Info -->
                     <div class="flex flex-col sm:flex-row gap-6 items-start sm:items-center pb-8 border-b border-slate-200 dark:border-slate-800">
                         <q-avatar size="64px">
-                            <img :src="course.instructor?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
+                            <img :src="instructorData?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
                         </q-avatar>
                         <div>
                             <div class="text-sm text-slate-500 mb-1 font-bold uppercase tracking-wider">{{ $t('course.instructor') }}</div>
                             <div class="font-bold text-xl text-slate-800 dark:text-white">
-                                {{ course.instructor?.profile?.first_name || 'Unknown' }} {{ course.instructor?.profile?.last_name || 'Instructor' }}
+                                {{ instructorData?.profile?.first_name || 'Unknown' }} {{ instructorData?.profile?.last_name || 'Instructor' }}
                             </div>
-                            <div class="text-slate-500 text-sm mt-1">{{ course.instructor?.email || 'No contact info' }}</div>
+                            <div class="text-slate-500 text-sm mt-1">{{ instructorData?.email || 'No contact info' }}</div>
                         </div>
                     </div>
 
diff --git a/Frontend-Learner/composables/useCourse.ts b/Frontend-Learner/composables/useCourse.ts
index 66ab5ade..7e477d5f 100644
--- a/Frontend-Learner/composables/useCourse.ts
+++ b/Frontend-Learner/composables/useCourse.ts
@@ -37,6 +37,32 @@ export interface Course {
       video_url?: string
     }[]
   }[]
+
+  // ข้อมูลผู้สอนและเจ้าของคอร์ส
+  creator?: {
+    id: number
+    username: string
+    email: string
+    profile: {
+      first_name: string
+      last_name: string
+      avatar_url: string
+    }
+  }
+  instructors?: {
+    user_id: number
+    is_primary: boolean
+    user: {
+      id: number
+      username: string
+      email: string
+      profile: {
+        first_name: string
+        last_name: string
+        avatar_url: string
+      }
+    }
+  }[]
 }
 
 interface CourseResponse {