fix: design

src/features/admin/users/components/UsersTable.vue

@@ -72,11 +72,7 @@ import SvgIcon from '@/components/icons/SvgIcon.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import { CHANGEABLE_ROLES, ROLE_LABELS } from '@/enums'
 import DropdownMenu from '@/components/DropdownMenu.vue'
-import {
-  adminUsersKeys,
-  useAdminRolesListQuery,
-  useUpdateAdminUserRoleMutation,
-} from '@/services/query/admin-users'
+import { adminUsersKeys, useUpdateAdminUserRoleMutation } from '@/services/query/admin-users'
 
 defineProps({
   users: { type: Array, required: true },
@@ -124,15 +120,6 @@ const onMoreClick = (event, user) => {
 const roleMenuOpen = ref(false)
 const roleMenuTrigger = ref(null)
 
-const { data: rolesList = ref([]) } = useAdminRolesListQuery()
-const roleIdByName = computed(() => {
-  const map = {}
-  ;(rolesList.value ?? []).forEach((r) => {
-    if (r?.name) map[r.name] = r.id
-  })
-  return map
-})
-
 const updateRoleMutation = useUpdateAdminUserRoleMutation()
 
 const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: adminUsersKeys.all })
@@ -150,10 +137,11 @@ const onRoleClick = (event, user) => {
 
 const onChangeRole = (targetRoleName) => {
   const user = activeUser.value
-  if (!user) return
-  const roleId = roleIdByName.value[targetRoleName]
-  const payload = roleId ? { roleId } : { role: targetRoleName }
-  updateRoleMutation.mutate({ id: user.id, payload }, { onSuccess: invalidateUsers })
+  if (!user || !targetRoleName) return
+  updateRoleMutation.mutate(
+    { id: user.id, payload: { roles: [targetRoleName] } },
+    { onSuccess: invalidateUsers }
+  )
 }
 
 const roleMenuItems = computed(() => {