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

---
 .../views/livewire/show-usuarios.blade.php    | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/resources/views/livewire/show-usuarios.blade.php b/resources/views/livewire/show-usuarios.blade.php
index 0eb2c50..54232a6 100755
--- a/resources/views/livewire/show-usuarios.blade.php
+++ b/resources/views/livewire/show-usuarios.blade.php
@@ -9,11 +9,12 @@
     modalSaldoDesc: @entangle('modalSaldoDesc'),
     editarTarifaRol: @entangle('editarTarifaRol'),
     init() {
+        Alpine.store('openDropdown', null);
         ['editar','gestion','gestionPromo','modalSaldo','modalPassword','modTarifas','modalSaldoDesc','editarTarifaRol'].forEach(prop => {
-            this.$watch(prop, val => { if (!val) window.dispatchEvent(new CustomEvent('close-dropdowns')); });
+            this.$watch(prop, val => { if (!val) Alpine.store('openDropdown', null); });
         });
         Livewire.hook('message.processed', () => {
-            window.dispatchEvent(new CustomEvent('close-dropdowns'));
+            Alpine.store('openDropdown', null);
         });
     }
 }" class="h-full w-full md:my-2">
@@ -84,7 +85,7 @@
             </x-slot>
             <x-slot name="tbody">
                 @foreach ($usuarios as $usuario)
-                <tr wire:key="usuario-{{ $usuario->id }}" class="border-gray-200 text-left hover:bg-purple-50 transition-colors" x-data="{ openOption: false, openDetails: false, menuX: 0, menuY: 0, toggleMenu(btn){ const r = btn.getBoundingClientRect(); menuX = r.right - 160; menuY = r.bottom + 4; openOption = !openOption; } }" @close-dropdowns.window="openOption = false">
+                <tr wire:key="usuario-{{ $usuario->id }}" class="border-gray-200 text-left hover:bg-purple-50 transition-colors" x-data="{ openDetails: false, menuX: 0, menuY: 0, toggleMenu(btn){ const r = btn.getBoundingClientRect(); menuX = r.right - 160; menuY = r.bottom + 4; $store.openDropdown = ($store.openDropdown === {{ $usuario->id }}) ? null : {{ $usuario->id }}; } }">
                     @if (auth()->user()->rol_id == 5)
 
                     <td>{{ $usuario->subvendedor_relacion->name ?? 'N/A' }}</td>
@@ -157,14 +158,14 @@
                             </svg>
                         </button>
 
-                        <div x-cloak x-show="openOption" @click.away="openOption = false" :style="`position:fixed;top:${menuY}px;left:${menuX}px;`" class="z-50 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 x-cloak x-show="$store.openDropdown === {{ $usuario->id }}" @click.away="$store.openDropdown = null" :style="`position:fixed;top:${menuY}px;left:${menuX}px;`" class="z-50 bg-white text-center w-[10rem] rounded-xl border border-gray-200 shadow-xl">
+                            <button x-on:click="$store.openDropdown = null" 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="$store.openDropdown = null" 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="$store.openDropdown = null" 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="$store.openDropdown = null" 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="$store.openDropdown = null; 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="$store.openDropdown = null; 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="$store.openDropdown = null" 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)
@@ -175,17 +176,17 @@
                             </svg>
                         </button>
 
-                        <div x-cloak x-show="openOption" @click.away="openOption = false" :style="`position:fixed;top:${menuY}px;left:${menuX}px;`" class="z-50 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>
+                        <div x-cloak x-show="$store.openDropdown === {{ $usuario->id }}" @click.away="$store.openDropdown = null" :style="`position:fixed;top:${menuY}px;left:${menuX}px;`" class="z-50 bg-white text-center w-[10rem] rounded-xl border border-gray-200 shadow-xl">
+                            <button x-on:click="$store.openDropdown = null" 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="$store.openDropdown = null" 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=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>
+                            <button x-on:click="$store.openDropdown = null" 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=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>
+                            <button x-on:click="$store.openDropdown = null" 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-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>
+                            <button x-on:click="$store.openDropdown = null; 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="$store.openDropdown = null; 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="$store.openDropdown = null" 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