feat: Add initial e-learning frontend setup including admin and instructor services, layouts, and pages.

frontend_management/components/course/LessonPreviewDialog.vue

@@ -83,6 +83,28 @@
                 </div>
               </div>
 
+              <!-- Quiz Settings -->
+              <div class="mt-4 p-4 bg-white rounded-lg border border-blue-100">
+                <div class="font-semibold text-gray-700 mb-3">การตั้งค่าเพิ่มเติม</div>
+                <div class="flex flex-wrap gap-2">
+                   <q-chip :color="lessonDetail.quiz.shuffle_questions ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.shuffle_questions ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.shuffle_questions ? 'check' : 'close'">
+                      สุ่มคำถาม
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.shuffle_choices ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.shuffle_choices ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.shuffle_choices ? 'check' : 'close'">
+                      สุ่มตัวเลือก
+                   </q-chip>
+                    <q-chip :color="lessonDetail.quiz.show_answers_after_completion ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.show_answers_after_completion ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.show_answers_after_completion ? 'check' : 'close'">
+                      เฉลยหลังทำเสร็จ
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.is_skippable ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.is_skippable ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.is_skippable ? 'check' : 'close'">
+                      ข้ามข้อได้
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.allow_multiple_attempts ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.allow_multiple_attempts ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.allow_multiple_attempts ? 'check' : 'close'">
+                      ทำซ้ำได้
+                   </q-chip>
+                </div>
+              </div>
+
               <!-- Questions List -->
               <div v-if="lessonDetail.quiz.questions && lessonDetail.quiz.questions.length > 0" class="mt-6 space-y-6">
                 <!-- ... (questions rendering code unchanged) ... -->

frontend_management/layouts/admin.vue

@@ -63,7 +63,7 @@
         </NuxtLink>
 
         <NuxtLink
-          to="/admin/audit-logs"
+          to="/admin/audit-log"
           class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
           active-class="bg-primary-500 text-white hover:bg-primary-600"
         >
@@ -91,11 +91,29 @@
 </template>
 
 <script setup lang="ts">
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const authStore = useAuthStore();
 const router = useRouter();
 
 const handleLogout = () => {
-  authStore.logout();
+  $q.dialog({
-  router.push('/login');
+    title: 'ยืนยันออกจากระบบ',
+    message: 'คุณต้องการออกจากระบบหรือไม่?',
+    persistent: true,
+    ok: {
+      label: 'ออกจากระบบ',
+      color: 'negative',
+      flat: false
+    },
+    cancel: {
+      label: 'ยกเลิก',
+      flat: true
+    }
+  }).onOk(() => {
+    authStore.logout();
+    router.push('/login');
+  });
 };
 </script>

frontend_management/layouts/instructor.vue

@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50">
     <!-- Sidebar -->
     <aside class="fixed left-0 top-0 h-screen w-64 bg-white shadow-lg">
-      <div class="p-6">
+      <div class="py-6 px-8">
         <h2 class="text-xl font-bold text-primary-600">E-Learning</h2>
         <p class="text-sm text-gray-500">Instructor Panel</p>
       </div>
@@ -46,11 +46,29 @@
 </template>
 
 <script setup lang="ts">
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const authStore = useAuthStore();
 const router = useRouter();
 
 const handleLogout = () => {
-  authStore.logout();
+  $q.dialog({
-  router.push('/login');
+    title: 'ยืนยันออกจากระบบ',
+    message: 'คุณต้องการออกจากระบบหรือไม่?',
+    persistent: true,
+    ok: {
+      label: 'ออกจากระบบ',
+      color: 'negative',
+      flat: false
+    },
+    cancel: {
+      label: 'ยกเลิก',
+      flat: true
+    }
+  }).onOk(() => {
+    authStore.logout();
+    router.push('/login');
+  });
 };
 </script>

frontend_management/nuxt.config.ts

