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

frontend_management/pages/admin/users/index.vue

@@ -216,7 +216,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { adminService, type AdminUserResponse } from '~/services/admin.service';
+import { adminService, type AdminUserResponse, type RoleResponse } from '~/services/admin.service';
 import { useAuthStore } from '~/stores/auth';
 
 definePageMeta({
@@ -228,6 +228,7 @@ const $q = useQuasar();
 
 // Data
 const users = ref<AdminUserResponse[]>([]);
+const roles = ref<RoleResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterRole = ref<string | null>(null);
@@ -286,6 +287,14 @@ const filteredUsers = computed(() => {
 });
 
 // Methods
+const fetchRoles = async () => {
+  try {
+    roles.value = await adminService.getRoles();
+  } catch (error) {
+    console.error('Failed to fetch roles:', error);
+  }
+};
+
 const fetchUsers = async () => {
   loading.value = true;
   try {
@@ -328,24 +337,32 @@ const viewUser = (user: AdminUserResponse) => {
   showViewModal.value = true;
 };
 
-const changeRole = (user: AdminUserResponse) => {
-  const roleIds: Record<string, number> = {
-    INSTRUCTOR: 1,
-    STUDENT: 2,
-    ADMIN: 3
+const getRoleLabel = (code: string): string => {
+  const labels: Record<string, string> = {
+    INSTRUCTOR: 'Instructor',
+    STUDENT: 'Student',
+    ADMIN: 'Admin'
   };
+  return labels[code] || code;
+};
+
+const changeRole = (user: AdminUserResponse) => {
+  // Find current role ID from fetched roles
+  const currentRole = roles.value.find(r => r.code === user.role.code);
   
+  // Build items from API roles
+  const roleItems = roles.value.map(r => ({
+    label: getRoleLabel(r.code),
+    value: r.id
+  }));
+
   $q.dialog({
     title: 'เปลี่ยน Role',
     message: `เลือก Role ใหม่สำหรับ ${user.profile.first_name}`,
     options: {
       type: 'radio',
-      model: roleIds[user.role.code] as any,
-      items: [
-        { label: 'Instructor', value: 1 },
-        { label: 'Student', value: 2 },
-        { label: 'Admin', value: 3 }
-      ]
+      model: (currentRole?.id ?? 0) as any,
+      items: roleItems
     },
     cancel: true,
     persistent: true
@@ -415,6 +432,7 @@ const exportExcel = () => {
 
 // Lifecycle
 onMounted(() => {
+  fetchRoles();
   fetchUsers();
 });
 </script>