From e029b4e8eac41bdd4469598f6f30c3607df4c149 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Sat, 18 Apr 2026 13:39:35 -0500
Subject: [PATCH] Update show-usuarios.blade.php

---
 .../views/livewire/show-usuarios.blade.php    | 97 +++++++++++--------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/resources/views/livewire/show-usuarios.blade.php b/resources/views/livewire/show-usuarios.blade.php
index 4a3f9e3..7488f8d 100755
--- a/resources/views/livewire/show-usuarios.blade.php
+++ b/resources/views/livewire/show-usuarios.blade.php
@@ -76,29 +76,45 @@
                     <th class="rounded-l-lg px-6 py-2">Subvendedor</th>
                     @endif
                     <th class="rounded-l-lg font-normal">Nombre</th>
-                    <th class="font-normal">Email</th>
+                    <th class="font-normal hidden md:table-cell">Email</th>
                     <th class="font-normal">Rol</th>
-                    <th class="font-normal">Ventas</th>
+                    <th class="font-normal hidden md:table-cell">Ventas</th>
                     <th class="font-normal">Saldo</th>
-                    <th class="font-normal">Precios personalizados</th>
+                    <th class="font-normal hidden lg:table-cell">Precios personalizados</th>
                     <th class="font-normal"></th>
                     <th class="rounded-r-lg font-normal"></th>
                 </tr>
             </x-slot>
             <x-slot name="tbody">
                 @foreach ($usuarios as $usuario)
-                <tr wire:key="usuario-{{ $usuario->id }}" class="border-gray-200 text-left" x-data="{ openOption: false }">
+                <tr wire:key="usuario-{{ $usuario->id }}" class="border-gray-200 text-left hover:bg-purple-50 transition-colors" x-data="{ openOption: false }">
                     @if (auth()->user()->rol_id == 5)
 
                     <td>{{ $usuario->subvendedor_relacion->name ?? 'N/A' }}</td>
                     @endif
-                    <td>{{ $usuario->name ?? '' }}</td>
-                    <td>{{ $usuario->email ?? '' }}</td>
-                    <td>{{ $usuario->rol->nombre ?? '' }}</td>
-                    <td>{{ $usuario->historiales_venta_count ?? '' }}</td>
-                    <td>{{ number_format($usuario->saldo->valor ?? 0) ?? 0 }}</td>
                     <td>
-                        <p>
+                        <div>
+                            <p class="font-medium text-gray-700">{{ $usuario->name ?? '' }}</p>
+                            <p class="text-xs text-gray-400 md:hidden">{{ $usuario->email ?? '' }}</p>
+                        </div>
+                    </td>
+                    <td class="hidden md:table-cell">{{ $usuario->email ?? '' }}</td>
+                    <td>
+                        @php
+                            $rolNombre = $usuario->rol->nombre ?? '';
+                            $rolColor = match($rolNombre) {
+                                'super'          => 'bg-purple-100 text-purple-700',
+                                'administrador'  => 'bg-blue-100 text-blue-700',
+                                'editor'         => 'bg-yellow-100 text-yellow-700',
+                                default          => 'bg-gray-100 text-gray-600',
+                            };
+                        @endphp
+                        <span class="px-2 py-0.5 rounded-full text-xs font-medium {{ $rolColor }}">{{ $rolNombre }}</span>
+                    </td>
+                    <td class="hidden md:table-cell">{{ $usuario->historiales_venta_count ?? '' }}</td>
+                    <td>{{ number_format($usuario->saldo->valor ?? 0) }}</td>
+                    <td class="hidden lg:table-cell">
+                        <p class="text-xs">
                             <span>Tarifas: <span class="font-bold">{{ $usuario->countActiveTarifas() ?? 0 }}</span></span>,
                             <span>Promos: <span class="font-bold">{{ $usuario->countActivePromos() ?? 0 }}</span> </span>
                         </p>
@@ -114,42 +130,42 @@
                     </td>
 
                     @if (auth()->user()->rol->nombre == 'super')
-                    <td>
-                        <button x-on:click="openOption=!openOption">
+                    <td class="relative">
+                        <button x-on:click="openOption=!openOption" class="p-1 rounded-lg hover:bg-gray-100">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                             </svg>
                         </button>
 