@@ -35,10 +35,13 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   app: {
     head: {
-      title: 'E-Learning System',
+      title: 'E-Learning-Management',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/png', href: '/icon.png' }
       ]
     }
   }

frontend_management/pages/admin/audit-log/index.vue

@@ -218,7 +218,7 @@
           <p>เลือกระยะเวลาที่ต้องการเก็บไว้ (ลบข้อมูลที่เก่ากว่ากำหนด):</p>
           <q-select
             v-model="cleanupDays"
-            :options="[30, 60, 90, 180, 365]"
+            :options="[7, 15, 30, 60, 90, 180, 365]"
             label="จำนวนวัน"
             suffix="วัน"
             outlined

frontend_management/pages/admin/courses/[id].vue

@@ -75,7 +75,7 @@
         <div class="space-y-4">
           <!-- Stats -->
           <div class="bg-white rounded-xl shadow-sm p-6">
-            <h3 class="font-semibold text-gray-700 mb-4">สถิติ</h3>
+            <h3 class="font-semibold text-gray-700 mb-4">รายละเอียด</h3>
             <div class="space-y-3">
               <div class="flex justify-between">
                 <span class="text-gray-500">จำนวนบท</span>
@@ -93,6 +93,14 @@
                 <span class="text-gray-500">แบบทดสอบ</span>
                 <span class="font-medium">{{ quizCount }}</span>
               </div>
