From be5b9756be84e35524a2a8573048de52254eeb4d Mon Sep 17 00:00:00 2001
From: Missez <lertpisi@gmail.com>
Date: Thu, 5 Feb 2026 09:31:24 +0700
Subject: [PATCH] feat: Implement instructor course management, including
 student progress tracking and course content views, alongside admin user
 management.

---
 .../components/course/AnnouncementsTab.vue    |  458 ++++++
 .../components/course/InstructorsTab.vue      |  233 +++
 .../components/course/QuizResultsTab.vue      |  470 ++++++
 .../components/course/StructureTab.vue        |  107 ++
 .../components/course/StudentsTab.vue         |  447 ++++++
 .../pages/admin/users/index.vue               |   22 +-
 .../[chapterId]/lessons/[lessonId]/video.vue  |  246 ++-
 .../pages/instructor/courses/[id]/index.vue   | 1374 +----------------
 .../pages/instructor/courses/index.vue        |    1 +
 frontend_management/services/admin.service.ts |    1 +
 .../services/instructor.service.ts            |  143 +-
 11 files changed, 2116 insertions(+), 1386 deletions(-)
 create mode 100644 frontend_management/components/course/AnnouncementsTab.vue
 create mode 100644 frontend_management/components/course/InstructorsTab.vue
 create mode 100644 frontend_management/components/course/QuizResultsTab.vue
 create mode 100644 frontend_management/components/course/StructureTab.vue
 create mode 100644 frontend_management/components/course/StudentsTab.vue

