feat: Add instructor course management pages for creating, listing, and viewing course details.

frontend_management/pages/admin/index.vue

@@ -17,7 +17,7 @@
           <div 
             class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
           >
-            👨‍💼
+            <q-icon name="person" />
             <q-menu>
               <q-list style="min-width: 200px">
                 <!-- User Info Header -->

frontend_management/pages/instructor/courses/[id]/index.vue

@@ -230,7 +230,7 @@ const fetchCourse = async () => {
 const getStatusColor = (status: string) => {
   const colors: Record<string, string> = {
     APPROVED: 'green',
-    PENDING: 'yellow',
+    PENDING: 'orange',
     DRAFT: 'grey',
     REJECTED: 'red'
   };

frontend_management/pages/instructor/courses/[id]/structure.vue

@@ -108,6 +108,13 @@
                 v-for="(lesson, lessonIndex) in chapter.lessons"
                 :key="lesson.id"
                 class="py-3"
+                :class="{ 'opacity-50': draggedLesson?.id === lesson.id, 'bg-primary-50': dragOverLesson?.id === lesson.id }"
+                draggable="true"
+                @dragstart="onLessonDragStart(chapter, lesson, $event)"
+                @dragend="onLessonDragEnd"
+                @dragover.prevent="onLessonDragOver(chapter, lesson)"
+                @dragleave="onLessonDragLeave"
+                @drop.prevent="onLessonDrop(chapter, lesson)"
               >
                 <q-item-section avatar>
                   <q-icon name="drag_indicator" class="cursor-move text-gray-300" />
@@ -120,10 +127,10 @@
                 </q-item-section>
                 <q-item-section>
                   <q-item-label>
-                    {{ chapterIndex + 1 }}.{{ lessonIndex + 1 }} {{ lesson.title.th }}
+                    {{ lesson.sort_order }}. {{ lesson.title.th }}
                   </q-item-label>
                   <q-item-label caption>
-                    {{ getLessonTypeLabel(lesson.type) }} · {{ lesson.duration_minutes }} นาที
+                    {{ getLessonTypeLabel(lesson.type) }}
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
@@ -218,7 +225,6 @@
               v-model="lessonForm.title.th"
               label="ชื่อบทเรียน (ภาษาไทย) *"
               outlined
-              class="mb-4"
               :rules="[val => !!val || 'กรุณากรอกชื่อบทเรียน']"
             />
             <q-input
@@ -229,6 +235,7 @@
             />
 
             <q-select
+              v-if="!editingLesson"
               v-model="lessonForm.type"
               :options="lessonTypeOptions"
               label="ประเภท *"
@@ -238,18 +245,29 @@
               class="mb-4"
             />
 
-            <q-input
+            <!-- <q-input
               v-model.number="lessonForm.duration_minutes"
               label="ระยะเวลา (นาที)"
               type="number"
               outlined
               class="mb-4"
+            /> -->
+            
+            <q-input
+              v-if="lessonForm.type"
+              v-model="lessonForm.content.th"
+              label="เนื้อหา (ภาษาไทย)"
+              type="textarea"
+              outlined
+              autogrow
+              rows="3"
+              class="mb-4"
             />
 
             <q-input
-              v-if="lessonForm.type !== 'QUIZ'"
+              v-if="lessonForm.type"
-              v-model="lessonForm.content.th"
+              v-model="lessonForm.content.en"
-              label="เนื้อหา (ภาษาไทย)"
+              label="เนื้อหา (English)"
               type="textarea"
               outlined
               autogrow
@@ -383,6 +401,57 @@ const onDrop = async (targetChapter: ChapterResponse) => {
   }
 };
 
+// Lesson Drag and Drop
+const draggedLesson = ref<LessonResponse | null>(null);
+const dragOverLesson = ref<LessonResponse | null>(null);
+const draggedLessonChapter = ref<ChapterResponse | null>(null);
+
+const onLessonDragStart = (chapter: ChapterResponse, lesson: LessonResponse, event: DragEvent) => {
+  draggedLesson.value = lesson;
+  draggedLessonChapter.value = chapter;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+const onLessonDragEnd = () => {
+  draggedLesson.value = null;
+  dragOverLesson.value = null;
+  draggedLessonChapter.value = null;
+};
+
+const onLessonDragOver = (chapter: ChapterResponse, lesson: LessonResponse) => {
+  // Only allow drag within same chapter
+  if (draggedLesson.value && draggedLessonChapter.value?.id === chapter.id && draggedLesson.value.id !== lesson.id) {
+    dragOverLesson.value = lesson;
+  }
+};
+
+const onLessonDragLeave = () => {
+  dragOverLesson.value = null;
+};
+
+const onLessonDrop = async (chapter: ChapterResponse, targetLesson: LessonResponse) => {
+  if (!draggedLesson.value || !draggedLessonChapter.value || draggedLessonChapter.value.id !== chapter.id || draggedLesson.value.id === targetLesson.id) {
+    onLessonDragEnd();
+    return;
+  }
+
+  try {
+    // Insert at target position - backend will shift other lessons
+    const targetSortOrder = targetLesson.sort_order;
+    
+    await instructorService.reorderLesson(courseId.value, chapter.id, draggedLesson.value.id, targetSortOrder);
+    
+    $q.notify({ type: 'positive', message: 'เรียงลำดับบทเรียนสำเร็จ', position: 'top' });
+    fetchChapters();
+  } catch (error) {
+    $q.notify({ type: 'negative', message: 'ไม่สามารถเรียงลำดับได้', position: 'top' });
+  } finally {
+    onLessonDragEnd();
+  }
+};
+
 // Forms
 const chapterForm = ref({
   title: { th: '', en: '' },
@@ -392,14 +461,12 @@ const chapterForm = ref({
 const lessonForm = ref({
   title: { th: '', en: '' },
   content: { th: '', en: '' },
-  type: 'VIDEO' as 'VIDEO' | 'QUIZ' | 'DOCUMENT',
+  type: 'VIDEO' as 'VIDEO' | 'QUIZ'
-  duration_minutes: 10
 });
 
 const lessonTypeOptions = [
   { label: 'วิดีโอ', value: 'VIDEO' },
   { label: 'แบบทดสอบ', value: 'QUIZ' },
-  { label: 'เอกสาร', value: 'DOCUMENT' }
 ];
 
 // Methods
@@ -513,16 +580,14 @@ const openLessonDialog = (chapter: ChapterResponse, lesson?: LessonResponse) =>
     lessonForm.value = {
       title: { ...lesson.title },
       content: lesson.content ? { ...lesson.content } : { th: '', en: '' },
-      type: lesson.type,
+      type: lesson.type as 'VIDEO' | 'QUIZ'
-      duration_minutes: lesson.duration_minutes
     };
   } else {
     editingLesson.value = null;
     lessonForm.value = {
       title: { th: '', en: '' },
       content: { th: '', en: '' },
-      type: 'VIDEO',
+      type: 'VIDEO'
-      duration_minutes: 10
     };
   }
   lessonDialog.value = true;
@@ -531,11 +596,32 @@ const openLessonDialog = (chapter: ChapterResponse, lesson?: LessonResponse) =>
 const saveLesson = async () => {
   saving.value = true;
   try {
+    if (!selectedChapter.value) return;
+    
     if (editingLesson.value) {
-      // TODO: Call updateLesson API
+      // Update - don't send type
+      const updateData = {
+        title: lessonForm.value.title,
+        content: lessonForm.value.content
+      };
+      await instructorService.updateLesson(
+        courseId.value, 
+        selectedChapter.value.id, 
+        editingLesson.value.id, 
+        updateData
+      );
       $q.notify({ type: 'positive', message: 'แก้ไขบทเรียนสำเร็จ', position: 'top' });
     } else {
-      // TODO: Call createLesson API
+      // Create - include type and sort_order
+      const createData = {
+        ...lessonForm.value,
+        sort_order: (selectedChapter.value.lessons?.length || 0) + 1
+      };
+      await instructorService.createLesson(
+        courseId.value, 
+        selectedChapter.value.id, 
+        createData
+      );
       $q.notify({ type: 'positive', message: 'เพิ่มบทเรียนสำเร็จ', position: 'top' });
     }
     lessonDialog.value = false;
@@ -555,7 +641,7 @@ const confirmDeleteLesson = (chapter: ChapterResponse, lesson: LessonResponse) =
     persistent: true
   }).onOk(async () => {
     try {
-      // TODO: Call deleteLesson API
+      await instructorService.deleteLesson(courseId.value, chapter.id, lesson.id);
       $q.notify({ type: 'positive', message: 'ลบบทเรียนสำเร็จ', position: 'top' });
       fetchChapters();
     } catch (error) {

frontend_management/pages/instructor/courses/create.vue

@@ -168,7 +168,7 @@ const categories = ref<CategoryResponse[]>([]);
 
 // Form
 const form = ref<CreateCourseRequest>({
-  category_id: 0,
+  category_id: 1,
   title: { th: '', en: '' },
   slug: '',
   description: { th: '', en: '' },

frontend_management/pages/instructor/courses/index.vue

@@ -129,7 +129,7 @@
           >
             <q-tooltip>ดูรายละเอียด</q-tooltip>
           </q-btn>
-          <q-btn
+          <!-- <q-btn
             flat
             dense
             icon="edit"
@@ -137,7 +137,7 @@
             @click="navigateTo(`/instructor/courses/${course.id}/edit`)"
           >
             <q-tooltip>แก้ไข</q-tooltip>
-          </q-btn>
+          </q-btn> -->
           <q-space />
           <q-btn flat round dense icon="more_vert">
             <q-menu>

frontend_management/pages/instructor/index.vue

@@ -17,7 +17,7 @@
           <div 
             class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
           >
-            👨‍🏫
+            <q-icon name="person" />
             <q-menu>
               <q-list style="min-width: 200px">
                 <!-- User Info Header -->
@@ -83,7 +83,7 @@
       <!-- Chart Placeholder -->
       <q-card>
         <q-card-section>
-          <h3 class="text-xl font-semibold mb-4">📊 สถิติผู้สมัครรวม (รายเดือน)</h3>
+          <h3 class="text-xl font-semibold mb-4"> สถิติผู้สมัครรวม (รายเดือน)</h3>
           <div class="bg-gray-100 rounded-lg p-12 text-center text-gray-500">
             [กราฟแสดงสถิติผู้สมัครรวม (รายเดือน)]
           </div>
@@ -94,7 +94,7 @@
       <q-card>
         <q-card-section>
           <div class="flex justify-between items-center mb-4">
-            <h3 class="text-xl font-semibold">📚 หลักสูตรล่าสุด</h3>
+            <h3 class="text-xl font-semibold"> หลักสูตร</h3>
             <q-btn
               flat
               color="primary"

frontend_management/services/instructor.service.ts

@@ -258,10 +258,11 @@ export const instructorService = {
             return MOCK_COURSE_DETAIL.chapters;
         }
 
-        const response = await authRequest<{ code: number; data: ChapterResponse[]; total: number }>(
+        // Get chapters from course detail endpoint
-            `/api/instructors/courses/${courseId}/chapters`
+        const response = await authRequest<{ code: number; data: { chapters: ChapterResponse[] } }>(
+            `/api/instructors/courses/${courseId}`
         );
-        return response.data;
+        return response.data.chapters || [];
     },
 
     async createChapter(courseId: number, data: CreateChapterRequest): Promise<ChapterResponse> {
@@ -333,6 +334,92 @@ export const instructorService = {
             `/api/instructors/courses/${courseId}/chapters/${chapterId}/reorder`,
             { method: 'PUT', body: { sort_order: sortOrder } }
         );
+    },
+
+    // Lesson CRUD
+    async getLesson(courseId: number, chapterId: number, lessonId: number): Promise<LessonDetailResponse> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return MOCK_COURSE_DETAIL.chapters[0].lessons[0] as LessonDetailResponse;
+        }
+
+        const response = await authRequest<{ code: number; data: LessonDetailResponse }>(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`
+        );
+        return response.data;
+    },
+
+    async createLesson(courseId: number, chapterId: number, data: CreateLessonRequest): Promise<LessonResponse> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return {
+                ...MOCK_COURSE_DETAIL.chapters[0].lessons[0],
+                id: Date.now(),
+                ...data
+            };
+        }
+
+        const response = await authRequest<{ code: number; data: LessonResponse }>(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons`,
+            { method: 'POST', body: data }
+        );
+        return response.data;
+    },
+
+    async updateLesson(courseId: number, chapterId: number, lessonId: number, data: UpdateLessonRequest): Promise<LessonResponse> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return {
+                ...MOCK_COURSE_DETAIL.chapters[0].lessons[0],
+                id: lessonId,
+                ...data
+            };
+        }
+
+        const response = await authRequest<{ code: number; data: LessonResponse }>(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`,
+            { method: 'PUT', body: data }
+        );
+        return response.data;
+    },
+
+    async deleteLesson(courseId: number, chapterId: number, lessonId: number): Promise<void> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            return;
+        }
+
+        await authRequest(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`,
+            { method: 'DELETE' }
+        );
+    },
+
+    async reorderLesson(courseId: number, chapterId: number, lessonId: number, sortOrder: number): Promise<void> {
+        const config = useRuntimeConfig();
+        const useMockData = config.public.useMockData as boolean;
+
+        if (useMockData) {
+            await new Promise(resolve => setTimeout(resolve, 300));
+            return;
+        }
+
+        await authRequest(
+            `/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/reorder`,
+            { method: 'PUT', body: { lesson_id: lessonId, sort_order: sortOrder } }
+        );
     }
 };
 
@@ -407,6 +494,34 @@ export interface CreateChapterRequest {
     is_published?: boolean;
 }
 
+export interface CreateLessonRequest {
+    title: { th: string; en: string };
+    content?: { th: string; en: string } | null;
+    type: 'VIDEO' | 'QUIZ';
+    sort_order?: number;
+}
+
+export interface UpdateLessonRequest {
+    title: { th: string; en: string };
+    content?: { th: string; en: string } | null;
+}
+
+export interface AttachmentResponse {
+    id: number;
+    lesson_id: number;
+    file_name: string;
+    file_path: string;
+    file_size: number;
+    mime_type: string;
+    description: { th: string; en: string };
+    sort_order: number;
+    created_at: string;
+}
+
+export interface LessonDetailResponse extends LessonResponse {
+    attachments: AttachmentResponse[];
+}
+
 // Mock course detail
 const MOCK_COURSE_DETAIL: CourseDetailResponse = {
     ...MOCK_COURSES[0],