feat: Introduce comprehensive course management features for admin, including recommended, pending, and detailed course views, and instructor course listing with a lesson preview component.

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

@@ -104,7 +104,7 @@
        <!-- View Details Dialog -->
       <q-dialog v-model="showDialog" maximized transition-show="slide-up" transition-hide="slide-down">
         <q-card>
-          <q-bar class="bg-primary text-white">
+          <q-bar class="bg-primary-500 text-white">
             <q-space />
             <q-btn dense flat icon="close" v-close-popup>
               <q-tooltip class="bg-white text-primary">Close</q-tooltip>
@@ -153,7 +153,7 @@
                    <!-- Category -->
                    <div class="bg-gray-50 p-4 rounded-lg gap-2">
                       <div class="font-bold mb-2">หมวดหมู่ (Category):</div>
-                      <div class="mb-2">{{ selectedCourse.category.name.th }} ({{ selectedCourse.category.name.en }})</div>
+                      <div class="text-gray-700 mb-2">{{ selectedCourse.category.name.th }} ({{ selectedCourse.category.name.en }})</div>
                    </div>
 
                    <!-- Instructors -->
@@ -164,7 +164,7 @@
                              <q-icon name="person" />
                          </q-avatar>
                          <div>
-                            <div class="font-medium">{{ inst.user.username }}</div>
+                            <div class="font-medium text-gray-700">{{ inst.user.username }}</div>
                             <div class="text-xs text-gray-500" v-if="inst.is_primary">(Primary)</div>
                          </div>
                       </div>
@@ -237,7 +237,7 @@ const columns = [
   { name: 'category', label: 'Category', field: (row: RecommendedCourse) => row.category.name.th, sortable: true, align: 'left' as const },
   { name: 'price', label: 'Price', field: 'price', sortable: true, align: 'right' as const },
   { name: 'is_recommended', label: 'Recommended', field: 'is_recommended', sortable: true, align: 'center' as const },
-  //{ name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const },
+  { name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const },
 ];
 
 const fetchCourses = async () => {
@@ -248,7 +248,8 @@ const fetchCourses = async () => {
     console.error('Error fetching courses:', error);
     $q.notify({
       type: 'negative',
-      message: 'ไม่สามารถโหลดข้อมูลคอร์สได้'
+      message: 'ไม่สามารถโหลดข้อมูลคอร์สได้',
+      position: 'top'
     });
   } finally {
     loading.value = false;
@@ -265,7 +266,8 @@ const viewCourse = async (id: number) => {
       console.error('Error fetching course details:', error);
       $q.notify({
          type: 'negative',
-         message: 'ไม่สามารถโหลดข้อมูลรายละเอียดคอร์สได้'
+         message: 'ไม่สามารถโหลดข้อมูลรายละเอียดคอร์สได้',
+         position: 'top'
       });
       showDialog.value = false;
    } finally {
@@ -278,7 +280,8 @@ const handleToggleRecommendation = async (course: RecommendedCourse, isRecommend
     await adminService.toggleCourseRecommendation(course.id, isRecommended);
     $q.notify({
       type: 'positive',
-      message: isRecommended ? 'เพิ่มคอร์สแนะนำสำร็จ' : 'ยกเลิกคอร์สแนะนำสำเร็จ'
+      message: isRecommended ? 'เพิ่มคอร์สแนะนำสำร็จ' : 'ยกเลิกคอร์สแนะนำสำเร็จ',
+      position: 'top'
     });
   } catch (error) {
     console.error('Error toggling recommendation:', error);
@@ -286,7 +289,8 @@ const handleToggleRecommendation = async (course: RecommendedCourse, isRecommend
     course.is_recommended = !isRecommended;
     $q.notify({
       type: 'negative',
-      message: 'เกิดข้อผิดพลาดในการบันทึกข้อมูล'
+      message: 'เกิดข้อผิดพลาดในการบันทึกข้อมูล',
+      position: 'top'
     });
   }
 };