Primer commit

src/views/UsersView.vue

@@ -0,0 +1,66 @@
+<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>