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/configuracoes.vue

@@ -1,10 +1,33 @@
 <!-- front-end/app/pages/sistema/configuracoes.vue -->
 <script setup lang="ts">
-const empresa = reactive({
-  nome: 'Empresa Fornecedora Ltda',
-  cnpj: '12.345.678/0001-90',
-  plano: 'Professional',
-})
+const { apiFetch } = useApi()
+
+interface ApiTenant {
+  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">
-          <UInput v-model="empresa.cnpj" />
+        <UFormField label="Slug" class="field">
+          <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>