-                        <div x-cloak x-show="openOption" @click.away="openOption = false" class="sm:absolute bg-white text-center w-[8rem] rounded-[1rem] border-b border-gray-200 shadow-lg right-10">
-                            <button x-on:click="openOption=false" wire:click="editar({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Editar</button>
-                            <button x-on:click="openOption=!openOption" wire:click="editarPassword({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Editar password</button>
-                            <button x-on:click="openOption=false" wire:click="saldo({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Agregar saldo</button>
-                            <button x-on:click="openOption=false" wire:click="saldodesc({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Descontar saldo</button>
-                            <button x-on:click="openOption=false,gestion=true" wire:click="gestionar({{ $usuario->id }},'{{ $usuario->rol_id }}','{{ $usuario->name }}')" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Precio servicio</button>
-                            <button x-on:click="openOption=false,gestionPromo=true" wire:click="gestionarPromociones({{ $usuario->id }},'{{ $usuario->name }}')" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Precio promocion</button>
-                            <button x-on:click="openOption=false" wire:click="eliminar({{ $usuario->id }})" class="text-white w-full py-1 bg-red-400 rounded-b-[1rem] hover:bg-red-600 hover:rounded-b-[1rem]">Eliminar</button>
+                        <div x-cloak x-show="openOption" @click.away="openOption = false" class="absolute right-0 top-8 z-20 bg-white text-center w-[10rem] rounded-xl border border-gray-200 shadow-xl">
+                            <button x-on:click="openOption=false" wire:click="editar({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100 hover:rounded-t-xl">Editar</button>
+                            <button x-on:click="openOption=false" wire:click="editarPassword({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Editar contraseña</button>
+                            <button x-on:click="openOption=false" wire:click="saldo({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Agregar saldo</button>
+                            <button x-on:click="openOption=false" wire:click="saldodesc({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Descontar saldo</button>
+                            <button x-on:click="openOption=false,gestion=true" wire:click="gestionar({{ $usuario->id }},'{{ $usuario->rol_id }}','{{ $usuario->name }}')" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Precio servicio</button>
+                            <button x-on:click="openOption=false,gestionPromo=true" wire:click="gestionarPromociones({{ $usuario->id }},'{{ $usuario->name }}')" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Precio promoción</button>
+                            <button x-on:click="openOption=false" wire:click="eliminar({{ $usuario->id }})" class="text-white w-full py-1.5 text-sm bg-red-400 rounded-b-xl hover:bg-red-600">Eliminar</button>
                         </div>
                     </td>
                     @elseif (Auth::user()->subvendedor && $config->subvendedor)
-                    <td>
-                        <button x-on:click="openOption=!openOption">
+                    <td class="relative">
+                        <button x-on:click="openOption=!openOption" class="p-1 rounded-lg hover:bg-gray-100">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                             </svg>
                         </button>
 
-                        <div x-cloak x-show="openOption" @click.away="openOption = false" class="sm:absolute bg-white text-center w-[8rem] rounded-[1rem] border-b border-gray-200 shadow-lg right-10">
-                            <button x-on:click="openOption=false" wire:click="editar({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300 hover:rounded-t-[1rem]">Editar</button>
-                            <button x-on:click="openOption=!openOption" wire:click="editarPassword({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Editar password</button>
+                        <div x-cloak x-show="openOption" @click.away="openOption = false" class="absolute right-0 top-8 z-20 bg-white text-center w-[10rem] rounded-xl border border-gray-200 shadow-xl">
+                            <button x-on:click="openOption=false" wire:click="editar({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100 hover:rounded-t-xl">Editar</button>
+                            <button x-on:click="openOption=false" wire:click="editarPassword({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Editar contraseña</button>
                             @if ($usuario->subvendedor)
-                            <button x-on:click="openOption=!openOption" wire:click="quitarSubvendedor({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Quitar subvendedor</button>
+                            <button x-on:click="openOption=false" wire:click="quitarSubvendedor({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Quitar subvendedor</button>
                             @else
-                            <button x-on:click="openOption=!openOption" wire:click="ponerSubvendedor({{ $usuario->id }})" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Habilitar subvendedor</button>
+                            <button x-on:click="openOption=false" wire:click="ponerSubvendedor({{ $usuario->id }})" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Habilitar subvendedor</button>
                             @endif
