67 lines
2.5 KiB
Vue
67 lines
2.5 KiB
Vue
<script setup>
|
|
defineProps({
|
|
isSidebarOpen: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const users = [
|
|
{ name: 'Andrea Flores', role: 'Administradora', status: 'Activo' },
|
|
{ name: 'Carlos Mendez', role: 'Supervisor', status: 'Activo' },
|
|
{ name: 'Lucia Perez', role: 'Auditoria', status: 'Pendiente' },
|
|
{ name: 'Jorge Ruiz', role: 'Operador', status: 'Inactivo' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<main
|
|
:class="[
|
|
'min-h-screen bg-slate-50 p-6 pt-24 transition-[margin] duration-300',
|
|
isSidebarOpen ? 'md:ml-64' : 'md:ml-0',
|
|
]"
|
|
>
|
|
<section class="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
|
<header class="flex items-center justify-between border-b border-slate-200 px-5 py-4">
|
|
<div>
|
|
<h2 class="text-2xl font-semibold tracking-tight text-slate-900">Usuarios</h2>
|
|
<p class="mt-1 text-sm text-slate-500">Gestion de cuentas y permisos del panel.</p>
|
|
</div>
|
|
<button type="button" class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white transition hover:bg-indigo-700">Nuevo usuario</button>
|
|
</header>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="table-auto w-full min-w-[640px] text-left text-sm">
|
|
<thead>
|
|
<tr class="border-b border-slate-200 bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
|
<th class="px-5 py-3 font-semibold">Nombre</th>
|
|
<th class="px-5 py-3 font-semibold">Rol</th>
|
|
<th class="px-5 py-3 font-semibold">Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="user in users" :key="user.name" class="border-b border-slate-100 hover:bg-slate-50">
|
|
<td class="px-5 py-3 font-medium text-slate-800">{{ user.name }}</td>
|
|
<td class="px-5 py-3 text-slate-600">{{ user.role }}</td>
|
|
<td class="px-5 py-3">
|
|
<span
|
|
:class="[
|
|
'inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold',
|
|
user.status === 'Activo'
|
|
? 'bg-emerald-50 text-emerald-700'
|
|
: user.status === 'Pendiente'
|
|
? 'bg-amber-50 text-amber-700'
|
|
: 'bg-slate-100 text-slate-600',
|
|
]"
|
|
>
|
|
{{ user.status }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</template>
|