feat: integra /sistema/usuarios e /sistema/configuracoes com API real

- useApi.ts: composable centralizado com Authorization header automático
- usuarios.vue: GET /api/v1/users — lista usuários reais do tenant
- configuracoes.vue: GET/PUT /api/v1/tenant/me — carrega e salva dados reais

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

front-end/app/pages/sistema/usuarios.vue

@@ -1,20 +1,29 @@
 <!-- front-end/app/pages/sistema/usuarios.vue -->
 <script setup lang="ts">
-import { usuarios } from '~/data/mock/usuarios'
+const { apiFetch } = useApi()
 
-const perfilLabel: Record<string, string> = {
-  comercial: 'Comercial',
-  juridico: 'Jurídico',
-  tecnico: 'Técnico',
-  diretoria: 'Diretoria',
-  administrador: 'Administrador',
+interface ApiUser {
+  ID: string
+  Email: string
+  Name: string
+  Role: string
+  IsActive: boolean
+}
+
+const { data: usuarios, pending } = await useAsyncData('usuarios', () =>
+  apiFetch<ApiUser[]>('/users')
+)
+
+const roleLabel: Record<string, string> = {
+  admin: 'Administrador',
+  member: 'Membro',
 }
 
 const columns = [
-  { id: 'nome', accessorKey: 'nome', header: 'Nome' },
-  { id: 'email', accessorKey: 'email', header: 'E-mail' },
-  { id: 'perfil', accessorKey: 'perfil', header: 'Perfil' },
-  { id: 'status', accessorKey: 'status', header: 'Status' },
+  { id: 'Name', accessorKey: 'Name', header: 'Nome' },
+  { id: 'Email', accessorKey: 'Email', header: 'E-mail' },
+  { id: 'Role', accessorKey: 'Role', header: 'Perfil' },
+  { id: 'IsActive', accessorKey: 'IsActive', header: 'Status' },
 ]
 </script>
 
@@ -27,12 +36,12 @@ const columns = [
     </AppTopbar>
     <div class="content">
       <div class="card">
-        <UTable :data="usuarios" :columns="columns">
-          <template #perfil-cell="{ row }">{{ perfilLabel[row.original.perfil] }}</template>
-          <template #status-cell="{ row }">
+        <UTable :data="usuarios ?? []" :columns="columns" :loading="pending">
+          <template #Role-cell="{ row }">{{ roleLabel[row.original.Role] ?? row.original.Role }}</template>
+          <template #IsActive-cell="{ row }">
             <UBadge
-              :label="row.original.status === 'ativo' ? 'Ativo' : 'Inativo'"
-              :color="row.original.status === 'ativo' ? 'success' : 'neutral'"
+              :label="row.original.IsActive ? 'Ativo' : 'Inativo'"
+              :color="row.original.IsActive ? 'success' : 'neutral'"
               variant="soft"
               size="xs"
             />