This commit is contained in:
Lizandro Guarnizo
2026-04-29 22:07:37 -05:00
parent 304aea4125
commit 7f8d356a8f
12 changed files with 900 additions and 451 deletions
+35 -26
View File
@@ -1,32 +1,41 @@
<!-- Container Principal -->
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full ">
<h1 class="text-2xl font-bold mb-4">Lista de Usuarios</h1>
<div class="justify-between w-full md:flex">
<p class="mb-4 text-sm">Gestión de usuarios.</p>
<!-- Campo de Búsqueda -->
<div class="mb-4 relative">
<input type="text" x-model="searchQuery" placeholder="Buscar..."
class="border border-gray-300 rounded w-full md:w-60 p-2 text-sm" @input="loadRegister()">
<!-- Contenedor para el botón o el ícono de carga -->
<div x-show="isLoading" class="absolute right-2 top-2 flex items-center">
<!-- SVG de cargando (puedes reemplazarlo con un botón si lo prefieres) -->
<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full">
<!-- Page header -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<div>
<h1 class="text-2xl font-bold">Usuarios</h1>
<p class="text-xs text-slate-500 mt-0.5">Gestión de usuarios del sistema</p>
</div>
<div class="flex items-center gap-3">
<!-- Búsqueda -->
<div class="relative">
<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
</div>
<input type="text" x-model="searchQuery" placeholder="Buscar..."
class="border border-gray-300 rounded w-full md:w-56" @input="loadRegister()">
<div x-show="isLoading" class="absolute right-2.5 top-1/2 -translate-y-1/2">
<svg class="animate-spin h-3.5 w-3.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
</div>
</div>
<!-- Nuevo -->
<button class="flex items-center gap-2 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
style="background-color:#8eb02f"
onmouseover="this.style.backgroundColor='#6d8c24'"
onmouseout="this.style.backgroundColor='#8eb02f'"
x-on:click="addModal=true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
Nuevo usuario
</button>
</div>
<!-- Botón Nuevo Módulo -->
<div class="flex justify-end mb-4">
<button class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm"
x-on:click="addModal=true">Nuevo</button>
</div>
</div>
<!-- Agregar el GIF de carga -->