-                            <button x-on:click="openOption=false,gestion=true" wire:click="gestionar({{ $usuario->id }},'{{ $usuario->rol_id }}','{{ $usuario->name }}')" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Precio servicio</button>
-                            <button x-on:click="openOption=false,gestionPromo=true" wire:click="gestionarPromociones({{ $usuario->id }},'{{ $usuario->name }}')" class="text-gray-500 w-full py-1 hover:bg-gray-200 border-b border-gray-300">Precio promocion</button>
-                            <button x-on:click="openOption=false" wire:click="eliminar({{ $usuario->id }})" class="text-white w-full py-1 bg-red-400 rounded-b-[1rem] hover:bg-red-600 hover:rounded-b-[1rem]">Eliminar</button>
+                            <button x-on:click="openOption=false,gestion=true" wire:click="gestionar({{ $usuario->id }},'{{ $usuario->rol_id }}','{{ $usuario->name }}')" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Precio servicio</button>
+                            <button x-on:click="openOption=false,gestionPromo=true" wire:click="gestionarPromociones({{ $usuario->id }},'{{ $usuario->name }}')" class="text-gray-600 w-full py-1.5 text-sm hover:bg-gray-50 border-b border-gray-100">Precio promoción</button>
+                            <button x-on:click="openOption=false" wire:click="eliminar({{ $usuario->id }})" class="text-white w-full py-1.5 text-sm bg-red-400 rounded-b-xl hover:bg-red-600">Eliminar</button>
                         </div>
                     </td>
                     @else
@@ -167,9 +183,9 @@
             x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-100"
-            class="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
-            <div class="grid h-full place-items-center ">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
+            class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
+            <div class="grid h-full place-items-center p-4">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md w-full max-w-2xl overflow-y-auto max-h-[90vh]">
                     <p class="text-gray-500 mb-2"> Personalización de precios para {{ $usuario_nombre }} </p>
 
                     <div class="flex mb-4">
@@ -233,14 +249,14 @@
                     </div>
 
                     <table
-                        class="w-full sm-w-[20rem]  text-center mt-4 border-separate border-spacing-y-2 bg-white shadow-md rounded-lg mb-2">
+                        class="w-full sm-w-[20rem] text-center mt-4 border-separate border-spacing-y-2 bg-white shadow-md rounded-lg mb-2">
                         <thead class="font-normal text-gray-500 h-9">
                             <tr class="text-left">
                                 <th class="rounded-l-lg font-normal pl-[2rem]">Servicio</th>
-                                <th class="font-normal pl-[2rem]">Plan</th>
+                                <th class="font-normal pl-[2rem] hidden sm:table-cell">Plan</th>
                                 <th class="font-normal pl-[2rem]">Oculto</th>
                                 <th class="font-normal pl-[2rem]">Tarifa</th>
-                                <th class="font-normal pl-[2rem]">Utilidad</th>
+                                <th class="font-normal pl-[2rem] hidden sm:table-cell">Utilidad</th>
                                 <th class="font-normal rounded-r-l pr-[2rem]"></th>
                             </tr>
                         </thead>
@@ -251,7 +267,7 @@
                                 <td class="pl-[2rem]">{{ $usuarioTarifa->tarifa->servicio->nombre ?? '' }}
                                 </td>
 
-                                <td class="pl-[2rem]">
+                                <td class="pl-[2rem] hidden sm:table-cell">
                                     @if ($usuarioTarifa->tarifa)
                                     @if ($usuarioTarifa->tarifa->servicio && $usuarioTarifa->tarifa->servicio->por_tiempo)
                                     {{ $usuarioTarifa->tarifa->dias ?? '' }}
@@ -265,7 +281,6 @@
                                     @else
                                     {{ 'Tarifa no disponible' }}
                                     @endif
-
                                 </td>
 
                                 @if ($usuarioTarifa->visible !== 'true')
@@ -277,7 +292,7 @@
                                 @endif
 
                                 <td class="pl-[2rem]">${{ $usuarioTarifa->precio ?? '' }}</td>
-                                <td class="pl-[2rem]">${{ $usuarioTarifa->utilidad ?? '' }}</td>
+                                <td class="pl-[2rem] hidden sm:table-cell">${{ $usuarioTarifa->utilidad ?? '' }}</td>
 
                                 <td class="pl-[1rem] pr-[1rem]">
                                     <svg wire:click="eliminarUsuarioTarifa({{ $usuarioTarifa->id }})"
@@ -322,8 +337,8 @@
             x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-100"
             class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
-            <div class="grid h-full place-items-center ">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
+            <div class="grid h-full place-items-center p-4">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md w-full max-w-2xl overflow-y-auto max-h-[90vh]">
                     <p class="text-gray-500 mb-2"> Personalización de precios para {{ $usuario_nombre }} </p>
 
                     <div class="flex mb-4">