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

frontend_management/pages/admin/courses/pending.vue

@@ -31,33 +31,48 @@
       </div>
     </div>
 
-    <!-- Search -->
+    <!-- Search & View Toggle -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <q-input
-        v-model="searchQuery"
-        placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
-        outlined
-        dense
-        bg-color="grey-1"
-      >
-        <template v-slot:prepend>
-          <q-icon name="search" />
-        </template>
-        <template v-slot:append v-if="searchQuery">
-          <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
-        </template>
-      </q-input>
-    </div>
+      <div class="flex gap-4 items-center">
+        <div class="flex-1">
+          <q-input
+            v-model="searchQuery"
+            placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
+            outlined
+            dense
+            bg-color="grey-1"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" />
+            </template>
+            <template v-slot:append v-if="searchQuery">
+              <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
+            </template>
+          </q-input>
+        </div>
 
-    <div class="flex justify-end mb-6">
-      <q-btn-toggle
+        <q-btn-toggle
           v-model="viewMode"
           toggle-color="primary"
           :options="[
-            { label: 'การ์ด', value: 'card' },
-            { label: 'ตาราง', value: 'table' }
+            { value: 'card', slot: 'card' },
+            { value: 'table', slot: 'table' }
           ]"
-        />
+          dense
+          rounded
+          unelevated
+          class="border"
+        >
+          <template v-slot:card>
+            <q-icon name="view_stream" 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>
 
     <!-- Pending Courses List -->