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/composables/useApi.ts

@@ -0,0 +1,17 @@
+// Wrapper sobre $fetch que injeta o Authorization header automaticamente.
+export function useApi() {
+  const { public: { apiBase } } = useRuntimeConfig()
+  const token = useCookie<string | null>('auth_token')
+
+  function apiFetch<T>(path: string, options: Parameters<typeof $fetch>[1] = {}): Promise<T> {
+    return $fetch<T>(`${apiBase}${path}`, {
+      ...options,
+      headers: {
+        ...(options.headers as Record<string, string> || {}),
+        ...(token.value ? { Authorization: `Bearer ${token.value}` } : {}),
+      },
+    })
+  }
+
+  return { apiFetch }
+}

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

@@ -1,10 +1,33 @@
 <!-- front-end/app/pages/sistema/configuracoes.vue -->
 <script setup lang="ts">
-const empresa = reactive({
+const { apiFetch } = useApi()
-  nome: 'Empresa Fornecedora Ltda',
+
-  cnpj: '12.345.678/0001-90',
+interface ApiTenant {
-  plano: 'Professional',
+  ID: string
-})
+  Slug: string
+  Name: string
+  Plan: string
+  MaxUsers: number
+  IsActive: boolean
+}
+
+const { data: tenant, refresh } = await useAsyncData('tenant-me', () =>
+  apiFetch<ApiTenant>('/tenant/me')
+)
+
+const nome = ref(tenant.value?.Name ?? '')
+const saving = ref(false)
+const saved = ref(false)
+
+async function salvar() {
+  saving.value = true
+  saved.value = false
+  await apiFetch('/tenant/me', { method: 'PUT', body: { name: nome.value } })
+  await refresh()
+  saving.value = false
+  saved.value = true
+  setTimeout(() => { saved.value = false }, 3000)
+}
 </script>
 
 <template>
@@ -14,15 +37,18 @@ const empresa = reactive({
       <div class="card pad">
         <h2 class="section-title">Dados da Empresa</h2>
         <UFormField label="Nome da Empresa" class="field">
-          <UInput v-model="empresa.nome" />
+          <UInput v-model="nome" />
         </UFormField>
-        <UFormField label="CNPJ" class="field">
+        <UFormField label="Slug" class="field">
-          <UInput v-model="empresa.cnpj" />
+          <UInput :model-value="tenant?.Slug ?? ''" disabled />
         </UFormField>
         <UFormField label="Plano Atual" class="field">
-          <UInput v-model="empresa.plano" disabled />
+          <UInput :model-value="tenant?.Plan ?? ''" disabled />
         </UFormField>
-        <UButton class="btn-primary" size="sm">Salvar Alterações</UButton>
+        <div class="actions">
+          <UButton class="btn-primary" size="sm" :loading="saving" @click="salvar">Salvar Alterações</UButton>
+          <span v-if="saved" class="saved-msg">Salvo!</span>
+        </div>
       </div>
     </div>
   </div>
@@ -35,5 +61,7 @@ const empresa = reactive({
 .pad { padding: 24px; }
 .section-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
 .field { margin-bottom: 16px; }
+.actions { display: flex; align-items: center; gap: 12px; }
 .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
+.saved-msg { font-size: 13px; color: #10b981; font-weight: 500; }
 </style>

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> = {
+interface ApiUser {
-  comercial: 'Comercial',
+  ID: string
-  juridico: 'Jurídico',
+  Email: string
-  tecnico: 'Técnico',
+  Name: string
-  diretoria: 'Diretoria',
+  Role: string
-  administrador: 'Administrador',
+  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: 'Name', accessorKey: 'Name', header: 'Nome' },
-  { id: 'email', accessorKey: 'email', header: 'E-mail' },
+  { id: 'Email', accessorKey: 'Email', header: 'E-mail' },
-  { id: 'perfil', accessorKey: 'perfil', header: 'Perfil' },
+  { id: 'Role', accessorKey: 'Role', header: 'Perfil' },
-  { id: 'status', accessorKey: 'status', header: 'Status' },
+  { 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">
+        <UTable :data="usuarios ?? []" :columns="columns" :loading="pending">
-          <template #perfil-cell="{ row }">{{ perfilLabel[row.original.perfil] }}</template>
+          <template #Role-cell="{ row }">{{ roleLabel[row.original.Role] ?? row.original.Role }}</template>
-          <template #status-cell="{ row }">
+          <template #IsActive-cell="{ row }">
             <UBadge
-              :label="row.original.status === 'ativo' ? 'Ativo' : 'Inativo'"
+              :label="row.original.IsActive ? 'Ativo' : 'Inativo'"
-              :color="row.original.status === 'ativo' ? 'success' : 'neutral'"
+              :color="row.original.IsActive ? 'success' : 'neutral'"
               variant="soft"
               size="xs"
             />