+              <div class="flex justify-between">
+                <span class="text-gray-500">สร้างเมื่อ</span>
+                <span>{{ formatDate(course.created_at) }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-500">อัพเดทล่าสุด</span>
+                <span>{{ formatDate(course.updated_at) }}</span>
+              </div>
             </div>
           </div>
 
@@ -116,21 +124,6 @@
               </div>
             </div>
           </div>
-
-          <!-- Timeline -->
-          <div class="bg-white rounded-xl shadow-sm p-6">
-            <h3 class="font-semibold text-gray-700 mb-4">ข้อมูลระบบ</h3>
-            <div class="space-y-3 text-sm">
-              <div class="flex justify-between">
-                <span class="text-gray-500">สร้างเมื่อ</span>
-                <span>{{ formatDate(course.created_at) }}</span>
-              </div>
-              <div class="flex justify-between">
-                <span class="text-gray-500">อัพเดทล่าสุด</span>
-                <span>{{ formatDate(course.updated_at) }}</span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 

frontend_management/pages/admin/index.vue

@@ -146,7 +146,7 @@
       <div class="card bg-white rounded-lg shadow-sm">
         <div class="p-6 border-b flex justify-between items-center">
           <h2 class="text-lg font-semibold text-gray-900">กิจกรรมล่าสุด</h2>
-           <q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-logs" size="sm" />
+           <q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-log" size="sm" />
         </div>
         <div class="divide-y">
              <div v-if="loading" class="p-8 text-center text-gray-500">

frontend_management/pages/admin/recommended-courses/index.vue

@@ -183,6 +183,34 @@
                    </div>
                 </div>
              </div>
+
+             <!-- Course Structure -->
+             <div v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0" class="mt-6">
+               <div class="font-bold text-lg mb-3">โครงสร้างหลักสูตร (Course Structure)</div>
+               <div class="space-y-3">
+                 <q-expansion-item
+                   v-for="(chapter, index) in selectedCourse.chapters"
+                   :key="chapter.id"
+                   :label="`บทที่ ${index + 1}: ${chapter.title.th}`"
+                   :caption="`${chapter.lessons.length} บทเรียน`"
+                   header-class="bg-gray-50 rounded-lg"
+                   expand-icon-class="text-primary"
+                 >
+                   <div class="pl-4 pt-2">
+                     <div
+                       v-for="(lesson, lessonIndex) in chapter.lessons"
+                       :key="lesson.id"
+                       class="flex items-center gap-3 py-2 border-b last:border-b-0"
+                     >
+                       <q-icon name="article" color="primary" size="20px" />
+                       <span class="text-gray-700">{{ lessonIndex + 1 }}. {{ lesson.title.th }}</span>
+                       <span v-if="lesson.title.en" class="text-gray-400 text-xs ml-auto">{{ lesson.title.en }}</span>
+                     </div>
+                   </div>
+                 </q-expansion-item>
+               </div>
+             </div>
+
           </q-card-section>
           
           <!-- Inner Loading -->

frontend_management/pages/instructor/courses/index.vue

@@ -263,7 +263,8 @@ const statusOptions = [
   { label: 'เผยแพร่แล้ว', value: 'APPROVED' },
   { label: 'รอตรวจสอบ', value: 'PENDING' },
   { label: 'แบบร่าง', value: 'DRAFT' },
-  { label: 'ถูกปฏิเสธ', value: 'REJECTED' }
+  { label: 'ถูกปฏิเสธ', value: 'REJECTED' },
+  //{ label: 'เก็บถาวร', value: 'ARCHIVED' }
 ];
 
 // Stats
@@ -275,7 +276,7 @@ const stats = computed(() => ({
   rejected: courses.value.filter(c => c.status === 'REJECTED').length
 }));
 
-// Filtered courses
+// Filtered courses (search only, status is handled server-side)
 const filteredCourses = computed(() => {
   let result = courses.value;
 
@@ -287,10 +288,6 @@ const filteredCourses = computed(() => {
     );
   }
 
-  if (filterStatus.value) {
-    result = result.filter(course => course.status === filterStatus.value);
-  }
-
   return result;
 });
 
@@ -298,7 +295,7 @@ const filteredCourses = computed(() => {
 const fetchCourses = async () => {
   loading.value = true;
   try {
-    courses.value = await instructorService.getCourses();
+    courses.value = await instructorService.getCourses(filterStatus.value || undefined);
   } catch (error) {
     $q.notify({
       type: 'negative',
@@ -310,12 +307,18 @@ const fetchCourses = async () => {
   }
 };
 
+// Re-fetch when status filter changes
+watch(filterStatus, () => {
+  fetchCourses();
+});
+
 const getStatusColor = (status: string) => {
   const colors: Record<string, string> = {
     APPROVED: 'green',
     PENDING: 'orange',
     DRAFT: 'grey',
-    REJECTED: 'red'
+    REJECTED: 'red',
+    ARCHIVED: 'blue-grey'
   };
   return colors[status] || 'grey';
 };
@@ -325,7 +328,8 @@ const getStatusLabel = (status: string) => {
     APPROVED: 'เผยแพร่แล้ว',
     PENDING: 'รอตรวจสอบ',
     DRAFT: 'แบบร่าง',
-    REJECTED: 'ถูกปฏิเสธ'
+    REJECTED: 'ถูกปฏิเสธ',
+    ARCHIVED: 'เก็บถาวร'
   };
   return labels[status] || status;
 };

frontend_management/services/admin.service.ts

@@ -296,6 +296,15 @@ export interface RecommendedCourse {
     };
     chapters_count: number;
     lessons_count: number;
+    chapters?: {
+        id: number;
+        title: { th: string; en: string };
+        sort_order: number;
+        lessons: {
+            id: number;
+            title: { th: string; en: string };
+        }[];
+    }[];
 }
 
 export interface RecommendedCoursesListResponse {

frontend_management/services/instructor.service.ts

@@ -208,8 +208,12 @@ const authRequest = async <T>(
 };
 
 export const instructorService = {
-    async getCourses(): Promise<CourseResponse[]> {
+    async getCourses(status?: string): Promise<CourseResponse[]> {
-        const response = await authRequest<CoursesListResponse>('/api/instructors/courses');
+        let url = '/api/instructors/courses';
+        if (status) {
+            url += `?status=${status}`;
+        }
+        const response = await authRequest<CoursesListResponse>(url);
         return response.data;
     },