2e5eee15ad
- 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>
61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
<!-- front-end/app/pages/sistema/usuarios.vue -->
|
|
<script setup lang="ts">
|
|
const { apiFetch } = useApi()
|
|
|
|
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: '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>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<AppTopbar title="Usuários" breadcrumb="Sistema · Usuários">
|
|
<template #actions>
|
|
<UButton size="sm" class="btn-primary">+ Novo Usuário</UButton>
|
|
</template>
|
|
</AppTopbar>
|
|
<div class="content">
|
|
<div class="card">
|
|
<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.IsActive ? 'Ativo' : 'Inativo'"
|
|
:color="row.original.IsActive ? 'success' : 'neutral'"
|
|
variant="soft"
|
|
size="xs"
|
|
/>
|
|
</template>
|
|
</UTable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page { display: flex; flex-direction: column; height: 100vh; }
|
|
.content { padding: 20px 22px; flex: 1; overflow-y: auto; }
|
|
.card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; overflow: hidden; }
|
|
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
|
|
</style>
|