diff --git a/frontend_management/components/course/AnnouncementsTab.vue b/frontend_management/components/course/AnnouncementsTab.vue
new file mode 100644
index 00000000..84b49a14
--- /dev/null
+++ b/frontend_management/components/course/AnnouncementsTab.vue
@@ -0,0 +1,458 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-semibold text-gray-900">ประกาศ</h2>
+      <q-btn
+        color="primary"
+        label="สร้างประกาศ"
+        icon="add"
+        @click="openDialog()"
+      />
+    </div>
+
+    <div v-if="loading" class="flex justify-center py-10">
+      <q-spinner color="primary" size="40px" />
+    </div>
+
+    <div v-else-if="announcements.length === 0" class="text-center py-10 text-gray-500">
+      <q-icon name="campaign" size="60px" color="grey-4" class="mb-4" />
+      <p>ยังไม่มีประกาศ</p>
+      <q-btn
+        color="primary"
+        label="สร้างประกาศแรก"
+        class="mt-4"
+        @click="openDialog()"
+      />
+    </div>
+
+    <div v-else class="space-y-4">
+      <q-card
+        v-for="announcement in announcements"
+        :key="announcement.id"
+        flat
+        bordered
+        class="rounded-lg"
+      >
+        <q-card-section>
+          <div class="flex items-start justify-between">
+            <div class="flex-1">
+              <div class="flex items-center gap-2">
+                <q-icon v-if="announcement.is_pinned" name="push_pin" color="orange" size="20px" />
+                <h3 class="font-semibold text-gray-900">{{ announcement.title.th }}</h3>
+                <q-badge :color="announcement.status === 'PUBLISHED' ? 'green' : 'grey'">
+                  {{ announcement.status === 'PUBLISHED' ? 'เผยแพร่' : 'ฉบับร่าง' }}
+                </q-badge>
+              </div>
+              <p class="text-sm text-gray-500 mt-1">{{ announcement.title.en }}</p>
+              <p class="text-gray-600 mt-3 whitespace-pre-line">{{ announcement.content.th }}</p>
+              <p class="text-xs text-gray-400 mt-3">
+                สร้างเมื่อ {{ formatDate(announcement.created_at) }}
+              </p>
+            </div>
+            <div class="flex gap-1">
+              <q-btn flat round icon="edit" color="primary" size="sm" @click="openDialog(announcement)" />
+              <q-btn flat round icon="delete" color="negative" size="sm" @click="confirmDelete(announcement)" />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+
+    <!-- Announcement Dialog -->
+    <q-dialog v-model="showDialog" persistent>
+      <q-card style="min-width: 600px; max-width: 700px">
+        <q-card-section class="row items-center q-pb-none">
+          <div class="text-h6">{{ editing ? 'แก้ไขประกาศ' : 'สร้างประกาศใหม่' }}</div>
+          <q-space />
+          <q-btn icon="close" flat round dense @click="showDialog = false" />
+        </q-card-section>
+
+        <q-card-section>
+          <div class="space-y-4">
+            <q-input
+              v-model="form.title.th"
+              outlined
+              label="หัวข้อ (ภาษาไทย) *"
+              :rules="[val => !!val || 'กรุณากรอกหัวข้อ']"
+              lazy-rules="ondemand"
+              hide-bottom-space
+            />
+            <q-input
+              v-model="form.title.en"
+              outlined
+              label="หัวข้อ (English)"
+            />
+            <q-input
+              v-model="form.content.th"
+              outlined
+              type="textarea"
+              rows="4"
+              label="เนื้อหา (ภาษาไทย) *"
+              :rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
+              lazy-rules="ondemand"
+              hide-bottom-space
+            />
+            <q-input
+              v-model="form.content.en"
+              outlined
+              type="textarea"
+              rows="4"
+              label="เนื้อหา (English)"
+            />
+            <div class="flex gap-4">
+              <q-toggle v-model="form.is_pinned" label="ปักหมุด" />
+              <q-select
+                v-model="form.status"
+                :options="[
+                  { label: 'ฉบับร่าง', value: 'DRAFT' },
+                  { label: 'เผยแพร่', value: 'PUBLISHED' }
+                ]"
+                outlined
+                emit-value
+                map-options
+                label="สถานะ"
+                class="flex-1"
+              />
+            </div>
+
+            <!-- Published At -->
+            <div class="row q-col-gutter-sm" v-if="form.status === 'PUBLISHED'">
+              <div class="col-12 col-md-12">
+                <q-input filled v-model="form.published_at" label="วันเวลาที่เผยแพร่ (ไม่ระบุ = เผยแพร่ทันที)">
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer">
+                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-date v-model="form.published_at" mask="YYYY-MM-DD HH:mm">
+                          <div class="row items-center justify-end">
+                            <q-btn v-close-popup label="Close" color="primary" flat />
+                          </div>
+                        </q-date>
+                      </q-popup-proxy>
+                    </q-icon>
+                  </template>
+
+                  <template v-slot:append>
+                    <q-icon name="access_time" class="cursor-pointer">
+                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                        <q-time v-model="form.published_at" mask="YYYY-MM-DD HH:mm" format24h>
+                          <div class="row items-center justify-end">
+                            <q-btn v-close-popup label="Close" color="primary" flat />
+                          </div>
+                        </q-time>
+                      </q-popup-proxy>
+                    </q-icon>
+                  </template>
+                </q-input>
+              </div>
+            </div>
+
+            <!-- Attachments Section -->
+            <div class="border rounded-lg p-4">
+              <div class="flex justify-between items-center mb-3">
+                <h4 class="font-semibold text-gray-700">ไฟล์แนบ</h4>
+                <q-btn
+                  size="sm"
+                  color="primary"
+                  icon="attach_file"
+                  label="เพิ่มไฟล์"
+                  :loading="uploadingAttachment"
+                  @click="triggerFileInput"
+                />
+                <input
+                  ref="fileInputRef"
+                  type="file"
+                  class="hidden"
+                  @change="handleFileUpload"
+                />
+              </div>
+
+              <!-- Existing Attachments (edit mode) -->
+              <div v-if="editing?.attachments && editing.attachments.length > 0" class="space-y-2 mb-2">
+                <div
+                  v-for="attachment in editing?.attachments"
+                  :key="attachment.id"
+                  class="flex items-center justify-between bg-gray-50 rounded p-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <q-icon name="insert_drive_file" color="grey" />
+                    <span class="text-sm">{{ attachment.file_name }}</span>
+                    <span class="text-xs text-gray-400">({{ formatFileSize(attachment.file_size) }})</span>
+                  </div>
+                  <q-btn
+                    flat
+                    round
+                    size="sm"
+                    icon="delete"
+                    color="negative"
+                    :loading="deletingAttachmentId === attachment.id"
+                    @click="deleteAttachment(attachment.id)"
+                  />
+                </div>
+              </div>
+
+              <!-- Pending Files (create mode) -->
+              <div v-if="pendingFiles.length > 0" class="space-y-2 mb-2">
+                <div
+                  v-for="(file, index) in pendingFiles"
+                  :key="index"
+                  class="flex items-center justify-between bg-blue-50 rounded p-2"
+                >
+                  <div class="flex items-center gap-2">
+                    <q-icon name="upload_file" color="primary" />
+                    <span class="text-sm">{{ file.name }}</span>
+                    <span class="text-xs text-gray-400">({{ formatFileSize(file.size) }})</span>
+                    <q-badge color="blue" label="รอสร้าง" size="sm" />
+                  </div>
+                  <q-btn
+                    flat
+                    round
+                    size="sm"
+                    icon="close"
+                    color="grey"
+                    @click="removePendingFile(index)"
+                  />
+                </div>
+              </div>
+
+              <div v-if="!editing?.attachments?.length && pendingFiles.length === 0" class="text-center py-4 text-gray-400 text-sm">
+                ยังไม่มีไฟล์แนบ
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right" class="q-pa-md">
+          <q-btn flat label="ยกเลิก" color="grey-7" @click="showDialog = false" />
+          <q-btn
+            :label="editing ? 'บันทึก' : 'สร้าง'"
+            color="primary"
+            :loading="saving"
+            @click="save"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import {
+  instructorService,
+  type AnnouncementResponse,
+  type CreateAnnouncementRequest
+} from '~/services/instructor.service';
+
+interface Props {
+  courseId: number;
+}
+
+const props = defineProps<Props>();
+const $q = useQuasar();
+
+// State
+const announcements = ref<AnnouncementResponse[]>([]);
+const loading = ref(false);
+const showDialog = ref(false);
+const editing = ref<AnnouncementResponse | null>(null);
+const saving = ref(false);
+
+// Form
+const form = ref<CreateAnnouncementRequest>({
+  title: { th: '', en: '' },
+  content: { th: '', en: '' },
+  is_pinned: false,
+  status: 'DRAFT',
+  published_at: ''
+});
+
+// Attachments
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const uploadingAttachment = ref(false);
+const deletingAttachmentId = ref<number | null>(null);
+const pendingFiles = ref<File[]>([]);
+
+// Methods
+const fetchAnnouncements = async () => {
+  loading.value = true;
+  try {
+    announcements.value = await instructorService.getAnnouncements(props.courseId);
+  } catch (error) {
+    console.error('Failed to fetch announcements:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดประกาศได้', position: 'top' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const openDialog = (announcement?: AnnouncementResponse) => {
+  editing.value = announcement || null;
+  if (announcement) {
+    // Format date for q-date/q-time (YYYY-MM-DD HH:mm)
+    let formattedPublishedAt = '';
+    if (announcement.published_at) {
+      const date = new Date(announcement.published_at);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      formattedPublishedAt = `${year}-${month}-${day} ${hours}:${minutes}`;
+    }
+
+    form.value = {
+      title: { ...announcement.title },
+      content: { ...announcement.content },
+      is_pinned: announcement.is_pinned,
+      status: announcement.status,
+      published_at: formattedPublishedAt
+    };
+  } else {
+    form.value = {
+      title: { th: '', en: '' },
+      content: { th: '', en: '' },
+      is_pinned: false,
+      status: 'DRAFT',
+      published_at: ''
+    };
+  }
+  pendingFiles.value = [];
+  showDialog.value = true;
+};
+
+// Watch for published_at changes to auto-set status
+watch(() => form.value.published_at, (newVal) => {
+  if (newVal) {
+    form.value.status = 'PUBLISHED';
+  }
+});
+
+// Watch for status changes to clear published_at if DRAFT
+watch(() => form.value.status, (newVal) => {
+  if (newVal === 'DRAFT') {
+    form.value.published_at = '';
+  }
+});
+
+const save = async () => {
+  if (!form.value.title.th || !form.value.content.th) {
+    $q.notify({ type: 'warning', message: 'กรุณากรอกข้อมูลที่จำเป็น', position: 'top' });
+    return;
+  }
+
+  saving.value = true;
+  try {
+    if (editing.value) {
+      await instructorService.updateAnnouncement(props.courseId, editing.value.id, form.value);
+      $q.notify({ type: 'positive', message: 'บันทึกประกาศสำเร็จ', position: 'top' });
+    } else {
+      const created = await instructorService.createAnnouncement(props.courseId, form.value);
+      
+      // Upload pending files
+      for (const file of pendingFiles.value) {
+        try {
+          await instructorService.uploadAnnouncementAttachment(props.courseId, created.data.id, file);
+        } catch (err) {
+          console.error('Failed to upload attachment:', err);
+        }
+      }
+      
+      $q.notify({ type: 'positive', message: 'สร้างประกาศสำเร็จ', position: 'top' });
+    }
+    showDialog.value = false;
+    fetchAnnouncements();
+  } catch (error: any) {
+    $q.notify({ 
+      type: 'negative', 
+      message: error.data?.message || 'ไม่สามารถบันทึกประกาศได้', 
+      position: 'top' 
+    });
+  } finally {
+    saving.value = false;
+  }
+};
+
+const confirmDelete = (announcement: AnnouncementResponse) => {
+  $q.dialog({
+    title: 'ยืนยันการลบ',
+    message: `คุณต้องการลบประกาศ "${announcement.title.th}" หรือไม่?`,
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    try {
+      await instructorService.deleteAnnouncement(props.courseId, announcement.id);
+      $q.notify({ type: 'positive', message: 'ลบประกาศสำเร็จ', position: 'top' });
+      fetchAnnouncements();
+    } catch (error) {
+      $q.notify({ type: 'negative', message: 'ไม่สามารถลบประกาศได้', position: 'top' });
+    }
+  });
+};
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click();
+};
+
+const handleFileUpload = async (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const files = input.files;
+  if (!files || files.length === 0) return;
+  
+  if (editing.value) {
+    // Upload immediately in edit mode
+    uploadingAttachment.value = true;
+    try {
+      await instructorService.uploadAnnouncementAttachment(props.courseId, editing.value.id, files[0]);
+      $q.notify({ type: 'positive', message: 'อัพโหลดไฟล์สำเร็จ', position: 'top' });
+      // Refresh editing
+      const all = await instructorService.getAnnouncements(props.courseId);
+      editing.value = all.find(a => a.id === editing.value?.id) || null;
+    } catch (error) {
+      $q.notify({ type: 'negative', message: 'ไม่สามารถอัพโหลดไฟล์ได้', position: 'top' });
+    } finally {
+      uploadingAttachment.value = false;
+    }
+  } else {
+    // Add to pending files in create mode
+    pendingFiles.value.push(files[0]);
+  }
+  
+  input.value = '';
+};
+
+const removePendingFile = (index: number) => {
+  pendingFiles.value.splice(index, 1);
+};
+
+const deleteAttachment = async (attachmentId: number) => {
+  if (!editing.value) return;
+  deletingAttachmentId.value = attachmentId;
+  try {
+    await instructorService.deleteAnnouncementAttachment(props.courseId, editing.value.id, attachmentId);
+    $q.notify({ type: 'positive', message: 'ลบไฟล์สำเร็จ', position: 'top' });
+    // Refresh editing
+    const all = await instructorService.getAnnouncements(props.courseId);
+    editing.value = all.find(a => a.id === editing.value?.id) || null;
+  } catch (error) {
+    $q.notify({ type: 'negative', message: 'ไม่สามารถลบไฟล์ได้', position: 'top' });
+  } finally {
+    deletingAttachmentId.value = null;
+  }
+};
+
+const formatDate = (dateStr: string) => {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
+};
+
+const formatFileSize = (bytes: number) => {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+};
+
+// Fetch on mount
+onMounted(() => {
+  fetchAnnouncements();
+});
+</script>
diff --git a/frontend_management/components/course/InstructorsTab.vue b/frontend_management/components/course/InstructorsTab.vue
new file mode 100644
index 00000000..d102cb13
--- /dev/null
+++ b/frontend_management/components/course/InstructorsTab.vue
@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-semibold text-gray-900">ผู้สอนในรายวิชา</h2>
+      <q-btn v-if="isPrimaryInstructor" color="primary" icon="person_add" label="เพิ่มผู้สอน" @click="showAddDialog = true" />
+    </div>
+
+    <div v-if="loading" class="flex justify-center py-10">
+      <q-spinner color="primary" size="40px" />
+    </div>
+
+    <div v-else-if="instructors.length === 0" class="text-center py-10 text-gray-500">
+      <q-icon name="group_off" size="60px" color="grey-4" class="mb-4" />
+      <p>ยังไม่มีข้อมูลผู้สอน</p>
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <q-card v-for="instructor in instructors" :key="instructor.id" flat bordered class="rounded-lg">
+        <q-item>
+          <q-item-section avatar>
+            <q-avatar size="50px" color="primary" text-color="white">
+              <img v-if="instructor.user.avatar_url" :src="instructor.user.avatar_url">
+              <span v-else>{{ instructor.user.username.charAt(0).toUpperCase() }}</span>
+            </q-avatar>
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label class="text-base font-medium flex items-center gap-2">
+              {{ instructor.user.username }}
+              <q-badge v-if="instructor.is_primary" color="primary" label="หัวหน้าผู้สอน" />
+            </q-item-label>
+            <q-item-label caption>{{ instructor.user.email }}</q-item-label>
+          </q-item-section>
+
+          <q-item-section side v-if="isPrimaryInstructor">
+            <q-btn flat dense round icon="more_vert">
+              <q-menu>
+                <q-item v-if="!instructor.is_primary" clickable v-close-popup @click="setPrimary(instructor.user_id)">
+                  <q-item-section avatar>
+                    <q-icon name="verified_user" color="primary" />
+                  </q-item-section>
+                  <q-item-section>ตั้งเป็นหัวหน้าผู้สอน</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="removeInstructor(instructor.user_id)" class="text-red">
+                  <q-item-section avatar>
+                    <q-icon name="person_remove" color="red" />
+                  </q-item-section>
+                  <q-item-section>ลบผู้สอน</q-item-section>
+                </q-item>
+              </q-menu>
+            </q-btn>
+          </q-item-section>
+        </q-item>
+      </q-card>
+    </div>
+
+    <!-- Add Instructor Dialog -->
+    <q-dialog v-model="showAddDialog">
+      <q-card style="min-width: 400px">
+        <q-card-section>
+          <div class="text-h6">เพิ่มผู้สอน</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-select
+            v-model="selectedUser"
+            :options="searchResults"
+            :option-label="(item) => item ? `${item.username} (${item.email})` : ''"
+            label="ค้นหาผู้ใช้"
+            use-input
+            filled
+            @filter="filterUsers"
+            :loading="loadingSearch"
+          >
+            <template v-slot:option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section avatar>
+                  <q-avatar>
+                    <img v-if="scope.opt.profile?.avatar_url" :src="scope.opt.profile.avatar_url">
+                    <span v-else>{{ scope.opt.username.charAt(0).toUpperCase() }}</span>
+                  </q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ scope.opt.username }}</q-item-label>
+                  <q-item-label caption>{{ scope.opt.email }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  ไม่พบผู้ใช้
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="ยกเลิก" color="primary" v-close-popup />
+          <q-btn flat label="เพิ่ม" color="primary" @click="addInstructor" :disable="!selectedUser" :loading="addingInstructor" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import {
+  instructorService,
+  type CourseInstructorResponse,
+  type SearchInstructorResult
+} from '~/services/instructor.service';
+import { useAuthStore } from '~/stores/auth';
+
+interface Props {
+  courseId: number;
+}
+
+const props = defineProps<Props>();
+const $q = useQuasar();
+const authStore = useAuthStore();
+
+// State
+const instructors = ref<CourseInstructorResponse[]>([]);
+const loading = ref(false);
+const showAddDialog = ref(false);
+const selectedUser = ref<SearchInstructorResult | null>(null);
+const searchResults = ref<SearchInstructorResult[]>([]);
+const loadingSearch = ref(false);
+const addingInstructor = ref(false);
+
+// Computed
+const isPrimaryInstructor = computed(() => {
+  if (!authStore.user?.id) return false;
+  const currentUserId = parseInt(authStore.user.id);
+  const myRecord = instructors.value.find(i => i.user_id === currentUserId);
+  return myRecord?.is_primary === true;
+});
+
+// Methods
+const fetchInstructors = async () => {
+  loading.value = true;
+  try {
+    instructors.value = await instructorService.getCourseInstructors(props.courseId);
+  } catch (error) {
+    console.error('Failed to fetch instructors:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลผู้สอนได้', position: 'top' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const filterUsers = async (val: string, update: (fn: () => void) => void, abort: () => void) => {
+  if (val.length < 2) {
+    abort();
+    return;
+  }
+  loadingSearch.value = true;
+  try {
+    const results = await instructorService.searchInstructors(val, props.courseId);
+    update(() => {
+      searchResults.value = results;
+    });
+  } catch (error) {
+    console.error('Search failed:', error);
+    abort();
+  } finally {
+    loadingSearch.value = false;
+  }
+};
+
+const addInstructor = async () => {
+  if (!selectedUser.value) return;
+  addingInstructor.value = true;
+  try {
+    await instructorService.addCourseInstructor(props.courseId, selectedUser.value.id);
+    $q.notify({ type: 'positive', message: 'เพิ่มผู้สอนสำเร็จ', position: 'top' });
+    showAddDialog.value = false;
+    selectedUser.value = null;
+    fetchInstructors();
+  } catch (error: any) {
+    $q.notify({ 
+      type: 'negative', 
+      message: error.data?.message || 'ไม่สามารถเพิ่มผู้สอนได้', 
+      position: 'top' 
+    });
+  } finally {
+    addingInstructor.value = false;
+  }
+};
+
+const setPrimary = async (userId: number) => {
+  try {
+    await instructorService.setPrimaryInstructor(props.courseId, userId);
+    $q.notify({ type: 'positive', message: 'ตั้งเป็นหัวหน้าผู้สอนสำเร็จ', position: 'top' });
+    fetchInstructors();
+  } catch (error: any) {
+    $q.notify({ 
+      type: 'negative', 
+      message: error.data?.message || 'ไม่สามารถตั้งเป็นหัวหน้าผู้สอนได้', 
+      position: 'top' 
+    });
+  }
+};
+
+const removeInstructor = async (userId: number) => {
+  $q.dialog({
+    title: 'ยืนยันการลบ',
+    message: 'คุณต้องการลบผู้สอนคนนี้หรือไม่?',
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    try {
+      await instructorService.removeCourseInstructor(props.courseId, userId);
+      $q.notify({ type: 'positive', message: 'ลบผู้สอนสำเร็จ', position: 'top' });
+      fetchInstructors();
+    } catch (error: any) {
+      $q.notify({ 
+        type: 'negative', 
+        message: error.data?.message || 'ไม่สามารถลบผู้สอนได้', 
+        position: 'top' 
+      });
+    }
+  });
+};
+
+// Fetch on mount
+onMounted(() => {
+  fetchInstructors();
+});
+</script>
diff --git a/frontend_management/components/course/QuizResultsTab.vue b/frontend_management/components/course/QuizResultsTab.vue
new file mode 100644
index 00000000..eef37e63
--- /dev/null
+++ b/frontend_management/components/course/QuizResultsTab.vue
@@ -0,0 +1,470 @@
+<template>
+  <div>
+    <!-- No Quizzes State -->
+    <div v-if="quizzes.length === 0" class="text-center py-10 text-gray-500">
+      <q-icon name="quiz" size="60px" color="grey-4" class="mb-4" />
+      <p>หลักสูตรนี้ยังไม่มีแบบทดสอบ</p>
+    </div>
+
+    <!-- Quiz Selection -->
+    <div v-else class="space-y-6">
+      <div class="flex flex-col md:flex-row items-center gap-4 bg-white p-4 rounded-lg border border-gray-200">
+        <div class="flex-1 w-full">
+          <label class="block text-sm font-medium text-gray-700 mb-1">เลือกแบบทดสอบ</label>
+          <q-select
+            v-model="selectedQuiz"
+            :options="quizzes"
+            option-label="label"
+            outlined
+            dense
+            emit-value
+            map-options
+            class="bg-white"
+            @update:model-value="handleQuizChange"
+          />
+        </div>
+      </div>
+      
+      <!-- Search and Filter -->
+      <q-card flat bordered class="rounded-lg mb-6" v-if="selectedQuiz">
+        <q-card-section>
+          <div class="flex flex-col md:flex-row gap-4">
+            <q-input
+              v-model="search"
+              outlined
+              dense
+              placeholder="ค้นหาผู้เรียน..."
+              class="flex-1"
+              debounce="600"
+              @update:model-value="handleSearch"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" />
+              </template>
+              <template v-slot:append v-if="search">
+                <q-icon name="close" class="cursor-pointer" @click="search = ''; handleSearch()" />
+              </template>
+            </q-input>
+            
+            <q-select
+              v-model="statusFilter"
+              outlined
+              dense
+              :options="statusFilterOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+              class="w-full md:w-40"
+              @update:model-value="handleSearch"
+            />
+
+            <q-select
+              v-model="pagination.rowsPerPage"
+              :options="limitOptions"
+              option-value="value"
+              option-label="label"
+              outlined
+              dense
+              emit-value
+              map-options
+              label="จำนวนต่อหน้า"
+              class="w-full md:w-32"
+              @update:model-value="handleLimitChange"
+            />
+          </div>
+        </q-card-section>
+      </q-card>
+
+      <!-- Stats Cards -->
+      <div v-if="stats" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <q-card flat bordered class="bg-blue-50 border-blue-100">
+          <q-card-section>
+            <div class="text-blue-800 text-sm font-medium">คะแนนเฉลี่ย</div>
+            <div class="text-2xl font-bold text-blue-900 mt-1">
+              {{ stats.averageScore.toFixed(1) }} / {{ stats.totalScore }}
+            </div>
+          </q-card-section>
+        </q-card>
+        
+        <q-card flat bordered class="bg-green-50 border-green-100">
+          <q-card-section>
+            <div class="text-green-800 text-sm font-medium">ผู้ที่สอบผ่าน</div>
+            <div class="text-2xl font-bold text-green-900 mt-1">
+              {{ stats.passCount }} คน
+              <span class="text-sm font-normal text-green-700">({{ stats.passRate.toFixed(1) }}%)</span>
+            </div>
+          </q-card-section>
+        </q-card>
+
+        <q-card flat bordered class="bg-purple-50 border-purple-100">
+          <q-card-section>
+            <div class="text-purple-800 text-sm font-medium">จำนวนผู้เข้าสอบ</div>
+            <div class="text-2xl font-bold text-purple-900 mt-1">
+              {{ stats.totalStudents }} คน
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <!-- Students Table -->
+      <div v-if="selectedQuiz">
+        <q-table
+          :rows="students"
+          :columns="columns"
+          row-key="user_id"
+          :loading="loading"
+          flat
+          bordered
+          hide-pagination
+          :pagination="pagination"
+          no-data-label="ยังไม่มีข้อมูล"
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" @click="openStudentDetail(props.row.user_id)" class="cursor-pointer hover:bg-gray-50">
+              <q-td key="student" :props="props">
+                <div class="flex items-center gap-3">
+                  <q-avatar size="32px">
+                    <img :src="props.row.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
+                  </q-avatar>
+                  <div>
+                    <div class="font-medium">{{ props.row.first_name }} {{ props.row.last_name }}</div>
+                    <div class="text-xs text-gray-500">{{ props.row.email }}</div>
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="score" :props="props" class="text-center">
+                <div class="font-medium">
+                  {{ props.row.best_score }} / {{ currentQuizData?.total_score }}
+                </div>
+              </q-td>
+              <q-td key="status" :props="props" class="text-center">
+                <q-chip
+                  :color="props.row.is_passed ? 'green-1' : 'red-1'"
+                  :text-color="props.row.is_passed ? 'green-9' : 'red-9'"
+                  size="md"
+                >
+                  {{ props.row.is_passed ? 'ผ่าน' : 'ไม่ผ่าน' }}
+                </q-chip>
+              </q-td>
+              <q-td key="attempts" :props="props" class="text-center">
+                {{ props.row.total_attempts }} ครั้ง
+              </q-td>
+              <q-td key="last_attempt" :props="props">
+                <div v-if="props.row.latest_attempt">
+                  {{ formatDate(props.row.latest_attempt.completed_at) }}
+                </div>
+                <div v-else class="text-gray-400">-</div>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+
+         <!-- Custom Pagination -->
+        <div v-if="pagination.rowsNumber > pagination.rowsPerPage" class="flex justify-center mt-4">
+          <q-pagination
+            v-model="pagination.page"
+            :max="Math.ceil(pagination.rowsNumber / pagination.rowsPerPage)"
+            :max-pages="6"
+            direction-links
+            boundary-links
+            @update:model-value="handlePageChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Student Quiz Detail Dialog -->
+    <q-dialog v-model="showDetailDialog" maximized transition-show="slide-up" transition-hide="slide-down">
+      <q-card class="bg-gray-50">
+        <q-card-section class="bg-white shadow-sm sticky top-0 z-10">
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-4" v-if="attemptDetail">
+              <q-avatar size="48px" color="primary" text-color="white">
+                <img v-if="attemptDetail.student.user_id" :src="`https://ui-avatars.com/api/?name=${attemptDetail.student.first_name}+${attemptDetail.student.last_name}`" /> 
+                <span v-else>{{ attemptDetail.student.username.charAt(0).toUpperCase() }}</span> 
+              </q-avatar>
+              <div>
+                <h2 class="text-xl font-semibold">{{ attemptDetail.student.first_name }} {{ attemptDetail.student.last_name }}</h2>
+                <div class="text-gray-500 text-sm">
+                  {{ attemptDetail.student.email }} · ครั้งที่ {{ attemptDetail.attempt_number }}
+                </div>
+              </div>
+            </div>
+             <div v-else class="h-12 w-48 bg-gray-200 animate-pulse rounded"></div>
+            <q-btn icon="close" flat round dense v-close-popup />
+          </div>
+        </q-card-section>
+
+        <q-card-section class="p-6 max-w-4xl mx-auto w-full">
+          <div v-if="loadingDetail" class="flex justify-center py-20">
+            <q-spinner color="primary" size="50px" />
+          </div>
+
+          <div v-else-if="attemptDetail" class="space-y-6">
+            <!-- Summary Stats -->
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <q-card flat bordered class="text-center p-4">
+                <div class="text-gray-500 text-sm mb-1">คะแนนที่ได้</div>
+                <div class="text-3xl font-bold" :class="attemptDetail.is_passed ? 'text-green-600' : 'text-red-600'">
+                  {{ attemptDetail.score }} / {{ attemptDetail.total_score }}
+                </div>
+              </q-card>
+              <q-card flat bordered class="text-center p-4">
+                 <div class="text-gray-500 text-sm mb-1">สถานะ</div>
+                 <q-chip
+                  :color="attemptDetail.is_passed ? 'green-1' : 'red-1'"
+                  :text-color="attemptDetail.is_passed ? 'green-9' : 'red-9'"
+                  class="font-bold"
+                >
+                  {{ attemptDetail.is_passed ? 'ผ่าน' : 'ไม่ผ่าน' }}
+                </q-chip>
+              </q-card>
+               <q-card flat bordered class="text-center p-4">
+                <div class="text-gray-500 text-sm mb-1">ตอบถูก</div>
+                <div class="text-xl font-semibold">
+                  {{ attemptDetail.correct_answers }} / {{ attemptDetail.total_questions }} ข้อ
+                </div>
+              </q-card>
+               <q-card flat bordered class="text-center p-4">
+                <div class="text-gray-500 text-sm mb-1">วันที่ทำ</div>
+                <div class="text-xl font-semibold">
+                  {{ formatDate(attemptDetail.completed_at) }}
+                  <!-- Note: Ideally calculate duration if started_at is available -->
+                </div>
+              </q-card>
+            </div>
+
+            <!-- Questions Review -->
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+              <div class="p-4 border-b bg-gray-50 font-semibold text-gray-700">
+                รายละเอียดการตอบคำถาม
+              </div>
+              <div class="divide-y">
+                <div 
+                  v-for="(answer, index) in attemptDetail.answers_review" 
+                  :key="answer.question_id"
+                  class="p-6"
+                >
+                  <div class="flex gap-4">
+                    <div class="flex-none">
+                      <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-white"
+                        :class="answer.is_correct ? 'bg-green-500' : 'bg-red-500'"
+                      >
+                        {{ index + 1 }}
+                      </div>
+                    </div>
+                    <div class="flex-1">
+                      <div class="font-medium text-lg mb-3">{{ answer.question_text?.th || 'ไม่สามารถโหลดคำถามได้' }}</div>
+                      
+                      <div class="p-3 rounded-lg border-l-4" 
+                        :class="answer.is_correct ? 'bg-green-50 border-green-500' : 'bg-red-50 border-red-500'"
+                      >
+                        <div class="text-sm text-gray-500 mb-1">คำตอบที่เลือก:</div>
+                        <div class="font-medium" :class="answer.is_correct ? 'text-green-800' : 'text-red-800'">
+                          {{ answer.selected_choice_text?.th || '-' }}
+                        </div>
+                      </div>
+                      <div class="mt-2 text-right text-sm text-gray-500">
+                        คะแนน: {{ answer.score }} / {{ answer.question_score }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import { 
+  instructorService, 
+  type ChapterResponse,
+  type QuizScoreStudentResponse,
+  type QuizScoresData,
+  type QuizAttemptDetailData
+} from '~/services/instructor.service';
+
+interface Props {
+  courseId: number;
+  chapters: ChapterResponse[];
+}
+
+const props = defineProps<Props>();
+const $q = useQuasar();
+
+// Columns
+const columns = [
+  { name: 'student', label: 'ผู้เรียน', align: 'left' as const, field: 'first_name' },
+  { name: 'score', label: 'คะแนนที่ดีที่สุด', align: 'center' as const, field: 'best_score' },
+  { name: 'status', label: 'สถานะ', align: 'center' as const, field: 'is_passed' },
+  { name: 'attempts', label: 'จำนวนครั้งที่สอบ', align: 'center' as const, field: 'total_attempts' },
+  { name: 'last_attempt', label: 'สอบล่าสุดเมื่อ', align: 'left' as const, field: 'latest_attempt' },
+];
+
+// State
+const selectedQuiz = ref<any>(null); // Option object
+const loading = ref(false);
+const students = ref<QuizScoreStudentResponse[]>([]);
+const currentQuizData = ref<QuizScoresData | null>(null);
+const search = ref('');
+const statusFilter = ref('all');
+
+// Student Detail Dialog
+const showDetailDialog = ref(false);
+const loadingDetail = ref(false);
+const attemptDetail = ref<QuizAttemptDetailData | null>(null);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 20,
+  rowsNumber: 0
+});
+
+const limitOptions = [
+  { label: '5 รายการ', value: 5 },
+  { label: '10 รายการ', value: 10 },
+  { label: '20 รายการ', value: 20 },
+  { label: '50 รายการ', value: 50 },
+];
+
+const statusFilterOptions = [
+  { label: 'ทั้งหมด', value: 'all' },
+  { label: 'ผ่าน', value: 'passed' },
+  { label: 'ไม่ผ่าน', value: 'failed' }
+];
+
+// Computed
+const quizzes = computed(() => {
+  const list: any[] = [];
+  props.chapters.forEach(chapter => {
+    chapter.lessons.forEach(lesson => {
+      // Assuming lesson.type === 'QUIZ' identifies a quiz
+      // Also checking if quiz object exists might be safer if type is not strictly enforcing it
+      if (lesson.type === 'QUIZ') {
+        list.push({
+          label: `${chapter.title.th} - ${lesson.title.th}`,
+          value: lesson.id,
+          total_score: lesson.quiz?.questions ? lesson.quiz.questions.reduce((sum, q) => sum + (q.score || 0), 0) : 0
+        });
+      }
+    });
+  });
+  return list;
+});
+
+const stats = computed(() => {
+  if (!currentQuizData.value || !students.value.length) return null;
+  
+  // Basic stats logic from current page data or explicit API data if available
+  const passed = students.value.filter(s => s.is_passed).length;
+  const avg = students.value.reduce((sum, s) => sum + s.best_score, 0) / students.value.length;
+  
+  return {
+    totalStudents: pagination.value.rowsNumber, // Total from API
+    passCount: passed, 
+    averageScore: avg || 0,
+    totalScore: currentQuizData.value.total_score,
+    passRate: (passed / students.value.length) * 100 || 0
+  };
+});
+
+// Methods
+const handleQuizChange = () => {
+  pagination.value.page = 1;
+  search.value = '';
+  statusFilter.value = 'all';
+  fetchScores();
+};
+
+const handleSearch = () => {
+  pagination.value.page = 1;
+  fetchScores();
+};
+
+const handleLimitChange = () => {
+  pagination.value.page = 1;
+  fetchScores();
+};
+
+const handlePageChange = (vals:any) => {
+    fetchScores();
+}
+
+const fetchScores = async () => {
+  if (!selectedQuiz.value) return;
+  
+  loading.value = true;
+  try {
+    let isPassed: boolean | undefined = undefined;
+    if (statusFilter.value === 'passed') isPassed = true;
+    if (statusFilter.value === 'failed') isPassed = false;
+
+    const response = await instructorService.getLessonQuizScores(
+      props.courseId, 
+      selectedQuiz.value, 
+      pagination.value.page, 
+      pagination.value.rowsPerPage,
+      search.value,
+      isPassed
+    );
+    
+    currentQuizData.value = response.data;
+    students.value = response.data.students;
+    
+    pagination.value.rowsNumber = response.total;
+  } catch (error) {
+    console.error('Failed to fetch quiz scores:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดผลสอบได้', position: 'top' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const openStudentDetail = async (studentId: number) => {
+  showDetailDialog.value = true;
+  loadingDetail.value = true;
+  attemptDetail.value = null;
+
+  try {
+    // Assuming we want the detail for the current lesson/quiz
+    const response = await instructorService.getStudentQuizAttemptDetail(
+      props.courseId,
+      selectedQuiz.value,
+      studentId
+    );
+    attemptDetail.value = response.data;
+  } catch (error) {
+    console.error('Failed to fetch student quiz detail:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดรายละเอียดการสอบได้', position: 'top' });
+    showDetailDialog.value = false;
+  } finally {
+    loadingDetail.value = false;
+  }
+};
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { 
+    day: 'numeric', 
+    month: 'short', 
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
+
+// Lifecycle
+onMounted(() => {
+  if (quizzes.value.length > 0) {
+    selectedQuiz.value = quizzes.value[0].value;
+    fetchScores();
+  }
+});
+</script>
diff --git a/frontend_management/components/course/StructureTab.vue b/frontend_management/components/course/StructureTab.vue
new file mode 100644
index 00000000..5dd42a69
--- /dev/null
+++ b/frontend_management/components/course/StructureTab.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-xl font-semibold text-gray-900">โครงสร้างบทเรียน</h2>
+      <q-btn
+        color="primary"
+        label="จัดการโครงสร้าง"
+        @click="navigateTo(`/instructor/courses/${courseId}/structure`)"
+      />
+    </div>
+
+    <!-- Chapters -->
+    <div v-if="chapters.length === 0" class="text-center py-10 text-gray-500">
+      ยังไม่มีบทเรียน
+    </div>
+
+    <div v-else class="space-y-4">
+      <q-card
+        v-for="chapter in sortedChapters"
+        :key="chapter.id"
+        flat
+        bordered
+        class="rounded-lg"
+      >
+        <q-card-section>
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="font-semibold text-gray-900">
+                Chapter {{ chapter.sort_order }}: {{ chapter.title.th }}
+              </div>
+              <div class="text-sm text-gray-500 mt-1">
+                {{ chapter.lessons.length }} บทเรียน · {{ getChapterDuration(chapter) }} นาที
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <!-- Lessons -->
+        <q-list separator class="border-t">
+          <q-item
+            v-for="lesson in getSortedLessons(chapter)"
+            :key="lesson.id"
+            class="py-3"
+          >
+            <q-item-section avatar>
+              <q-icon
+                :name="getLessonIcon(lesson.type)"
+                :color="getLessonIconColor(lesson.type)"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>
+                Lesson {{ chapter.sort_order }}.{{ lesson.sort_order }}: {{ lesson.title.th }}
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <span class="text-sm text-gray-500">{{ lesson.duration_minutes }} นาที</span>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChapterResponse } from '~/services/instructor.service';
+
+interface Props {
+  courseId: number;
+  chapters: ChapterResponse[];
+}
+
+const props = defineProps<Props>();
+
+// Computed
+const sortedChapters = computed(() => {
+  return props.chapters.slice().sort((a, b) => a.sort_order - b.sort_order);
+});
+
+// Methods
+const getChapterDuration = (chapter: ChapterResponse) => {
+  return chapter.lessons.reduce((sum, l) => sum + l.duration_minutes, 0);
+};
+
+const getSortedLessons = (chapter: ChapterResponse) => {
+  return chapter.lessons.slice().sort((a, b) => a.sort_order - b.sort_order);
+};
+
+const getLessonIcon = (type: string) => {
+  const icons: Record<string, string> = {
+    VIDEO: 'play_circle',
+    DOCUMENT: 'description',
+    QUIZ: 'quiz'
+  };
+  return icons[type] || 'article';
+};
+
+const getLessonIconColor = (type: string) => {
+  const colors: Record<string, string> = {
+    VIDEO: 'blue',
+    DOCUMENT: 'orange',
+    QUIZ: 'orange'
+  };
+  return colors[type] || 'grey';
+};
+</script>
diff --git a/frontend_management/components/course/StudentsTab.vue b/frontend_management/components/course/StudentsTab.vue
new file mode 100644
index 00000000..9a8f4416
--- /dev/null
+++ b/frontend_management/components/course/StudentsTab.vue
@@ -0,0 +1,447 @@
+<template>
+  <div>
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+      <q-card flat bordered class="rounded-lg">
+        <q-card-section class="text-center py-6">
+          <div class="text-4xl font-bold text-primary">{{ pagination.total }}</div>
+          <div class="text-gray-500 mt-1">ผู้เรียนทั้งหมด</div>
+        </q-card-section>
+      </q-card>
+      <q-card flat bordered class="rounded-lg">
+        <q-card-section class="text-center py-6">
+          <div class="text-4xl font-bold text-green-600">{{ completedCount }}</div>
+          <div class="text-gray-500 mt-1">จบหลักสูตร</div>
+        </q-card-section>
+      </q-card>
+    </div>
+
+    <!-- Search and Filter -->
+    <q-card flat bordered class="rounded-lg mb-6">
+      <q-card-section>
+        <div class="flex flex-col md:flex-row gap-4">
+          <q-input
+            v-model="search"
+            outlined
+            dense
+            placeholder="ค้นหาผู้เรียน..."
+            class="flex-1"
+            debounce="600"
+            @update:model-value="handleSearch"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" />
+            </template>
+            <template v-slot:append v-if="search">
+              <q-icon name="close" class="cursor-pointer" @click="search = ''; handleSearch()" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="statusFilter"
+            outlined
+            dense
+            :options="statusFilterOptions"
+            option-value="value"
+            option-label="label"
+            emit-value
+            map-options
+            class="w-full md:w-40"
+            @update:model-value="handleSearch"
+          />
+          <q-select
+            v-model="pagination.limit"
+            outlined
+            dense
+            :options="limitOptions"
+            option-value="value"
+            option-label="label"
+            emit-value
+            map-options
+            class="w-full md:w-32"
+            @update:model-value="handleLimitChange"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+
+    <div v-if="loading" class="flex justify-center py-10">
+      <q-spinner color="primary" size="40px" />
+    </div>
+
+    <div v-else-if="filteredStudents.length === 0" class="text-center py-10 text-gray-500">
+      <q-icon name="people" size="60px" color="grey-4" class="mb-4" />
+      <p>{{ search || statusFilter !== 'all' ? 'ไม่พบผู้เรียนที่ค้นหา' : 'ยังไม่มีผู้เรียนในหลักสูตรนี้' }}</p>
+    </div>
+
+    <div v-else>
+      <!-- Students Table -->
+      <q-card flat bordered class="rounded-lg">
+        <q-list separator>
+          <q-item 
+            v-for="student in filteredStudents" 
+            :key="student.user_id" 
+            class="py-4 cursor-pointer hover:bg-gray-50 transition-colors"
+            clickable
+            @click="openStudentDetail(student.user_id)"
+          >
+            <q-item-section avatar>
+              <q-avatar size="50px" color="primary" text-color="white">
+                <img v-if="student.avatar_url" :src="student.avatar_url" />
+                <span v-else>{{ student.username.charAt(0).toUpperCase() }}</span>
+              </q-avatar>
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label class="text-base font-medium">
+                {{ student.first_name }} {{ student.last_name }}
+              </q-item-label>
+              <q-item-label caption>{{ student.email }}</q-item-label>
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label caption class="mb-1">ความคืบหน้า</q-item-label>
+              <div class="flex items-center gap-2">
+                <q-linear-progress
+                  :value="student.progress_percentage / 100"
+                  color="primary"
+                  track-color="grey-3"
+                  class="flex-1"
+                  rounded
+                  size="8px"
+                />
+                <span class="text-sm text-gray-600 w-12 text-right">{{ student.progress_percentage }}%</span>
+              </div>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-badge :color="getStudentStatusColor(student.status)">
+                {{ getStudentStatusLabel(student.status) }}
+              </q-badge>
+              <q-item-label caption class="mt-1">
+                ลงทะเบียน {{ formatEnrollDate(student.enrolled_at) }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <!-- Pagination -->
+      <div v-if="pagination.total > pagination.limit" class="flex justify-center mt-4">
+        <q-pagination
+          v-model="pagination.page"
+          :max="Math.ceil(pagination.total / pagination.limit)"
+          :max-pages="6"
+          direction-links
+          boundary-links
+          @update:model-value="fetchStudents"
+        />
+      </div>
+    </div>
+
+    <!-- Student Progress Detail Modal -->
+    <q-dialog v-model="showDetailModal" maximized transition-show="slide-up" transition-hide="slide-down">
+      <q-card class="bg-gray-50">
+        <!-- Header -->
+        <q-card-section class="bg-white shadow-sm">
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-4" v-if="studentDetail">
+              <q-avatar size="60px" color="primary" text-color="white">
+                <img v-if="studentDetail.student.avatar_url" :src="studentDetail.student.avatar_url" />
+                <span v-else>{{ studentDetail.student.username.charAt(0).toUpperCase() }}</span>
+              </q-avatar>
+              <div>
+                <h2 class="text-xl font-semibold">{{ studentDetail.student.first_name }} {{ studentDetail.student.last_name }}</h2>
+                <p class="text-gray-500">{{ studentDetail.student.email }}</p>
+              </div>
+            </div>
+            <q-btn icon="close" flat round dense v-close-popup />
+          </div>
+        </q-card-section>
+
+        <!-- Loading State -->
+        <div v-if="loadingDetail" class="flex justify-center items-center py-20">
+          <q-spinner color="primary" size="50px" />
+        </div>
+
+        <!-- Content -->
+        <q-card-section v-else-if="studentDetail" class="q-pa-lg">
+          <!-- Progress Summary Bar -->
+          <q-card flat bordered class="mb-6 rounded-lg bg-white">
+            <q-card-section>
+              <div class="flex items-center justify-between mb-3">
+                <span class="text-gray-600">ความคืบหน้าทั้งหมด</span>
+                <div class="flex items-center gap-3">
+                  <q-badge :color="getStudentStatusColor(studentDetail.enrollment.status)">
+                    {{ getStudentStatusLabel(studentDetail.enrollment.status) }}
+                  </q-badge>
+                  <span class="font-semibold text-lg">{{ studentDetail.enrollment.progress_percentage }}%</span>
+                </div>
+              </div>
+              <q-linear-progress
+                :value="studentDetail.enrollment.progress_percentage / 100"
+                color="primary"
+                track-color="grey-3"
+                rounded
+                size="12px"
+              />
+              <div class="flex justify-between mt-2 text-sm text-gray-500">
+                <span>เรียนจบ {{ studentDetail.total_completed_lessons }} / {{ studentDetail.total_lessons }} บทเรียน</span>
+                <span>ลงทะเบียน {{ formatEnrollDate(studentDetail.enrollment.enrolled_at) }}</span>
+              </div>
+            </q-card-section>
+          </q-card>
+
+          <!-- Chapters & Lessons -->
+          <div class="space-y-4">
+            <q-expansion-item
+              v-for="chapter in studentDetail.chapters"
+              :key="chapter.chapter_id"
+              group="chapters"
+              class="bg-white rounded-lg shadow-sm overflow-hidden"
+              expand-separator
+              dense
+            >
+              <template v-slot:header>
+                <q-item-section avatar>
+                  <q-circular-progress
+                    :value="chapter.total_lessons > 0 ? (chapter.completed_lessons / chapter.total_lessons) * 100 : 0"
+                    size="45px"
+                    :thickness="0.15"
+                    color="primary"
+                    track-color="grey-3"
+                    show-value
+                    class="text-primary"
+                  >
+                    <span class="text-xs">{{ chapter.completed_lessons }}/{{ chapter.total_lessons }}</span>
+                  </q-circular-progress>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label class="font-medium">{{ chapter.chapter_title.th }}</q-item-label>
+                  <q-item-label caption>{{ chapter.completed_lessons }} จาก {{ chapter.total_lessons }} บทเรียน</q-item-label>
+                </q-item-section>
+              </template>
+
+              <!-- Lessons List -->
+              <q-list separator class="bg-gray-50">
+                <q-item v-for="lesson in chapter.lessons" :key="lesson.lesson_id" class="py-3">
+                  <q-item-section avatar>
+                    <q-icon
+                      :name="lesson.is_completed ? 'check_circle' : 'radio_button_unchecked'"
+                      :color="lesson.is_completed ? 'green' : 'grey'"
+                      size="24px"
+                    />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>{{ lesson.lesson_title.th }}</q-item-label>
+                    <q-item-label caption class="flex items-center gap-2">
+                      <q-icon :name="getLessonTypeIcon(lesson.lesson_type)" size="14px" />
+                      {{ getLessonTypeLabel(lesson.lesson_type) }}
+                      <template v-if="lesson.lesson_type === 'VIDEO' && lesson.video_duration_seconds > 0">
+                        • {{ formatVideoTime(lesson.video_progress_seconds) }} / {{ formatVideoTime(lesson.video_duration_seconds) }}
+                        ({{ lesson.video_progress_percentage }}%)
+                      </template>
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side v-if="lesson.is_completed">
+                    <q-item-label caption class="text-green-600">
+                      เสร็จ {{ formatCompletedDate(lesson.completed_at) }}
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side v-else-if="lesson.lesson_type === 'VIDEO' && lesson.video_progress_percentage > 0">
+                    <q-linear-progress
+                      :value="lesson.video_progress_percentage / 100"
+                      color="primary"
+                      size="6px"
+                      class="w-20"
+                      rounded
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-expansion-item>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar';
+import {
+  instructorService,
+  type EnrolledStudentResponse,
+  type StudentDetailData
+} from '~/services/instructor.service';
+
+interface Props {
+  courseId: number;
+}
+
+const props = defineProps<Props>();
+const $q = useQuasar();
+
+// State
+const students = ref<EnrolledStudentResponse[]>([]);
+const loading = ref(false);
+const search = ref('');
+const statusFilter = ref('all');
+const completedCount = ref(0);
+const pagination = ref({
+  page: 1,
+  limit: 20,
+  total: 0
+});
+
+// Student Detail Modal
+const showDetailModal = ref(false);
+const loadingDetail = ref(false);
+const studentDetail = ref<StudentDetailData | null>(null);
+
+// Options
+const statusFilterOptions = [
+  { label: 'สถานะทั้งหมด', value: 'all' },
+  { label: 'กำลังเรียน', value: 'ENROLLED' },
+  { label: 'เรียนจบแล้ว', value: 'COMPLETED' }
+];
+
+const limitOptions = [
+  { label: '5 รายการ', value: 5 },
+  { label: '10 รายการ', value: 10 },
+  { label: '20 รายการ', value: 20 },
+  { label: '50 รายการ', value: 50 }
+];
+
+// Computed
+const filteredStudents = computed(() => {
+  let result = students.value;
+  
+  if (search.value) {
+    const query = search.value.toLowerCase();
+    result = result.filter(s => 
+      s.first_name.toLowerCase().includes(query) ||
+      s.last_name.toLowerCase().includes(query) ||
+      s.email.toLowerCase().includes(query) ||
+      s.username.toLowerCase().includes(query)
+    );
+  }
+  
+  if (statusFilter.value !== 'all') {
+    result = result.filter(s => s.status === statusFilter.value);
+  }
+  
+  return result;
+});
+
+// Methods
+const fetchStudents = async (page: number = 1) => {
+  loading.value = true;
+  try {
+    const response = await instructorService.getEnrolledStudents(
+      props.courseId,
+      page,
+      pagination.value.limit,
+      search.value,
+      statusFilter.value
+    );
+    students.value = response.data;
+    pagination.value = {
+      page: response.page,
+      limit: response.limit,
+      total: response.total
+    };
+    completedCount.value = students.value.filter(s => s.status === 'COMPLETED').length;
+  } catch (error) {
+    console.error('Failed to fetch students:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลผู้เรียนได้', position: 'top' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  pagination.value.page = 1;
+  fetchStudents(1);
+};
+
+const handleLimitChange = () => {
+  pagination.value.page = 1;
+  fetchStudents(1);
+};
+
+const openStudentDetail = async (studentId: number) => {
+  showDetailModal.value = true;
+  loadingDetail.value = true;
+  studentDetail.value = null;
+  
+  try {
+    studentDetail.value = await instructorService.getStudentDetail(props.courseId, studentId);
+  } catch (error) {
+    console.error('Failed to fetch student detail:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลผู้เรียนได้', position: 'top' });
+    showDetailModal.value = false;
+  } finally {
+    loadingDetail.value = false;
+  }
+};
+
+const getStudentStatusColor = (status: string) => {
+  const colors: Record<string, string> = {
+    ENROLLED: 'blue',
+    COMPLETED: 'green',
+    DROPPED: 'red'
+  };
+  return colors[status] || 'grey';
+};
+
+const getStudentStatusLabel = (status: string) => {
+  const labels: Record<string, string> = {
+    ENROLLED: 'กำลังเรียน',
+    COMPLETED: 'เรียนจบแล้ว',
+    DROPPED: 'ยกเลิก'
+  };
+  return labels[status] || status;
+};
+
+const formatEnrollDate = (dateStr: string) => {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
+};
+
+const getLessonTypeIcon = (type: string) => {
+  const icons: Record<string, string> = {
+    VIDEO: 'play_circle',
+    DOCUMENT: 'description',
+    QUIZ: 'quiz',
+    ASSIGNMENT: 'assignment'
+  };
+  return icons[type] || 'article';
+};
+
+const getLessonTypeLabel = (type: string) => {
+  const labels: Record<string, string> = {
+    VIDEO: 'วิดีโอ',
+    DOCUMENT: 'เอกสาร',
+    QUIZ: 'แบบทดสอบ',
+    ASSIGNMENT: 'แบบฝึกหัด'
+  };
+  return labels[type] || type;
+};
+
+const formatVideoTime = (seconds: number) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+const formatCompletedDate = (dateStr: string | null) => {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short' });
+};
+
+// Fetch on mount
+onMounted(() => {
+  fetchStudents();
+});
+</script>
diff --git a/frontend_management/pages/admin/users/index.vue b/frontend_management/pages/admin/users/index.vue
index 3d045196..2e636bb5 100644
--- a/frontend_management/pages/admin/users/index.vue
+++ b/frontend_management/pages/admin/users/index.vue
@@ -12,7 +12,7 @@
           @click="exportExcel"
         />
         <!-- <q-btn
-          color="primary"
+          color="primary"  
           label="+ เพิ่มผู้ใช้ใหม่"
           @click="showAddModal = true"
         /> -->
@@ -82,8 +82,14 @@
         <template v-slot:body-cell-user="props">
           <q-td :props="props">
             <div class="flex items-center gap-3">
-              <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
-                <q-icon name="person" color="primary" />
+              <div class="w-10 h-10 rounded-full overflow-hidden flex items-center justify-center bg-primary-100">
+                <img 
+                  v-if="props.row.avatar_url || props.row.profile?.avatar_url" 
+                  :src="props.row.avatar_url || props.row.profile?.avatar_url" 
+                  class="w-full h-full object-cover"
+                  alt="Avatar"
+                />
+                <q-icon v-else name="person" color="primary" />
               </div>
               <div>
                 <div class="font-medium text-primary-600 hover:underline cursor-pointer">
@@ -158,8 +164,14 @@
         <q-card-section v-if="selectedUser">
           <!-- Avatar & Name -->
           <div class="flex items-center gap-4 mb-6">
-            <div class="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center text-3xl">
-              <q-icon name="person" color="primary" size="40px" />
+            <div class="w-20 h-20 rounded-full overflow-hidden flex items-center justify-center bg-primary-100 text-3xl">
+              <img 
+                v-if="selectedUser.avatar_url || selectedUser.profile?.avatar_url" 
+                :src="selectedUser.avatar_url || selectedUser.profile?.avatar_url" 
+                class="w-full h-full object-cover"
+                alt="Avatar"
+              />
+              <q-icon v-else name="person" color="primary" size="40px" />
             </div>
             <div>
               <div class="text-xl font-bold text-gray-900">
diff --git a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
index b2515f36..6c0bb237 100644
--- a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
+++ b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
@@ -85,69 +85,117 @@
           <h3 class="text-lg font-semibold mb-4">วิดีโอ</h3>
           
           <!-- Current Video -->
-          <div v-if="lesson.video_url" class="mb-4">
+          <div v-if="lesson.video_url" class="mb-6">
             <p class="text-sm text-gray-500 mb-2">วิดีโอปัจจุบัน:</p>
+            <div v-if="isYoutubeUrl(lesson.video_url)" class="aspect-video w-full max-w-xl rounded-lg overflow-hidden bg-black">
+              <iframe 
+                :src="getEmbedUrl(lesson.video_url)" 
+                width="100%" 
+                height="100%" 
+                frameborder="0" 
+                allowfullscreen
+              ></iframe>
+            </div>
             <video 
+              v-else
               :src="lesson.video_url" 
               controls 
               class="w-full max-w-xl rounded-lg"
             />
           </div>
 
+          <div class="mb-4">
+            <q-tabs
+              v-model="videoSourceType"
+              dense
+              class="text-grey"
+              active-color="primary"
+              indicator-color="primary"
+              align="left"
+              narrow-indicator
+            >
+              <q-tab name="upload" label="อัพโหลดไฟล์" />
+              <q-tab name="youtube" label="YouTube" />
+            </q-tabs>
+            <q-separator />
+          </div>
+
           <!-- Upload New Video -->
-          <div 
-            class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors"
-            @click="triggerVideoInput"
-            @dragover.prevent
-            @drop.prevent="handleVideoDrop"
-          >
-            <input
-              ref="videoInput"
-              type="file"
-              accept="video/mp4,video/webm"
-              class="hidden"
-              @change="handleVideoSelect"
-            />
-            <div v-if="selectedVideo">
-              <q-icon name="videocam" size="48px" color="primary" />
-              <p class="mt-2 font-medium">{{ selectedVideo.name }}</p>
-              <p class="text-sm text-gray-400">{{ formatFileSize(selectedVideo.size) }}</p>
-              <q-btn
-                class="mt-2"
-                flat
-                size="sm"
-                color="negative"
-                label="ลบ"
-                icon="close"
-                @click.stop="selectedVideo = null"
+          <div v-if="videoSourceType === 'upload'">
+            <div 
+              class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors"
+              @click="triggerVideoInput"
+              @dragover.prevent
+              @drop.prevent="handleVideoDrop"
+            >
+              <input
+                ref="videoInput"
+                type="file"
+                accept="video/mp4,video/webm"
+                class="hidden"
+                @change="handleVideoSelect"
               />
+              <div v-if="selectedVideo">
+                <q-icon name="videocam" size="48px" color="primary" />
+                <p class="mt-2 font-medium">{{ selectedVideo.name }}</p>
+                <p class="text-sm text-gray-400">{{ formatFileSize(selectedVideo.size) }}</p>
+                <q-btn
+                  class="mt-2"
+                  flat
+                  size="sm"
+                  color="negative"
+                  label="ลบ"
+                  icon="close"
+                  @click.stop="selectedVideo = null"
+                />
+              </div>
+              <div v-else>
+                <q-icon name="cloud_upload" size="48px" color="grey" />
+                <p class="mt-2 text-gray-500">ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</p>
+                <p class="text-sm text-gray-400">รองรับ MP4, WebM (สูงสุด 500 MB)</p>
+                <q-btn
+                  class="mt-4"
+                  color="primary"
+                  outline
+                  label="เลือกไฟล์วิดีโอ"
+                  icon="upload"
+                />
+              </div>
             </div>
-            <div v-else>
-              <q-icon name="cloud_upload" size="48px" color="grey" />
-              <p class="mt-2 text-gray-500">ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</p>
-              <p class="text-sm text-gray-400">รองรับ MP4, WebM (สูงสุด 500 MB)</p>
+            
+            <!-- Upload Button -->
+            <div v-if="selectedVideo" class="mt-4 text-center">
               <q-btn
-                class="mt-4"
                 color="primary"
-                outline
-                label="เลือกไฟล์วิดีโอ"
-                icon="upload"
+                label="อัพโหลดวิดีโอ"
+                icon="cloud_upload"
+                :loading="uploadingVideo"
+                @click="uploadVideo"
               />
             </div>
           </div>
-          
-          <!-- Upload Button -->
-          <div v-if="selectedVideo" class="mt-4 text-center">
+
+          <!-- YouTube Input -->
+          <div v-else class="max-w-xl">
+             <q-input
+              v-model="youtubeUrl"
+              label="YouTube URL"
+              hint="ตัวอย่าง: https://www.youtube.com/watch?v=..."
+              outlined
+              class="mb-4"
+            />
             <q-btn
               color="primary"
-              label="อัพโหลดวิดีโอ"
-              icon="cloud_upload"
-              :loading="uploadingVideo"
-              @click="uploadVideo"
+              label="บันทึก YouTube Video"
+              icon="save"
+              :loading="savingYoutube"
+              @click="saveYoutubeVideo"
+              :disable="!isValidYoutubeUrl"
             />
           </div>
-        </q-card-section>
 
+        </q-card-section>
+        
         <!-- Prerequisite Settings Section -->
         <q-separator />
         <q-card-section>
@@ -196,7 +244,7 @@
           <!-- Attachments List -->
           <div v-if="lesson.attachments && lesson.attachments.length > 0" class="space-y-2 mb-4">
             <div 
-              v-for="attachment in lesson.attachments" 
+              v-for="attachment in visibleAttachments" 
               :key="attachment.id"
               class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"
             >
@@ -249,7 +297,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { instructorService, type LessonResponse } from '~/services/instructor.service';
@@ -265,6 +313,11 @@ const loading = ref(true);
 const saving = ref(false);
 const lesson = ref<LessonResponse | null>(null);
 
+const visibleAttachments = computed(() => {
+  if (!lesson.value?.attachments) return [];
+  return lesson.value.attachments.filter(a => !a.mime_type.includes('video'));
+});
+
 const form = ref({
   title: { th: '', en: '' },
   content: { th: '', en: '' }
@@ -292,6 +345,103 @@ const selectedVideo = ref<File | null>(null);
 const uploadingVideo = ref(false);
 const videoInput = ref<HTMLInputElement | null>(null);
 
+// YouTube Support
+const videoSourceType = ref('upload');
+const youtubeUrl = ref('');
+const savingYoutube = ref(false);
+
+const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+
+const isYoutubeUrl = (url: string) => {
+  return youtubeRegex.test(url);
+};
+
+const getEmbedUrl = (url: string) => {
+  const match = url.match(youtubeRegex);
+  if (match && match[1]) {
+    return `https://www.youtube.com/embed/${match[1]}`;
+  }
+  return url;
+};
+
+const fetchYoutubeTitle = async (url: string) => {
+  try {
+    const response = await fetch(`https://noembed.com/embed?url=${url}`);
+    const data = await response.json();
+    if (data.title) {
+      return data.title;
+    }
+  } catch (error) {
+    console.warn('Failed to fetch YouTube title:', error);
+  }
+  return '';
+};
+
+const isValidYoutubeUrl = computed(() => {
+  return youtubeRegex.test(youtubeUrl.value);
+});
+
+// Watch for YouTube URL changes to fetch title
+watch(youtubeUrl, async (newUrl) => {
+  if (isValidYoutubeUrl.value) {
+    const title = await fetchYoutubeTitle(newUrl);
+    if (title && !form.value.title.th) {
+       // Autocomplete lesson title if empty
+       form.value.title.th = title;
+    }
+    // We could store it to use as video_title specifically, 
+    // but for now let's rely on form.title.th or the fetched title for the API call validation if we want to be strict.
+    // However, the user probably wants the 'video_title' passed to backend to be correct.
+    // Let's store it.
+    fetchedVideoTitle.value = title;
+  } else {
+    fetchedVideoTitle.value = '';
+  }
+});
+
+const fetchedVideoTitle = ref('');
+
+const saveYoutubeVideo = async () => {
+  if (!isValidYoutubeUrl.value) return;
+
+  const match = youtubeUrl.value.match(youtubeRegex);
+  if (!match || !match[1]) return;
+
+  const videoId = match[1];
+  savingYoutube.value = true;
+  
+  try {
+    // If we have a fetched title, we can genericallly use it, or fallback to lesson title
+    const videoTitle = fetchedVideoTitle.value || form.value.title.th || 'Untitled Video';
+
+    const response = await instructorService.setLessonYoutubeVideo(
+      courseId, 
+      chapterId, 
+      lessonId, 
+      videoId, 
+      videoTitle
+    );
+    
+    // If lesson title is empty, update it too
+    if (!form.value.title.th && fetchedVideoTitle.value) {
+       form.value.title.th = fetchedVideoTitle.value;
+       // We might want to save the lesson title change as well? 
+       // The current flow saves video separately. 
+       // Let's just update the local form for now, user can click "Save" on the form if they want to persist the name change to the lesson itself.
+    }
+
+    $q.notify({ type: 'positive', message: response.message || 'บันทึกวิดีโอ YouTube สำเร็จ', position: 'top' });
+    youtubeUrl.value = '';
+    fetchedVideoTitle.value = '';
+    await fetchLesson();
+  } catch (error) {
+    console.error('Failed to save YouTube video:', error);
+    $q.notify({ type: 'negative', message: (error as any).data?.error?.message || (error as any).data?.message || 'ไม่สามารถบันทึกวิดีโอได้', position: 'top' });
+  } finally {
+    savingYoutube.value = false;
+  }
+};
+
 const triggerVideoInput = () => {
   videoInput.value?.click();
 };
@@ -306,6 +456,14 @@ const fetchLesson = async () => {
       content: data.content ? { ...data.content } : { th: '', en: '' }
     };
     
+    // Check if current video is YouTube
+    if (data.video_url && isYoutubeUrl(data.video_url)) {
+      videoSourceType.value = 'youtube';
+      youtubeUrl.value = data.video_url;
+    } else {
+      videoSourceType.value = 'upload';
+    }
+
     // Load prerequisite settings
     prerequisiteSettings.value = {
       prerequisite_lesson_ids: data.prerequisite_lesson_ids || []
diff --git a/frontend_management/pages/instructor/courses/[id]/index.vue b/frontend_management/pages/instructor/courses/[id]/index.vue
index ad012b7b..1a59006c 100644
--- a/frontend_management/pages/instructor/courses/[id]/index.vue
+++ b/frontend_management/pages/instructor/courses/[id]/index.vue
@@ -9,7 +9,6 @@
       <!-- Course Header -->
       <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
         <div class="flex flex-col md:flex-row gap-6">
-          <!-- Thumbnail -->
           <!-- Thumbnail -->
           <div
             class="w-full md:w-48 h-32 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 relative group cursor-pointer overflow-hidden border border-gray-200"
@@ -117,658 +116,29 @@
       <q-tab-panels v-model="activeTab" class="bg-white rounded-b-xl shadow-sm">
         <!-- Structure Tab -->
         <q-tab-panel name="structure" class="p-6">
-          <div class="flex justify-between items-center mb-6">
-            <h2 class="text-xl font-semibold text-gray-900">โครงสร้างบทเรียน</h2>
-            <q-btn
-              color="primary"
-              label="จัดการโครงสร้าง"
-              @click="navigateTo(`/instructor/courses/${course.id}/structure`)"
-            />
-          </div>
-
-          <!-- Chapters -->
-          <div v-if="course.chapters.length === 0" class="text-center py-10 text-gray-500">
-            ยังไม่มีบทเรียน
-          </div>
-
-          <div v-else class="space-y-4">
-            <q-card
-              v-for="chapter in sortedChapters"
-              :key="chapter.id"
-              flat
-              bordered
-              class="rounded-lg"
-            >
-              <q-card-section>
-                <div class="flex items-center justify-between">
-                  <div>
-                    <div class="font-semibold text-gray-900">
-                      Chapter {{ chapter.sort_order }}: {{ chapter.title.th }}
-                    </div>
-                    <div class="text-sm text-gray-500 mt-1">
-                      {{ chapter.lessons.length }} บทเรียน · {{ getChapterDuration(chapter) }} นาที
-                    </div>
-                  </div>
-                </div>
-              </q-card-section>
-
-              <!-- Lessons -->
-              <q-list separator class="border-t">
-                <q-item
-                  v-for="lesson in getSortedLessons(chapter)"
-                  :key="lesson.id"
-                  class="py-3"
-                >
-                  <q-item-section avatar>
-                    <q-icon
-                      :name="getLessonIcon(lesson.type)"
-                      :color="getLessonIconColor(lesson.type)"
-                    />
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label>
-                      Lesson {{ chapter.sort_order }}.{{ lesson.sort_order }}: {{ lesson.title.th }}
-                    </q-item-label>
-                  </q-item-section>
-                  <q-item-section side>
-                    <span class="text-sm text-gray-500">{{ lesson.duration_minutes }} นาที</span>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
+          <CourseStructureTab :course-id="course.id" :chapters="course.chapters" />
         </q-tab-panel>
 
         <!-- Students Tab -->
         <q-tab-panel name="students" class="p-6">
-          <!-- Stats Cards -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-            <q-card flat bordered class="rounded-lg">
-              <q-card-section class="text-center py-6">
-                <div class="text-4xl font-bold text-primary">{{ studentsPagination.total }}</div>
-                <div class="text-gray-500 mt-1">ผู้เรียนทั้งหมด</div>
-              </q-card-section>
-            </q-card>
-            <q-card flat bordered class="rounded-lg">
-              <q-card-section class="text-center py-6">
-                <div class="text-4xl font-bold text-green-600">{{ completedStudentsCount }}</div>
-                <div class="text-gray-500 mt-1">จบหลักสูตร</div>
-              </q-card-section>
-            </q-card>
-          </div>
-
-          <!-- Search and Filter -->
-          <q-card flat bordered class="rounded-lg mb-6">
-            <q-card-section>
-              <div class="flex flex-col md:flex-row gap-4">
-                <q-input
-                  v-model="studentSearch"
-                  outlined
-                  dense
-                  placeholder="ค้นหาผู้เรียน..."
-                  class="flex-1"
-                  debounce="300"
-                  @update:model-value="handleStudentSearch"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="search" />
-                  </template>
-                  <template v-slot:append v-if="studentSearch">
-                    <q-icon name="close" class="cursor-pointer" @click="studentSearch = ''; handleStudentSearch()" />
-                  </template>
-                </q-input>
-                <q-select
-                  v-model="studentStatusFilter"
-                  outlined
-                  dense
-                  :options="statusFilterOptions"
-                  option-value="value"
-                  option-label="label"
-                  emit-value
-                  map-options
-                  class="w-full md:w-40"
-                  @update:model-value="handleStudentSearch"
-                />
-                <q-select
-                  v-model="studentsPagination.limit"
-                  outlined
-                  dense
-                  :options="limitOptions"
-                  option-value="value"
-                  option-label="label"
-                  emit-value
-                  map-options
-                  class="w-full md:w-32"
-                  @update:model-value="handleLimitChange"
-                />
-              </div>
-            </q-card-section>
-          </q-card>
-
-          <div v-if="loadingStudents" class="flex justify-center py-10">
-            <q-spinner color="primary" size="40px" />
-          </div>
-
-          <div v-else-if="filteredStudents.length === 0" class="text-center py-10 text-gray-500">
-            <q-icon name="people" size="60px" color="grey-4" class="mb-4" />
-            <p>{{ studentSearch || studentStatusFilter !== 'all' ? 'ไม่พบผู้เรียนที่ค้นหา' : 'ยังไม่มีผู้เรียนในหลักสูตรนี้' }}</p>
-          </div>
-
-          <div v-else>
-            <!-- Students Table -->
-            <q-card flat bordered class="rounded-lg">
-              <q-list separator>
-                <q-item 
-                  v-for="student in filteredStudents" 
-                  :key="student.user_id" 
-                  class="py-4 cursor-pointer hover:bg-gray-50 transition-colors"
-                  clickable
-                  @click="openStudentDetail(student.user_id)"
-                >
-                  <q-item-section avatar>
-                    <q-avatar size="50px" color="primary" text-color="white">
-                      <img v-if="student.avatar_url" :src="student.avatar_url" />
-                      <span v-else>{{ student.username.charAt(0).toUpperCase() }}</span>
-                    </q-avatar>
-                  </q-item-section>
-
-                  <q-item-section>
-                    <q-item-label class="text-base font-medium">
-                      {{ student.first_name }} {{ student.last_name }}
-                    </q-item-label>
-                    <q-item-label caption>{{ student.email }}</q-item-label>
-                  </q-item-section>
-
-                  <q-item-section>
-                    <q-item-label caption class="mb-1">ความคืบหน้า</q-item-label>
-                    <div class="flex items-center gap-2">
-                      <q-linear-progress
-                        :value="student.progress_percentage / 100"
-                        color="primary"
-                        track-color="grey-3"
-                        class="flex-1"
-                        rounded
-                        size="8px"
-                      />
-                      <span class="text-sm text-gray-600 w-12 text-right">{{ student.progress_percentage }}%</span>
-                    </div>
-                  </q-item-section>
-
-                  <q-item-section side>
-                    <q-badge :color="getStudentStatusColor(student.status)">
-                      {{ getStudentStatusLabel(student.status) }}
-                    </q-badge>
-                    <q-item-label caption class="mt-1">
-                      ลงทะเบียน {{ formatEnrollDate(student.enrolled_at) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-
-            <!-- Pagination -->
-            <div v-if="studentsPagination.total > studentsPagination.limit" class="flex justify-center mt-4">
-              <q-pagination
-                v-model="studentsPagination.page"
-                :max="Math.ceil(studentsPagination.total / studentsPagination.limit)"
-                :max-pages="6"
-                direction-links
-                boundary-links
-                @update:model-value="fetchStudents"
-              />
-            </div>
-          </div>
+          <CourseStudentsTab :course-id="course.id" />
         </q-tab-panel>
 
-
-
         <!-- Instructors Tab -->
         <q-tab-panel name="instructors" class="p-6">
-          <div class="flex justify-between items-center mb-6">
-            <h2 class="text-xl font-semibold text-gray-900">ผู้สอนในรายวิชา</h2>
-            <q-btn v-if="isPrimaryInstructor" color="primary" icon="person_add" label="เพิ่มผู้สอน" @click="showAddInstructorDialog = true" />
-          </div>
-
-          <div v-if="loadingInstructors" class="flex justify-center py-10">
-            <q-spinner color="primary" size="40px" />
-          </div>
-
-          <div v-else-if="instructors.length === 0" class="text-center py-10 text-gray-500">
-            <q-icon name="group_off" size="60px" color="grey-4" class="mb-4" />
-            <p>ยังไม่มีข้อมูลผู้สอน</p>
-          </div>
-
-          <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-             <q-card v-for="instructor in instructors" :key="instructor.id" flat bordered class="rounded-lg">
-               <q-item>
-                 <q-item-section avatar>
-                   <q-avatar size="50px" color="primary" text-color="white">
-                     <img v-if="instructor.user.avatar_url" :src="instructor.user.avatar_url">
-                     <span v-else>{{ instructor.user.username.charAt(0).toUpperCase() }}</span>
-                   </q-avatar>
-                 </q-item-section>
-
-                 <q-item-section>
-                   <q-item-label class="text-base font-medium flex items-center gap-2">
-                     {{ instructor.user.username }}
-                     <q-badge v-if="instructor.is_primary" color="primary" label="หัวหน้าผู้สอน" />
-                   </q-item-label>
-                   <q-item-label caption>{{ instructor.user.email }}</q-item-label>
-                 </q-item-section>
-
-                 <q-item-section side v-if="isPrimaryInstructor">
-                   <q-btn flat dense round icon="more_vert">
-                     <q-menu>
-                       <q-item v-if="!instructor.is_primary" clickable v-close-popup @click="setPrimaryInstructor(instructor.user_id)">
-                         <q-item-section avatar>
-                           <q-icon name="verified_user" color="primary" />
-                         </q-item-section>
-                         <q-item-section>ตั้งเป็นหัวหน้าผู้สอน</q-item-section>
-                       </q-item>
-                       <q-item clickable v-close-popup @click="removeInstructor(instructor.user_id)" class="text-red">
-                         <q-item-section avatar>
-                           <q-icon name="person_remove" color="red" />
-                         </q-item-section>
-                         <q-item-section>ลบผู้สอน</q-item-section>
-                       </q-item>
-                     </q-menu>
-                   </q-btn>
-                 </q-item-section>
-               </q-item>
-             </q-card>
-          </div>
+          <CourseInstructorsTab :course-id="course.id" />
         </q-tab-panel>
 
         <!-- Quiz Results Tab -->
         <q-tab-panel name="quiz" class="p-6">
-          <div class="text-center py-10 text-gray-500">
-            <q-icon name="quiz" size="60px" color="grey-4" class="mb-4" />
-            <p>ยังไม่มีผลการทดสอบ</p>
-          </div>
+          <CourseQuizResultsTab :course-id="course.id" :chapters="course.chapters" />
         </q-tab-panel>
 
         <!-- Announcements Tab -->
         <q-tab-panel name="announcements" class="p-6">
-          <div class="flex justify-between items-center mb-6">
-            <h2 class="text-xl font-semibold text-gray-900">ประกาศ</h2>
-            <q-btn
-              color="primary"
-              label="สร้างประกาศ"
-              icon="add"
-              @click="openAnnouncementDialog()"
-            />
-          </div>
-
-          <div v-if="loadingAnnouncements" class="flex justify-center py-10">
-            <q-spinner color="primary" size="40px" />
-          </div>
-
-          <div v-else-if="announcements.length === 0" class="text-center py-10 text-gray-500">
-            <q-icon name="campaign" size="60px" color="grey-4" class="mb-4" />
-            <p>ยังไม่มีประกาศ</p>
-            <q-btn
-              color="primary"
-              label="สร้างประกาศแรก"
-              class="mt-4"
-              @click="openAnnouncementDialog()"
-            />
-          </div>
-
-          <div v-else class="space-y-4">
-            <q-card
-              v-for="announcement in announcements"
-              :key="announcement.id"
-              flat
-              bordered
-              class="rounded-lg"
-            >
-              <q-card-section>
-                <div class="flex items-start justify-between">
-                  <div class="flex-1">
-                    <div class="flex items-center gap-2">
-                      <q-icon v-if="announcement.is_pinned" name="push_pin" color="orange" size="20px" />
-                      <h3 class="font-semibold text-gray-900">{{ announcement.title.th }}</h3>
-                      <q-badge :color="announcement.status === 'PUBLISHED' ? 'green' : 'grey'">
-                        {{ announcement.status === 'PUBLISHED' ? 'เผยแพร่' : 'ฉบับร่าง' }}
-                      </q-badge>
-                    </div>
-                    <p class="text-sm text-gray-500 mt-1">{{ announcement.title.en }}</p>
-                    <p class="text-gray-600 mt-3 whitespace-pre-line">{{ announcement.content.th }}</p>
-                    <p class="text-xs text-gray-400 mt-3">
-                      สร้างเมื่อ {{ formatDate(announcement.created_at) }}
-                    </p>
-                  </div>
-                  <div class="flex gap-1">
-                    <q-btn flat round icon="edit" color="primary" size="sm" @click="openAnnouncementDialog(announcement)" />
-                    <q-btn flat round icon="delete" color="negative" size="sm" @click="confirmDeleteAnnouncement(announcement)" />
-                  </div>
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
+          <CourseAnnouncementsTab :course-id="course.id" />
         </q-tab-panel>
       </q-tab-panels>
-
-      <!-- Announcement Dialog -->
-      <q-dialog v-model="showAnnouncementDialog" persistent>
-        <q-card style="min-width: 600px; max-width: 700px">
-          <q-card-section class="row items-center q-pb-none">
-            <div class="text-h6">{{ editingAnnouncement ? 'แก้ไขประกาศ' : 'สร้างประกาศใหม่' }}</div>
-            <q-space />
-            <q-btn icon="close" flat round dense @click="showAnnouncementDialog = false" />
-          </q-card-section>
-
-          <q-card-section>
-            <div class="space-y-4">
-              <q-input
-                v-model="announcementForm.title.th"
-                outlined
-                label="หัวข้อ (ภาษาไทย) *"
-                :rules="[val => !!val || 'กรุณากรอกหัวข้อ']"
-                lazy-rules="ondemand"
-                hide-bottom-space
-              />
-              <q-input
-                v-model="announcementForm.title.en"
-                outlined
-                label="หัวข้อ (English)"
-              />
-              <q-input
-                v-model="announcementForm.content.th"
-                outlined
-                type="textarea"
-                rows="4"
-                label="เนื้อหา (ภาษาไทย) *"
-                :rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
-                lazy-rules="ondemand"
-                hide-bottom-space
-              />
-              <q-input
-                v-model="announcementForm.content.en"
-                outlined
-                type="textarea"
-                rows="4"
-                label="เนื้อหา (English)"
-              />
-              <div class="flex gap-4">
-                <q-toggle v-model="announcementForm.is_pinned" label="ปักหมุด" />
-                <q-select
-                  v-model="announcementForm.status"
-                  :options="[
-                    { label: 'ฉบับร่าง', value: 'DRAFT' },
-                    { label: 'เผยแพร่', value: 'PUBLISHED' }
-                  ]"
-                  outlined
-                  emit-value
-                  map-options
-                  label="สถานะ"
-                  class="flex-1"
-                />
-              </div>
-
-              <!-- Attachments Section -->
-              <div class="border rounded-lg p-4">
-                <div class="flex justify-between items-center mb-3">
-                  <h4 class="font-semibold text-gray-700">ไฟล์แนบ</h4>
-                  <q-btn
-                    size="sm"
-                    color="primary"
-                    icon="attach_file"
-                    label="เพิ่มไฟล์"
-                    :loading="uploadingAttachment"
-                    @click="triggerFileInput"
-                  />
-                  <input
-                    ref="fileInputRef"
-                    type="file"
-                    class="hidden"
-                    @change="handleFileUpload"
-                  />
-                </div>
-
-                <!-- Existing Attachments (edit mode) -->
-                <div v-if="editingAnnouncement?.attachments && editingAnnouncement.attachments.length > 0" class="space-y-2 mb-2">
-                  <div
-                    v-for="attachment in editingAnnouncement?.attachments"
-                    :key="attachment.id"
-                    class="flex items-center justify-between bg-gray-50 rounded p-2"
-                  >
-                    <div class="flex items-center gap-2">
-                      <q-icon name="insert_drive_file" color="grey" />
-                      <span class="text-sm">{{ attachment.file_name }}</span>
-                      <span class="text-xs text-gray-400">({{ formatFileSize(attachment.file_size) }})</span>
-                    </div>
-                    <q-btn
-                      flat
-                      round
-                      size="sm"
-                      icon="delete"
-                      color="negative"
-                      :loading="deletingAttachmentId === attachment.id"
-                      @click="deleteAttachment(attachment.id)"
-                    />
-                  </div>
-                </div>
-
-                <!-- Pending Files (create mode) -->
-                <div v-if="pendingFiles.length > 0" class="space-y-2 mb-2">
-                  <div
-                    v-for="(file, index) in pendingFiles"
-                    :key="index"
-                    class="flex items-center justify-between bg-blue-50 rounded p-2"
-                  >
-                    <div class="flex items-center gap-2">
-                      <q-icon name="upload_file" color="primary" />
-                      <span class="text-sm">{{ file.name }}</span>
-                      <span class="text-xs text-gray-400">({{ formatFileSize(file.size) }})</span>
-                      <q-badge color="blue" label="รอสร้าง" size="sm" />
-                    </div>
-                    <q-btn
-                      flat
-                      round
-                      size="sm"
-                      icon="close"
-                      color="grey"
-                      @click="removePendingFile(index)"
-                    />
-                  </div>
-                </div>
-
-                <div v-if="!editingAnnouncement?.attachments?.length && pendingFiles.length === 0" class="text-center py-4 text-gray-400 text-sm">
-                  ยังไม่มีไฟล์แนบ
-                </div>
-              </div>
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right" class="q-pa-md">
-            <q-btn flat label="ยกเลิก" color="grey-7" @click="showAnnouncementDialog = false" />
-            <q-btn
-              :label="editingAnnouncement ? 'บันทึก' : 'สร้าง'"
-              color="primary"
-              :loading="savingAnnouncement"
-              @click="saveAnnouncement"
-            />
-          </q-card-actions>
-        </q-card>
-      </q-dialog>
-    <!-- Add Instructor Dialog -->
-    <q-dialog v-model="showAddInstructorDialog">
-      <q-card style="min-width: 400px">
-        <q-card-section>
-          <div class="text-h6">เพิ่มผู้สอน</div>
-        </q-card-section>
-
-        <q-card-section>
-          <q-select
-            v-model="selectedUser"
-            :options="searchResults"
-            option-value="id"
-            option-label="email"
-            label="ค้นหาผู้สอน (Email หรือ Username)"
-            hint="พิมพ์อย่างน้อย 2 ตัวอักษรเพื่อค้นหา"
-            use-input
-            filled
-            @filter="filterUsers"
-            :loading="loadingSearch"
-          >
-            <template v-slot:option="scope">
-              <q-item v-bind="scope.itemProps">
-                <q-item-section avatar>
-                   <q-avatar>
-                     <img v-if="scope.opt.profile?.avatar_url" :src="scope.opt.profile.avatar_url">
-                     <span v-else>{{ scope.opt.username.charAt(0).toUpperCase() }}</span>
-                   </q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label>{{ scope.opt.username }}</q-item-label>
-                  <q-item-label caption>{{ scope.opt.email }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  ไม่พบผู้ใช้
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn flat label="ยกเลิก" color="primary" v-close-popup />
-          <q-btn flat label="เพิ่ม" color="primary" @click="addInstructor" :disable="!selectedUser" :loading="addingInstructor" />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-
-    <!-- Student Progress Detail Modal -->
-    <q-dialog v-model="showStudentDetailModal" maximized transition-show="slide-up" transition-hide="slide-down">
-      <q-card class="bg-gray-50">
-        <!-- Header -->
-        <q-card-section class="bg-white shadow-sm">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center gap-4" v-if="studentDetail">
-              <q-avatar size="60px" color="primary" text-color="white">
-                <img v-if="studentDetail.student.avatar_url" :src="studentDetail.student.avatar_url" />
-                <span v-else>{{ studentDetail.student.username.charAt(0).toUpperCase() }}</span>
-              </q-avatar>
-              <div>
-                <h2 class="text-xl font-semibold">{{ studentDetail.student.first_name }} {{ studentDetail.student.last_name }}</h2>
-                <p class="text-gray-500">{{ studentDetail.student.email }}</p>
-              </div>
-            </div>
-            <q-btn icon="close" flat round dense v-close-popup />
-          </div>
-        </q-card-section>
-
-        <!-- Loading State -->
-        <div v-if="loadingStudentDetail" class="flex justify-center items-center py-20">
-          <q-spinner color="primary" size="50px" />
-        </div>
-
-        <!-- Content -->
-        <q-card-section v-else-if="studentDetail" class="q-pa-lg">
-          <!-- Progress Summary Bar -->
-          <q-card flat bordered class="mb-6 rounded-lg bg-white">
-            <q-card-section>
-              <div class="flex items-center justify-between mb-3">
-                <span class="text-gray-600">ความคืบหน้าทั้งหมด</span>
-                <div class="flex items-center gap-3">
-                  <q-badge :color="getStudentStatusColor(studentDetail.enrollment.status)">
-                    {{ getStudentStatusLabel(studentDetail.enrollment.status) }}
-                  </q-badge>
-                  <span class="font-semibold text-lg">{{ studentDetail.enrollment.progress_percentage }}%</span>
-                </div>
-              </div>
-              <q-linear-progress
-                :value="studentDetail.enrollment.progress_percentage / 100"
-                color="primary"
-                track-color="grey-3"
-                rounded
-                size="12px"
-              />
-              <div class="flex justify-between mt-2 text-sm text-gray-500">
-                <span>เรียนจบ {{ studentDetail.total_completed_lessons }} / {{ studentDetail.total_lessons }} บทเรียน</span>
-                <span>ลงทะเบียน {{ formatEnrollDate(studentDetail.enrollment.enrolled_at) }}</span>
-              </div>
-            </q-card-section>
-          </q-card>
-
-          <!-- Chapters & Lessons -->
-          <div class="space-y-4">
-            <q-expansion-item
-              v-for="chapter in studentDetail.chapters"
-              :key="chapter.chapter_id"
-              group="chapters"
-              class="bg-white rounded-lg shadow-sm overflow-hidden"
-              expand-separator
-              dense
-            >
-              <template v-slot:header>
-                <q-item-section avatar>
-                  <q-circular-progress
-                    :value="chapter.total_lessons > 0 ? (chapter.completed_lessons / chapter.total_lessons) * 100 : 0"
-                    size="45px"
-                    :thickness="0.15"
-                    color="primary"
-                    track-color="grey-3"
-                    show-value
-                    class="text-primary"
-                  >
-                    <span class="text-xs">{{ chapter.completed_lessons }}/{{ chapter.total_lessons }}</span>
-                  </q-circular-progress>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label class="font-medium">{{ chapter.chapter_title.th }}</q-item-label>
-                  <q-item-label caption>{{ chapter.completed_lessons }} จาก {{ chapter.total_lessons }} บทเรียน</q-item-label>
-                </q-item-section>
-              </template>
-
-              <!-- Lessons List -->
-              <q-list separator class="bg-gray-50">
-                <q-item v-for="lesson in chapter.lessons" :key="lesson.lesson_id" class="py-3">
-                  <q-item-section avatar>
-                    <q-icon
-                      :name="lesson.is_completed ? 'check_circle' : 'radio_button_unchecked'"
-                      :color="lesson.is_completed ? 'green' : 'grey'"
-                      size="24px"
-                    />
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label>{{ lesson.lesson_title.th }}</q-item-label>
-                    <q-item-label caption class="flex items-center gap-2">
-                      <q-icon :name="getLessonTypeIcon(lesson.lesson_type)" size="14px" />
-                      {{ getLessonTypeLabel(lesson.lesson_type) }}
-                      <template v-if="lesson.lesson_type === 'VIDEO' && lesson.video_duration_seconds > 0">
-                        • {{ formatVideoTime(lesson.video_progress_seconds) }} / {{ formatVideoTime(lesson.video_duration_seconds) }}
-                        ({{ lesson.video_progress_percentage }}%)
-                      </template>
-                    </q-item-label>
-                  </q-item-section>
-                  <q-item-section side v-if="lesson.is_completed">
-                    <q-item-label caption class="text-green-600">
-                      เสร็จ {{ formatCompletedDate(lesson.completed_at) }}
-                    </q-item-label>
-                  </q-item-section>
-                  <q-item-section side v-else-if="lesson.lesson_type === 'VIDEO' && lesson.video_progress_percentage > 0">
-                    <q-linear-progress
-                      :value="lesson.video_progress_percentage / 100"
-                      color="primary"
-                      size="6px"
-                      class="w-20"
-                      rounded
-                    />
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-expansion-item>
-          </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-
     </template>
   </div>
 </template>
@@ -777,16 +147,11 @@
 import { useQuasar } from 'quasar';
 import {
   instructorService,
-  type CourseDetailResponse,
-  type ChapterResponse,
-  type AnnouncementResponse,
-  type CreateAnnouncementRequest,
-  type CourseInstructorResponse,
-  type SearchInstructorResult,
-  type EnrolledStudentResponse,
-  type StudentDetailData
+  type CourseDetailResponse
 } from '~/services/instructor.service';
 
+
+
 definePageMeta({
   layout: 'instructor',
   middleware: ['auth']
@@ -794,116 +159,20 @@ definePageMeta({
 
 const $q = useQuasar();
 const route = useRoute();
-const authStore = useAuthStore();
 
-// Data
-const course = ref<CourseDetailResponse | null>(null);
+// State
 const loading = ref(true);
+const course = ref<CourseDetailResponse | null>(null);
 const activeTab = ref('structure');
-
-// Thumbnail upload
 const uploadingThumbnail = ref(false);
 const thumbnailInputRef = ref<HTMLInputElement | null>(null);
 
-// Announcements data
-const announcements = ref<AnnouncementResponse[]>([]);
-const loadingAnnouncements = ref(false);
-const showAnnouncementDialog = ref(false);
-const editingAnnouncement = ref<AnnouncementResponse | null>(null);
-const savingAnnouncement = ref(false);
-const announcementForm = ref<CreateAnnouncementRequest>({
-  title: { th: '', en: '' },
-  content: { th: '', en: '' },
-  status: 'DRAFT',
-  is_pinned: false
-});
-
-// Instructors data
-const instructors = ref<CourseInstructorResponse[]>([]);
-const loadingInstructors = ref(false);
-const showAddInstructorDialog = ref(false);
-const selectedUser = ref<SearchInstructorResult | null>(null);
-const searchResults = ref<SearchInstructorResult[]>([]);
-const loadingSearch = ref(false);
-const addingInstructor = ref(false);
-const searchQuery = ref('');
-
-// Students data
-const students = ref<EnrolledStudentResponse[]>([]);
-const loadingStudents = ref(false);
-const studentsPagination = ref({
-  page: 1,
-  limit: 10,
-  total: 0
-});
-const studentSearch = ref('');
-const studentStatusFilter = ref('all');
-const completedStudentsCount = ref(0);
-const statusFilterOptions = [
-  { label: 'สถานะทั้งหมด', value: 'all' },
-  { label: 'กำลังเรียน', value: 'ENROLLED' },
-  { label: 'เรียนจบแล้ว', value: 'COMPLETED' }
-];
-const limitOptions = [
-  { label: '5 รายการ', value: 5 },
-  { label: '10 รายการ', value: 10 },
-  { label: '20 รายการ', value: 20 },
-  { label: '50 รายการ', value: 50 }
-];
-
-// Student Detail Modal
-const showStudentDetailModal = ref(false);
-const loadingStudentDetail = ref(false);
-const studentDetail = ref<StudentDetailData | null>(null);
-
-// Attachment handling
-const fileInputRef = ref<HTMLInputElement | null>(null);
-const uploadingAttachment = ref(false);
-const deletingAttachmentId = ref<number | null>(null);
-const pendingFiles = ref<File[]>([]);
-
 // Computed
 const totalLessons = computed(() => {
   if (!course.value) return 0;
   return course.value.chapters.reduce((sum, ch) => sum + ch.lessons.length, 0);
 });
 
-const sortedChapters = computed(() => {
-  if (!course.value) return [];
-  return course.value.chapters.slice().sort((a, b) => a.sort_order - b.sort_order);
-});
-
-// Check if current user is the primary instructor
-const isPrimaryInstructor = computed(() => {
-  if (!authStore.user?.id) return false;
-  const currentUserId = parseInt(authStore.user.id);
-  const myInstructorRecord = instructors.value.find(i => i.user_id === currentUserId);
-  return myInstructorRecord?.is_primary === true;
-});
-
-// Filtered students (client-side filtering)
-const filteredStudents = computed(() => {
-  let result = students.value;
-  
-  // Filter by search query
-  if (studentSearch.value) {
-    const query = studentSearch.value.toLowerCase();
-    result = result.filter(s => 
-      s.first_name.toLowerCase().includes(query) ||
-      s.last_name.toLowerCase().includes(query) ||
-      s.email.toLowerCase().includes(query) ||
-      s.username.toLowerCase().includes(query)
-    );
-  }
-  
-  // Filter by status
-  if (studentStatusFilter.value !== 'all') {
-    result = result.filter(s => s.status === studentStatusFilter.value);
-  }
-  
-  return result;
-});
-
 // Methods
 const fetchCourse = async () => {
   loading.value = true;
@@ -911,83 +180,13 @@ const fetchCourse = async () => {
     const courseId = parseInt(route.params.id as string);
     course.value = await instructorService.getCourseById(courseId);
   } catch (error) {
-    $q.notify({
-      type: 'negative',
-      message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้',
-      position: 'top'
-    });
-    navigateTo('/instructor/courses');
+    console.error('Failed to fetch course:', error);
+    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้', position: 'top' });
   } finally {
     loading.value = false;
   }
 };
 
-const triggerThumbnailUpload = () => {
-  thumbnailInputRef.value?.click();
-};
-
-const handleThumbnailUpload = async (event: Event) => {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  if (!file) return;
-
-  // Validate file type
-  if (!file.type.startsWith('image/')) {
-    $q.notify({
-      type: 'warning',
-      message: 'กรุณาเลือกไฟล์รูปภาพเท่านั้น',
-      position: 'top'
-    });
-    return;
-  }
-
-  // Validate file size (max 5MB)
-  if (file.size > 5 * 1024 * 1024) {
-    $q.notify({
-      type: 'warning',
-      message: 'ไฟล์มีขนาดใหญ่เกิน 5MB',
-      position: 'top'
-    });
-    return;
-  }
-
-  uploadingThumbnail.value = true;
-  try {
-    const courseId = parseInt(route.params.id as string);
-    
-    // Upload the file
-    const response = await instructorService.uploadCourseThumbnail(courseId, file);
-    
-    // Wait for Vue to unmount old img
-    await nextTick();
-    
-    // Re-fetch course data to get fresh presigned URL from backend
-    const updatedCourse = await instructorService.getCourseById(courseId);
-    
-    // Update local state
-    if (course.value) {
-      course.value.thumbnail_url = updatedCourse.thumbnail_url;
-    }
-    
-    $q.notify({
-      type: 'positive',
-      message: response.message,
-      position: 'top'
-    });
-    
-    // Clear input value to allow re-uploading same file if needed
-    input.value = '';
-  } catch (error: any) {
-    $q.notify({
-      type: 'negative',
-      message: error.data?.error?.message || error.data?.message || 'เกิดข้อผิดพลาดในการอัพโหลดรูปภาพ',
-      position: 'top'
-    });
-  } finally {
-    uploadingThumbnail.value = false;
-  }
-};
-
 const getStatusColor = (status: string) => {
   const colors: Record<string, string> = {
     APPROVED: 'green',
@@ -1002,552 +201,55 @@ const getStatusLabel = (status: string) => {
   const labels: Record<string, string> = {
     APPROVED: 'อนุมัติแล้ว',
     PENDING: 'รอตรวจสอบ',
-    DRAFT: 'แบบร่าง',
-    REJECTED: 'ถูกปฏิเสธ'
+    DRAFT: 'ฉบับร่าง',
+    REJECTED: 'ไม่อนุมัติ'
   };
   return labels[status] || status;
 };
 
-const getChapterDuration = (chapter: ChapterResponse) => {
-  return chapter.lessons.reduce((sum, l) => sum + l.duration_minutes, 0);
+const triggerThumbnailUpload = () => {
+  thumbnailInputRef.value?.click();
 };
 
-const getSortedLessons = (chapter: ChapterResponse) => {
-  return chapter.lessons.slice().sort((a, b) => a.sort_order - b.sort_order);
-};
+const handleThumbnailUpload = async (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const files = input.files;
+  if (!files || files.length === 0 || !course.value) return;
 
-const fetchStudents = async (page: number = 1) => {
-  loadingStudents.value = true;
+  uploadingThumbnail.value = true;
   try {
-    const courseId = parseInt(route.params.id as string);
-    const response = await instructorService.getEnrolledStudents(
-      courseId,
-      page,
-      studentsPagination.value.limit,
-      studentSearch.value || undefined,
-      studentStatusFilter.value
-    );
-    students.value = response.data;
-    studentsPagination.value = {
-      page: response.page,
-      limit: response.limit,
-      total: response.total
-    };
-    
-    // Count completed students (from current response)
-    completedStudentsCount.value = students.value.filter(s => s.status === 'COMPLETED').length;
-  } catch (error) {
-    console.error('Failed to fetch students:', error);
-    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลผู้เรียนได้', position: 'top' });
-  } finally {
-    loadingStudents.value = false;
-  }
-};
-
-const handleStudentSearch = () => {
-  studentsPagination.value.page = 1;
-  fetchStudents(1);
-};
-
-const handleLimitChange = () => {
-  studentsPagination.value.page = 1;
-  fetchStudents(1);
-};
-
-const openStudentDetail = async (studentId: number) => {
-  const courseId = parseInt(route.params.id as string);
-  showStudentDetailModal.value = true;
-  loadingStudentDetail.value = true;
-  studentDetail.value = null;
-  
-  try {
-    studentDetail.value = await instructorService.getStudentDetail(courseId, studentId);
-  } catch (error) {
-    console.error('Failed to fetch student detail:', error);
-    $q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลผู้เรียนได้', position: 'top' });
-    showStudentDetailModal.value = false;
-  } finally {
-    loadingStudentDetail.value = false;
-  }
-};
-
-const getLessonTypeIcon = (type: string) => {
-  const icons: Record<string, string> = {
-    VIDEO: 'play_circle',
-    DOCUMENT: 'description',
-    QUIZ: 'quiz',
-    ASSIGNMENT: 'assignment'
-  };
-  return icons[type] || 'article';
-};
-
-const getLessonTypeLabel = (type: string) => {
-  const labels: Record<string, string> = {
-    VIDEO: 'วิดีโอ',
-    DOCUMENT: 'เอกสาร',
-    QUIZ: 'แบบทดสอบ',
-    ASSIGNMENT: 'แบบฝึกหัด'
-  };
-  return labels[type] || type;
-};
-
-const formatVideoTime = (seconds: number) => {
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-};
-
-const formatCompletedDate = (dateStr: string | null) => {
-  if (!dateStr) return '-';
-  const date = new Date(dateStr);
-  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short' });
-};
-
-const getStudentStatusColor = (status: string) => {
-  const colors: Record<string, string> = {
-    ENROLLED: 'blue',
-    COMPLETED: 'green',
-    DROPPED: 'red'
-  };
-  return colors[status] || 'grey';
-};
-
-const getStudentStatusLabel = (status: string) => {
-  const labels: Record<string, string> = {
-    ENROLLED: 'กำลังเรียน',
-    COMPLETED: 'เรียนจบแล้ว',
-    DROPPED: 'ยกเลิก'
-  };
-  return labels[status] || status;
-};
-
-const formatEnrollDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('th-TH', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  });
-};
-
-const getLessonIcon = (type: string) => {
-  const icons: Record<string, string> = {
-    VIDEO: 'play_circle',
-    QUIZ: 'quiz',
-    DOCUMENT: 'description'
-  };
-  return icons[type] || 'article';
-};
-
-const getLessonIconColor = (type: string) => {
-  const colors: Record<string, string> = {
-    VIDEO: 'primary',
-    QUIZ: 'orange',
-    DOCUMENT: 'grey'
-  };
-  return colors[type] || 'grey';
-};
-
-const requestApproval = () => {
-  $q.dialog({
-    title: 'ขออนุมัติหลักสูตร',
-    message: 'ยืนยันการขออนุมัติหลักสูตรนี้?',
-    cancel: true,
-    persistent: true
-  }).onOk(async () => {
-    try {
-      const courseId = parseInt(route.params.id as string);
-      const response = await instructorService.sendForReview(courseId);
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-      // Refresh course data
-      fetchCourse();
-    } catch (error: any) {
-      $q.notify({
-        type: 'negative',
-        message: error.data?.error?.message || 'ไม่สามารถส่งคำขอได้',
-        position: 'top'
-      });
+    const response = await instructorService.uploadCourseThumbnail(course.value.id, files[0]);
+    if (response.data?.thumbnail_url) {
+      course.value.thumbnail_url = response.data.thumbnail_url;
     }
-  });
-};
-
-
-
-const fetchInstructors = async () => {
-    loadingInstructors.value = true;
-    try {
-        const courseId = parseInt(route.params.id as string);
-        instructors.value = await instructorService.getCourseInstructors(courseId);
-    } catch (error) {
-        $q.notify({
-            type: 'negative',
-            message: 'ไม่สามารถโหลดข้อมูลผู้สอนได้',
-            position: 'top'
-        });
-    } finally {
-        loadingInstructors.value = false;
-    }
-};
-
-let searchTimeout: NodeJS.Timeout | null = null;
-
-const filterUsers = (val: string, update: (callback: () => void) => void, abort: () => void) => {
-  // Abort if query is too short
-  if (val.length < 2) {
-    abort();
-    return;
-  }
-
-  // Clear previous timeout
-  if (searchTimeout) {
-    clearTimeout(searchTimeout);
-  }
-
-  // Debounce the search
-  searchTimeout = setTimeout(async () => {
-    loadingSearch.value = true;
-    try {
-      const results = await instructorService.searchInstructors(val);
-      const existingInstructorIds = instructors.value.map(i => i.user_id);
-      
-      // Filter out existing instructors
-      update(() => {
-        searchResults.value = results.filter(r => !existingInstructorIds.includes(r.id));
-      });
-    } catch (error) {
-      console.error('Failed to search instructors', error);
-      update(() => {
-        searchResults.value = [];
-      });
-    } finally {
-      loadingSearch.value = false;
-    }
-  }, 300);
-};
-
-const addInstructor = async () => {
-  if (!selectedUser.value) return;
-  
-  addingInstructor.value = true;
-  try {
-    const courseId = parseInt(route.params.id as string);
-    const response = await instructorService.addInstructor(courseId, selectedUser.value.email);
-    
-    $q.notify({
-      type: 'positive',
-      message: response.message,
-      position: 'top'
-    });
-    
-    showAddInstructorDialog.value = false;
-    selectedUser.value = null;
-    fetchInstructors();
+    $q.notify({ type: 'positive', message: response.message, position: 'top' });
+    input.value = '';
   } catch (error: any) {
-    $q.notify({
-        type: 'negative',
-        message: error.data?.error?.message || error.data?.message || 'ไม่สามารถเพิ่มผู้สอนได้',
-        position: 'top'
-    });
-  } finally {
-    addingInstructor.value = false;
-  }
-};
-
-const removeInstructor = async (userId: number) => {
-  $q.dialog({
-    title: 'ยืนยันการลบ',
-    message: 'คุณต้องการลบผู้สอนท่านนี้ใช่หรือไม่?',
-    cancel: true,
-    persistent: true
-  }).onOk(async () => {
-    try {
-      const courseId = parseInt(route.params.id as string);
-      const response = await instructorService.removeInstructor(courseId, userId);
-      
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-      
-      fetchInstructors();
-    } catch (error: any) {
-      $q.notify({
-          type: 'negative',
-          message: error.data?.error?.message || error.data?.message || 'ไม่สามารถลบผู้สอนได้',
-          position: 'top'
-      });
-    }
-  });
-};
-
-const setPrimaryInstructor = async (userId: number) => {
-  $q.dialog({
-    title: 'ยืนยันการเปลี่ยนหัวหน้าผู้สอน',
-    message: 'คุณต้องการตั้งให้ผู้สอนท่านนี้เป็นหัวหน้าผู้สอนใช่หรือไม่?',
-    cancel: true,
-    persistent: true
-  }).onOk(async () => {
-    try {
-      const courseId = parseInt(route.params.id as string);
-      const response = await instructorService.setPrimaryInstructor(courseId, userId);
-      
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-      
-      fetchInstructors();
-    } catch (error: any) {
-      $q.notify({
-          type: 'negative',
-          message: error.data?.error?.message || error.data?.message || 'ไม่สามารถเปลี่ยนหัวหน้าผู้สอนได้',
-          position: 'top'
-      });
-    }
-  });
-};
-
-// Announcements methods
-const fetchAnnouncements = async () => {
-  loadingAnnouncements.value = true;
-  try {
-    const courseId = parseInt(route.params.id as string);
-    announcements.value = await instructorService.getAnnouncements(courseId);
-  } catch (error) {
     $q.notify({
       type: 'negative',
-      message: 'ไม่สามารถโหลดข้อมูลประกาศได้',
+      message: error.data?.error?.message || error.data?.message || 'เกิดข้อผิดพลาดในการอัพโหลดรูปภาพ',
       position: 'top'
     });
   } finally {
-    loadingAnnouncements.value = false;
+    uploadingThumbnail.value = false;
   }
 };
 
-const formatDate = (date: string, includeTime = true) => {
-  const options: Intl.DateTimeFormatOptions = {
-    day: 'numeric',
-    month: 'short',
-    year: '2-digit'
-  };
-
-  if (includeTime) {
-    options.hour = '2-digit';
-    options.minute = '2-digit';
-  }
-
-  return new Date(date).toLocaleDateString('th-TH', options);
-};
-
-const openAnnouncementDialog = (announcement?: AnnouncementResponse) => {
-  if (announcement) {
-    editingAnnouncement.value = announcement;
-    announcementForm.value = {
-      title: { ...announcement.title },
-      content: { ...announcement.content },
-      status: announcement.status,
-      is_pinned: announcement.is_pinned
-    };
-  } else {
-    editingAnnouncement.value = null;
-    announcementForm.value = {
-      title: { th: '', en: '' },
-      content: { th: '', en: '' },
-      status: 'DRAFT',
-      is_pinned: false
-    };
-  }
-  pendingFiles.value = [];
-  showAnnouncementDialog.value = true;
-};
-
-const saveAnnouncement = async () => {
-  if (!announcementForm.value.title.th || !announcementForm.value.content.th) {
-    $q.notify({
-      type: 'warning',
-      message: 'กรุณากรอกหัวข้อและเนื้อหา',
-      position: 'top'
-    });
-    return;
-  }
-
-  savingAnnouncement.value = true;
+const requestApproval = async () => {
+  if (!course.value) return;
   try {
-    const courseId = parseInt(route.params.id as string);
-    if (editingAnnouncement.value) {
-      const response = await instructorService.updateAnnouncement(courseId, editingAnnouncement.value.id, announcementForm.value);
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-    } else {
-      // Create announcement with files
-      const response = await instructorService.createAnnouncement(
-        courseId, 
-        announcementForm.value, 
-        pendingFiles.value.length > 0 ? pendingFiles.value : undefined
-      );
-      pendingFiles.value = [];
-      
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-    }
-    showAnnouncementDialog.value = false;
-    fetchAnnouncements();
-  } catch (error) {
-    $q.notify({
-      type: 'negative',
-      message: (error as any).data?.error?.message || (error as any).data?.message || 'เกิดข้อผิดพลาด',
-      position: 'top'
+    await instructorService.submitCourseForApproval(course.value.id);
+    $q.notify({ type: 'positive', message: 'ส่งขออนุมัติสำเร็จ', position: 'top' });
+    fetchCourse();
+  } catch (error: any) {
+    $q.notify({ 
+      type: 'negative', 
+      message: error.data?.message || 'ไม่สามารถส่งขออนุมัติได้', 
+      position: 'top' 
     });
-  } finally {
-    savingAnnouncement.value = false;
   }
 };
 
-const confirmDeleteAnnouncement = (announcement: AnnouncementResponse) => {
-  $q.dialog({
-    title: 'ยืนยันการลบ',
-    message: `คุณต้องการลบประกาศ "${announcement.title.th}" หรือไม่?`,
-    cancel: true,
-    persistent: true
-  }).onOk(async () => {
-    try {
-      const courseId = parseInt(route.params.id as string);
-      const response = await instructorService.deleteAnnouncement(courseId, announcement.id);
-      $q.notify({
-        type: 'positive',
-        message: response.message,
-        position: 'top'
-      });
-      fetchAnnouncements();
-    } catch (error) {
-      $q.notify({
-        type: 'negative',
-        message: (error as any).data?.error?.message || (error as any).data?.message || 'เกิดข้อผิดพลาดในการลบประกาศ',
-        position: 'top'
-      });
-    }
-  });
-};
-
-// Attachment handling methods
-const triggerFileInput = () => {
-  fileInputRef.value?.click();
-};
-
-const handleFileUpload = async (event: Event) => {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  if (!file) return;
-
-  // If editing existing announcement, upload immediately
-  if (editingAnnouncement.value) {
-    uploadingAttachment.value = true;
-    try {
-      const courseId = parseInt(route.params.id as string);
-      const updated = await instructorService.uploadAnnouncementAttachment(
-        courseId,
-        editingAnnouncement.value.id,
-        file
-      );
-      $q.notify({
-        type: 'positive',
-        message: updated.message,
-        position: 'top'
-      });
-      
-      // Refresh list to get complete object including attachments
-      await fetchAnnouncements();
-      
-      // Update the editing object from the fresh list
-      if (editingAnnouncement.value) {
-        const fresh = announcements.value.find(a => a.id === editingAnnouncement.value!.id);
-        if (fresh) {
-           editingAnnouncement.value = fresh;
-        }
-      }
-    } catch (error) {
-      $q.notify({
-        type: 'negative',
-        message: (error as any).data?.error?.message || (error as any).data?.message || 'เกิดข้อผิดพลาดในการอัพโหลดไฟล์',
-        position: 'top'
-      });
-    } finally {
-      uploadingAttachment.value = false;
-      input.value = '';
-    }
-  } else {
-    // If creating new announcement, add to pending files
-    pendingFiles.value.push(file);
-    input.value = '';
-  }
-};
-
-const removePendingFile = (index: number) => {
-  pendingFiles.value.splice(index, 1);
-};
-
-const deleteAttachment = async (attachmentId: number) => {
-  if (!editingAnnouncement.value) return;
-
-  deletingAttachmentId.value = attachmentId;
-  try {
-    const courseId = parseInt(route.params.id as string);
-    const response = await instructorService.deleteAnnouncementAttachment(
-      courseId,
-      editingAnnouncement.value.id,
-      attachmentId
-    );
-    // Remove from local state
-    editingAnnouncement.value.attachments = editingAnnouncement.value.attachments.filter(
-      a => a.id !== attachmentId
-    );
-    $q.notify({
-      type: 'positive',
-      message: response.message,
-      position: 'top'
-    });
-    fetchAnnouncements();
-  } catch (error) {
-    $q.notify({
-      type: 'negative',
-      message: (error as any).data?.error?.message || (error as any).data?.message || 'เกิดข้อผิดพลาดในการลบไฟล์',
-      position: 'top'
-    });
-  } finally {
-    deletingAttachmentId.value = null;
-  }
-};
-
-const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 Bytes';
-  const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-
-// Watch for tab change to load data
-watch(activeTab, (newTab) => {
-  if (newTab === 'announcements' && announcements.value.length === 0) {
-    fetchAnnouncements();
-  } else if (newTab === 'instructors' && instructors.value.length === 0) {
-    fetchInstructors();
-  } else if (newTab === 'students' && students.value.length === 0) {
-    fetchStudents();
-  }
-});
-
 // Lifecycle
 onMounted(() => {
   fetchCourse();
diff --git a/frontend_management/pages/instructor/courses/index.vue b/frontend_management/pages/instructor/courses/index.vue
index 04926f01..7137e827 100644
--- a/frontend_management/pages/instructor/courses/index.vue
+++ b/frontend_management/pages/instructor/courses/index.vue
@@ -42,6 +42,7 @@
             placeholder="ค้นหาหลักสูตร..."
             outlined
             dense
+            debounce="600"
             bg-color="grey-1"
           >
             <template v-slot:prepend>
diff --git a/frontend_management/services/admin.service.ts b/frontend_management/services/admin.service.ts
index ba10a62c..2f9db7c4 100644
--- a/frontend_management/services/admin.service.ts
+++ b/frontend_management/services/admin.service.ts
@@ -12,6 +12,7 @@ export interface AdminUserResponse {
             th: string;
         };
     };
+    avatar_url?: string;
     profile: {
         prefix: {
             en: string;
diff --git a/frontend_management/services/instructor.service.ts b/frontend_management/services/instructor.service.ts
index 358f0488..52d1b5c0 100644
--- a/frontend_management/services/instructor.service.ts
+++ b/frontend_management/services/instructor.service.ts
@@ -251,6 +251,13 @@ export const instructorService = {
         );
     },
 
+    async submitCourseForApproval(courseId: number): Promise<ApiResponse<void>> {
+        return await authRequest<ApiResponse<void>>(
+            `/api/instructors/courses/${courseId}/submit`,
+            { method: 'POST' }
+        );
+    },
+
     async getCourseInstructors(courseId: number): Promise<CourseInstructorResponse[]> {
         const response = await authRequest<InstructorsListResponse>(
             `/api/instructors/courses/listinstructor/${courseId}`
@@ -434,6 +441,35 @@ export const instructorService = {
         );
     },
 
+    // Quiz Scores
+    async getLessonQuizScores(
+        courseId: number,
+        lessonId: number,
+        page: number = 1,
+        limit: number = 10,
+        search?: string,
+        isPassed?: boolean
+    ): Promise<QuizScoresResponse> {
+        let url = `/api/instructors/courses/${courseId}/lessons/${lessonId}/quiz/scores?page=${page}&limit=${limit}`;
+        if (search) {
+            url += `&search=${encodeURIComponent(search)}`;
+        }
+        if (isPassed !== undefined) {
+            url += `&isPassed=${isPassed}`;
+        }
+        return await authRequest<QuizScoresResponse>(url);
+    },
+
+    async getStudentQuizAttemptDetail(
+        courseId: number,
+        lessonId: number,
+        studentId: number
+    ): Promise<QuizAttemptDetailResponse> {
+        return await authRequest<QuizAttemptDetailResponse>(
+            `/api/instructors/courses/${courseId}/lessons/${lessonId}/quiz/students/${studentId}`
+        );
+    },
+
     // Video Upload
     async uploadLessonVideo(courseId: number, chapterId: number, lessonId: number, video: File, attachments?: File[]): Promise<ApiResponse<LessonResponse>> {
         const formData = new FormData();
@@ -467,6 +503,19 @@ export const instructorService = {
         );
     },
 
+    async setLessonYoutubeVideo(courseId: number, chapterId: number, lessonId: number, youtubeVideoId: string, videoTitle: string): Promise<ApiResponse<LessonResponse>> {
+        return await authRequest<ApiResponse<LessonResponse>>(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}/youtube-video`,
+            {
+                method: 'POST',
+                body: {
+                    youtube_video_id: youtubeVideoId,
+                    video_title: videoTitle
+                }
+            }
+        );
+    },
+
     // Attachments
     async addAttachments(courseId: number, chapterId: number, lessonId: number, files: File[]): Promise<ApiResponse<LessonResponse>> {
         const formData = new FormData();
@@ -719,6 +768,7 @@ export interface AnnouncementResponse {
     is_pinned: boolean;
     created_at: string;
     updated_at: string;
+    published_at?: string;
     attachments: AnnouncementAttachment[];
 }
 
@@ -740,6 +790,97 @@ export interface CreateAnnouncementRequest {
         th: string;
         en: string;
     };
-    status?: 'DRAFT' | 'PUBLISHED';
     is_pinned?: boolean;
+    status?: 'DRAFT' | 'PUBLISHED';
+    published_at?: string;
+}
+
+export interface QuizScoreStudentResponse {
+    user_id: number;
+    username: string;
+    email: string;
+    first_name: string;
+    last_name: string;
+    avatar_url: string | null;
+    latest_attempt: {
+        completed_at: string;
+        attempt_number: number;
+        is_passed: boolean;
+        total_score: number;
+        score: number;
+        id: number;
+    } | null;
+    best_score: number;
+    total_attempts: number;
+    is_passed: boolean;
+}
+
+export interface QuizScoresData {
+    students: QuizScoreStudentResponse[];
+    total_score: number;
+    passing_score: number;
+    quiz_title: {
+        th: string;
+        en: string;
+    };
+    quiz_id: number;
+    lesson_title: {
+        th: string;
+        en: string;
+    };
+    lesson_id: number;
+}
+
+export interface QuizScoresResponse {
+    code: number;
+    message: string;
+    data: QuizScoresData;
+    total: number;
+    page: number;
+    limit: number;
+}
+
+export interface QuizAnswerReview {
+    question_id: number;
+    question_text: {
+        th: string;
+        en: string;
+    };
+    sort_order: number;
+    selected_choice_id: number;
+    selected_choice_text: {
+        th: string;
+        en: string;
+    };
+    is_correct: boolean;
+    score: number;
+    question_score: number;
+}
+
+export interface QuizAttemptDetailData {
+    attempt_id: number;
+    quiz_id: number;
+    student: {
+        user_id: number;
+        username: string;
+        email: string;
+        first_name: string;
+        last_name: string;
+    };
+    score: number;
+    total_score: number;
+    total_questions: number;
+    correct_answers: number;
+    is_passed: boolean;
+    passing_score: number;
+    attempt_number: number;
+    started_at: string;
+    completed_at: string;
+    answers_review: QuizAnswerReview[];
+}
+
+export interface QuizAttemptDetailResponse {
+    code: number;
+    message: string;
+    data: QuizAttemptDetailData;
 }