feat: Implement admin user and pending course management, instructor course listing, and a dedicated admin service.

frontend_management/pages/instructor/courses/index.vue

@@ -39,8 +39,8 @@
 
     <!-- Filter Bar -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="md:col-span-2">
+      <div class="flex gap-4 items-center">
+        <div class="flex-1">
           <q-input
             v-model="searchQuery"
             placeholder="ค้นหาหลักสูตร..."
@@ -62,15 +62,39 @@
           dense
           emit-value
           map-options
+          style="min-width: 160px"
         />
+
+        <q-btn-toggle
+          v-model="viewMode"
+          toggle-color="primary"
+          :options="[
+            { value: 'card', slot: 'card' },
+            { value: 'table', slot: 'table' }
+          ]"
+          dense
+          rounded
+          unelevated
+          class="border"
+        >
+          <template v-slot:card>
+            <q-icon name="grid_view" size="20px" />
+            <q-tooltip>มุมมองการ์ด</q-tooltip>
+          </template>
+          <template v-slot:table>
+            <q-icon name="view_list" size="20px" />
+            <q-tooltip>มุมมองตาราง</q-tooltip>
+          </template>
+        </q-btn-toggle>
       </div>
     </div>
 
-    <!-- Courses Grid -->
+    <!-- Loading -->
     <div v-if="loading" class="flex justify-center py-10">
       <q-spinner-dots size="50px" color="primary" />
     </div>
 
+    <!-- Empty State -->
     <div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
       <q-icon name="school" size="60px" color="grey-5" class="mb-4" />
       <p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
@@ -82,7 +106,8 @@
       />
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <!-- Card View -->
+    <div v-else-if="viewMode === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       <div
         v-for="course in filteredCourses"
         :key="course.id"
@@ -134,15 +159,6 @@
           >
             <q-tooltip>ดูรายละเอียด</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            icon="edit"
-            color="primary"
-            @click="navigateTo(`/instructor/courses/${course.id}/edit`)"
-          >
-            <q-tooltip>แก้ไข</q-tooltip>
-          </q-btn> -->
           <q-space />
           <q-btn flat round dense icon="more_vert">
             <q-menu>
@@ -167,6 +183,94 @@
       </div>
     </div>
 
+    <!-- Table View -->
+    <div v-else class="bg-white rounded-xl shadow-sm overflow-hidden">
+      <q-table
+        :rows="filteredCourses"
+        :columns="tableColumns"
+        row-key="id"
+        flat
+        :pagination="tablePagination"
+        :rows-per-page-options="[10, 20, 50, 0]"
+        @update:pagination="tablePagination = $event"
+      >
+        <!-- Thumbnail + Title -->
+        <template v-slot:body-cell-title="props">
+          <q-td :props="props">
+            <div class="flex items-center gap-3">
+              <div class="w-16 h-10 rounded overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
+                <img
+                  v-if="props.row.thumbnail_url"
+                  :src="props.row.thumbnail_url"
+                  :alt="props.row.title.th"
+                  class="w-full h-full object-cover"
+                  @error="($event.target as HTMLImageElement).style.display = 'none'"
+                />
+                <q-icon v-else name="school" size="20px" color="white" />
+              </div>
+              <div class="min-w-0">
+                <div class="font-medium text-gray-900 truncate">{{ props.row.title.th }}</div>
+                <div class="text-xs text-gray-400 truncate">{{ props.row.title.en }}</div>
+              </div>
+            </div>
+          </q-td>
+        </template>
+
+        <!-- Status Badge -->
+        <template v-slot:body-cell-status="props">
+          <q-td :props="props">
+            <q-badge :color="getStatusColor(props.row.status)">
+              {{ getStatusLabel(props.row.status) }}
+            </q-badge>
+          </q-td>
+        </template>
+
+        <!-- Price -->
+        <template v-slot:body-cell-price="props">
+          <q-td :props="props">
+            <span class="font-medium" :class="props.row.is_free ? 'text-green-600' : 'text-primary-600'">
+              {{ props.row.is_free ? 'ฟรี' : `฿${parseFloat(props.row.price).toLocaleString()}` }}
+            </span>
+          </q-td>
+        </template>
+
+        <!-- Date -->
+        <template v-slot:body-cell-created_at="props">
+          <q-td :props="props">
+            {{ formatDate(props.row.created_at) }}
+          </q-td>
+        </template>
+
+        <!-- Actions -->
+        <template v-slot:body-cell-actions="props">
+          <q-td :props="props">
+            <q-btn flat round dense icon="visibility" color="grey" size="sm" @click="handleViewDetails(props.row)">
+              <q-tooltip>ดูรายละเอียด</q-tooltip>
+            </q-btn>
+            <q-btn flat round dense icon="more_vert" size="sm">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup @click="duplicateCourse(props.row)">
+                    <q-item-section avatar>
+                      <q-icon name="content_copy" />
+                    </q-item-section>
+                    <q-item-section>ทำสำเนา</q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item clickable v-close-popup @click="confirmDelete(props.row)">
+                    <q-item-section avatar>
+                      <q-icon name="delete" color="negative" />
+                    </q-item-section>
+                    <q-item-section class="text-negative">ลบ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+
     <!-- Rejection Details Dialog -->
     <q-dialog v-model="rejectionDialog">
       <q-card style="min-width: 400px">
@@ -256,6 +360,17 @@ const courses = ref<CourseResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterStatus = ref<string | null>(null);
+const viewMode = ref<'card' | 'table'>('card');
+
+// Table config
+const tablePagination = ref({ page: 1, rowsPerPage: 10 });
+const tableColumns = [
+  { name: 'title', label: 'หลักสูตร', field: 'title', align: 'left' as const, sortable: true },
+  { name: 'status', label: 'สถานะ', field: 'status', align: 'center' as const, sortable: true },
+  { name: 'price', label: 'ราคา', field: 'price', align: 'center' as const, sortable: true },
+  { name: 'created_at', label: 'วันที่สร้าง', field: 'created_at', align: 'center' as const, sortable: true },
+  { name: 'actions', label: 'จัดการ', field: 'actions', align: 'center' as const }
+];
 
 // Status options
 const statusOptions = [