From 62e49b39ad6f866cbe5ab7fa1ff3764dabfbfc1b Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Wed, 20 May 2026 09:09:33 -0500
Subject: [PATCH] =?UTF-8?q?feat(vcard):=20agregar=20funcionalidad=20de=20e?=
 =?UTF-8?q?dici=C3=B3n=20de=20usuario=20y=20VCard,=20incluyendo=20filtros?=
 =?UTF-8?q?=20y=20modales?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/vcard_api.html | 575 ++++++++++++++++++++++++++++++++-
 1 file changed, 562 insertions(+), 13 deletions(-)

diff --git a/resources/views/vcard_api.html b/resources/views/vcard_api.html
index 62cc243..44f7d9e 100644
--- a/resources/views/vcard_api.html
+++ b/resources/views/vcard_api.html
@@ -1,5 +1,5 @@
 <!-- Vista: VCard API — Integración Admin Laravel -->
-<div x-data="vcardApiApp()" x-init="init()" class="bg-white rounded-lg shadow">
+<div x-data="vcardApiApp()" x-init="init()" class="bg-white rounded-lg shadow" @keydown.escape.window="closeModals()">
 
     <!-- Overlay de carga -->
     <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
@@ -93,16 +93,160 @@
                                         class="text-xs px-2 py-0.5 rounded-full" x-text="u.estado ? 'Activo' : 'Inactivo'"></span>
                                 </td>
                                 <td class="py-2 px-3 text-right">
-                                    <div class="flex justify-end gap-2">
+                                    <div class="flex justify-end gap-2 flex-wrap">
+                                        <button @click="openEditUsuarioModal(u)" title="Editar"
+                                            class="text-gray-600 hover:text-gray-800 text-xs px-2 py-1 border border-gray-300 rounded">Editar</button>
                                         <button x-show="!u.estado" @click="toggleUsuario(u, 'activar')" title="Activar"
                                             class="text-green-500 hover:text-green-700 text-xs px-2 py-1 border border-green-300 rounded">Activar</button>
                                         <button x-show="u.estado" @click="toggleUsuario(u, 'desactivar')" title="Desactivar"
                                             class="text-red-400 hover:text-red-600 text-xs px-2 py-1 border border-red-200 rounded">Desactivar</button>
                                         <button @click="openMembresiaModal(u)" title="Membresía"
                                             class="text-blue-500 hover:text-blue-700 text-xs px-2 py-1 border border-blue-200 rounded">Membresía</button>
+                                        <button @click="openDrillDown(u)" title="Ver detalle"
+                                            class="text-purple-500 hover:text-purple-700 text-xs px-2 py-1 border border-purple-200 rounded">⊕ Ver</button>
                                     </div>
                                 </td>
                             </tr>
+                            <!-- Fila drill-down expandible -->
+                            <tr x-show="drillDownUserId === (u.id || u._id)" class="bg-purple-50">
+                                <td colspan="5" class="px-4 py-3">
+                                    <div class="flex gap-2 mb-3 flex-wrap">
+                                        <button @click="loadDrillDown('vcards')"
+                                            :class="drillDownSection === 'vcards' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'"
+                                            class="text-xs px-3 py-1 rounded-full">VCards</button>
+                                        <button @click="loadDrillDown('pagos')"
+                                            :class="drillDownSection === 'pagos' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'"
+                                            class="text-xs px-3 py-1 rounded-full">Pagos</button>
+                                        <button @click="loadDrillDown('transacciones')"
+                                            :class="drillDownSection === 'transacciones' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'"
+                                            class="text-xs px-3 py-1 rounded-full">Transacciones</button>
+                                        <button @click="loadDrillDown('logs')"
+                                            :class="drillDownSection === 'logs' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'"
+                                            class="text-xs px-3 py-1 rounded-full">Logs</button>
+                                        <button @click="loadDrillDown('miniwebs')"
+                                            :class="drillDownSection === 'miniwebs' ? 'bg-purple-600 text-white' : 'bg-white text-purple-600 border border-purple-300'"
+                                            class="text-xs px-3 py-1 rounded-full">MiniWebs</button>
+                                        <button @click="closeDrillDown()" class="ml-auto text-xs text-gray-400 hover:text-gray-600">✕ Cerrar</button>
+                                    </div>
+                                    <div x-show="drillDownLoading" class="text-xs text-gray-400">Cargando...</div>
+                                    <div x-show="drillDownError" class="text-xs text-red-500" x-text="drillDownError"></div>
+                                    <div x-show="!drillDownLoading && drillDownItems.length === 0 && !drillDownError" class="text-xs text-gray-400">Sin registros.</div>
+                                    <!-- VCards del usuario -->
+                                    <template x-if="drillDownSection === 'vcards' && drillDownItems.length > 0">
+                                        <div class="overflow-x-auto">
+                                            <table class="table-auto w-full text-xs">
+                                                <thead class="text-gray-500 uppercase border-b"><tr>
+                                                    <th class="py-1 px-2">Nombre</th><th class="py-1 px-2">Empresa</th>
+                                                    <th class="py-1 px-2">Email</th><th class="py-1 px-2">Estado</th>
+                                                </tr></thead>
+                                                <tbody>
+                                                    <template x-for="r in drillDownItems" :key="r.id || r._id">
+                                                        <tr class="border-b border-purple-100">
+                                                            <td class="py-1 px-2 font-medium" x-text="r.nombre || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-500" x-text="r.empresa || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-500" x-text="r.email || '—'"></td>
+                                                            <td class="py-1 px-2">
+                                                                <span :class="r.estado ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+                                                                    class="px-2 py-0.5 rounded-full" x-text="r.estado ? 'Activa' : 'Inactiva'"></span>
+                                                            </td>
+                                                        </tr>
+                                                    </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </template>
+                                    <!-- Pagos del usuario -->
+                                    <template x-if="drillDownSection === 'pagos' && drillDownItems.length > 0">
+                                        <div class="overflow-x-auto">
+                                            <table class="table-auto w-full text-xs">
+                                                <thead class="text-gray-500 uppercase border-b"><tr>
+                                                    <th class="py-1 px-2">Referencia</th><th class="py-1 px-2">Monto</th>
+                                                    <th class="py-1 px-2">Estado</th><th class="py-1 px-2">Fecha</th>
+                                                </tr></thead>
+                                                <tbody>
+                                                    <template x-for="r in drillDownItems" :key="r.id || r._id">
+                                                        <tr class="border-b border-purple-100">
+                                                            <td class="py-1 px-2 font-mono" x-text="r.referencia || r.reference || '—'"></td>
+                                                            <td class="py-1 px-2 font-medium" x-text="(r.moneda||'') + ' ' + (r.monto || r.amount || '—')"></td>
+                                                            <td class="py-1 px-2">
+                                                                <span :class="{'bg-green-100 text-green-700': r.estado==='completado','bg-yellow-100 text-yellow-700': r.estado==='pendiente','bg-red-100 text-red-700': r.estado==='fallido'}"
+                                                                    class="px-2 py-0.5 rounded-full" x-text="r.estado || '—'"></span>
+                                                            </td>
+                                                            <td class="py-1 px-2 text-gray-400" x-text="r.created_at ? r.created_at.substring(0,10) : '—'"></td>
+                                                        </tr>
+                                                    </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </template>
+                                    <!-- Transacciones del usuario -->
+                                    <template x-if="drillDownSection === 'transacciones' && drillDownItems.length > 0">
+                                        <div class="overflow-x-auto">
+                                            <table class="table-auto w-full text-xs">
+                                                <thead class="text-gray-500 uppercase border-b"><tr>
+                                                    <th class="py-1 px-2">Tipo</th><th class="py-1 px-2">Monto</th>
+                                                    <th class="py-1 px-2">Estado</th><th class="py-1 px-2">Descripción</th><th class="py-1 px-2">Fecha</th>
+                                                </tr></thead>
+                                                <tbody>
+                                                    <template x-for="r in drillDownItems" :key="r.id || r._id">
+                                                        <tr class="border-b border-purple-100">
+                                                            <td class="py-1 px-2 font-mono bg-gray-100 rounded text-gray-700" x-text="r.type || '—'"></td>
+                                                            <td class="py-1 px-2 font-medium" x-text="r.amount || '—'"></td>
+                                                            <td class="py-1 px-2">
+                                                                <span :class="{'bg-green-100 text-green-700': r.status==='completed','bg-yellow-100 text-yellow-700': r.status==='pending','bg-red-100 text-red-700': r.status==='failed'}"
+                                                                    class="px-2 py-0.5 rounded-full" x-text="r.status || '—'"></span>
+                                                            </td>
+                                                            <td class="py-1 px-2 text-gray-500 max-w-xs truncate" x-text="r.description || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-400" x-text="r.created_at ? r.created_at.substring(0,10) : '—'"></td>
+                                                        </tr>
+                                                    </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </template>
+                                    <!-- Logs del usuario -->
+                                    <template x-if="drillDownSection === 'logs' && drillDownItems.length > 0">
+                                        <div class="overflow-x-auto">
+                                            <table class="table-auto w-full text-xs">
+                                                <thead class="text-gray-500 uppercase border-b"><tr>
+                                                    <th class="py-1 px-2">Tipo</th><th class="py-1 px-2">Descripción</th><th class="py-1 px-2">Fecha</th>
+                                                </tr></thead>
+                                                <tbody>
+                                                    <template x-for="r in drillDownItems" :key="r.id || r._id">
+                                                        <tr class="border-b border-purple-100">
+                                                            <td class="py-1 px-2 font-mono" x-text="r.type || r.tipo || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-500 max-w-xs truncate" x-text="r.description || r.descripcion || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-400" x-text="r.created_at ? r.created_at.substring(0,10) : '—'"></td>
+                                                        </tr>
+                                                    </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </template>
+                                    <!-- MiniWebs del usuario -->
+                                    <template x-if="drillDownSection === 'miniwebs' && drillDownItems.length > 0">
+                                        <div class="overflow-x-auto">
+                                            <table class="table-auto w-full text-xs">
+                                                <thead class="text-gray-500 uppercase border-b"><tr>
+                                                    <th class="py-1 px-2">Título</th><th class="py-1 px-2">VCard vinculada</th><th class="py-1 px-2">Estado</th>
+                                                </tr></thead>
+                                                <tbody>
+                                                    <template x-for="r in drillDownItems" :key="r.id || r._id">
+                                                        <tr class="border-b border-purple-100">
+                                                            <td class="py-1 px-2 font-medium" x-text="r.titulo || r.title || '—'"></td>
+                                                            <td class="py-1 px-2 text-gray-500" x-text="(r.vcard && r.vcard.nombre) ? r.vcard.nombre : '—'"></td>
+                                                            <td class="py-1 px-2">
+                                                                <span :class="r.activo ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+                                                                    class="px-2 py-0.5 rounded-full" x-text="r.activo ? 'Activa' : 'Inactiva'"></span>
+                                                            </td>
+                                                        </tr>
+                                                    </template>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </template>
+                                </td>
+                            </tr>
                         </template>
                     </tbody>
                 </table>
@@ -117,16 +261,19 @@
                     <thead class="border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">
                         <tr>
                             <th class="py-2 px-3">Nombre</th>
+                            <th class="py-2 px-3">Usuario</th>
                             <th class="py-2 px-3">Empresa</th>
                             <th class="py-2 px-3">Email</th>
                             <th class="py-2 px-3">Estado</th>
                             <th class="py-2 px-3">Privacidad</th>
+                            <th class="py-2 px-3 text-right">Acciones</th>
                         </tr>
                     </thead>
                     <tbody>
                         <template x-for="v in items" :key="v.id || v._id">
                             <tr class="hover:bg-gray-50 border-b border-gray-100">
                                 <td class="py-2 px-3 font-medium" x-text="v.nombre || '—'"></td>
+                                <td class="py-2 px-3 text-xs text-gray-500" x-text="(v.user && v.user.email) ? v.user.email : (v.user_id || '—')"></td>
                                 <td class="py-2 px-3 text-gray-500" x-text="v.empresa || '—'"></td>
                                 <td class="py-2 px-3 text-gray-500" x-text="v.email || '—'"></td>
                                 <td class="py-2 px-3">
@@ -137,6 +284,10 @@
                                     <span :class="v.privacidad === 'publica' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'"
                                         class="text-xs px-2 py-0.5 rounded-full" x-text="v.privacidad || '—'"></span>
                                 </td>
+                                <td class="py-2 px-3 text-right">
+                                    <button @click="openEditVcardModal(v)"
+                                        class="text-gray-600 hover:text-gray-800 text-xs px-2 py-1 border border-gray-300 rounded">Editar</button>
+                                </td>
                             </tr>
                         </template>
                     </tbody>
@@ -173,6 +324,22 @@
 
         <!-- ─── TAB: Pagos ─── -->
         <div x-show="tab === 'pagos'">
+            <!-- Filtros pagos -->
+            <div class="flex flex-wrap gap-3 mb-4">
+                <select x-model="filters.pagos.estado" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                    <option value="">— Estado —</option>
+                    <option value="pendiente">Pendiente</option>
+                    <option value="completado">Completado</option>
+                    <option value="fallido">Fallido</option>
+                </select>
+                <input x-model="filters.pagos.moneda" type="text" placeholder="Moneda (USD, COP...)"
+                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-36 focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                <input x-model="filters.pagos.desde" type="date"
+                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                <input x-model="filters.pagos.hasta" type="date"
+                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                <button @click="clearFilters('pagos')" class="text-xs text-gray-400 hover:text-gray-600 px-2">✕ Limpiar</button>
+            </div>
             <div x-show="items.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Cargar".</div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm" x-show="items.length > 0">
@@ -208,6 +375,25 @@
 
         <!-- ─── TAB: Transacciones ─── -->
         <div x-show="tab === 'transacciones'">
+            <!-- Filtros transacciones -->
+            <div class="flex flex-wrap gap-3 mb-4">
+                <select x-model="filters.transacciones.type" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                    <option value="">— Tipo —</option>
+                    <option value="deposit">deposit</option>
+                    <option value="withdraw">withdraw</option>
+                    <option value="transfer_in">transfer_in</option>
+                    <option value="transfer_out">transfer_out</option>
+                    <option value="purchase">purchase</option>
+                    <option value="adjustment">adjustment</option>
+                </select>
+                <select x-model="filters.transacciones.status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                    <option value="">— Estado —</option>
+                    <option value="pending">pending</option>
+                    <option value="completed">completed</option>
+                    <option value="failed">failed</option>
+                </select>
+                <button @click="clearFilters('transacciones')" class="text-xs text-gray-400 hover:text-gray-600 px-2">✕ Limpiar</button>
+            </div>
             <div x-show="items.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Cargar".</div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm" x-show="items.length > 0">
@@ -245,6 +431,21 @@
 
         <!-- ─── TAB: Logs ─── -->
         <div x-show="tab === 'logs'">
+            <!-- Filtros logs -->
+            <div class="flex flex-wrap gap-3 mb-4">
+                <select x-model="filters.logs.type" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                    <option value="">— Tipo —</option>
+                    <option value="create">create</option>
+                    <option value="edit">edit</option>
+                    <option value="delete">delete</option>
+                    <option value="delete cuenta">delete cuenta</option>
+                </select>
+                <input x-model="filters.logs.desde" type="date"
+                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                <input x-model="filters.logs.hasta" type="date"
+                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                <button @click="clearFilters('logs')" class="text-xs text-gray-400 hover:text-gray-600 px-2">✕ Limpiar</button>
+            </div>
             <div x-show="items.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Cargar".</div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm" x-show="items.length > 0">
@@ -381,6 +582,156 @@
         </div>
     </div>
 
+    <!-- ─── Modal: Editar Usuario ────────────────────────────────────────── -->
+    <div x-show="editUsuarioModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
+            <div class="flex justify-between items-center p-5 border-b">
+                <div>
+                    <h2 class="text-lg font-semibold">Editar Usuario</h2>
+                    <p class="text-xs text-gray-500 mt-0.5" x-text="editUsuarioData ? (editUsuarioData.email || '') : ''"></p>
+                </div>
+                <button @click="editUsuarioModal = false" class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
+            </div>
+            <div class="p-5 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
+                    <input x-model="editUsuarioForm.name" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input x-model="editUsuarioForm.email" type="email"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Plan ID</label>
+                    <select x-model="editUsuarioForm.plan_id"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                        <option value="">— Sin cambiar —</option>
+                        <template x-for="pl in planes" :key="pl.id || pl._id">
+                            <option :value="pl.id || pl._id" x-text="pl.nombre"></option>
+                        </template>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Rol ID <span class="text-gray-400 font-normal">(opcional)</span></label>
+                    <input x-model="editUsuarioForm.rol_id" type="text" placeholder="ID del rol"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div x-show="editUsuarioError" class="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600" x-text="editUsuarioError"></div>
+                <div x-show="editUsuarioSuccess" class="p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700">✓ Usuario actualizado correctamente.</div>
+            </div>
+            <div class="flex justify-end gap-3 px-5 pb-5">
+                <button @click="editUsuarioModal = false" class="px-4 py-2 text-sm border rounded-lg hover:bg-gray-50">Cancelar</button>
+                <button @click="saveEditUsuario()" :disabled="saving"
+                    class="px-4 py-2 text-sm text-white rounded-lg disabled:opacity-50"
+                    style="background-color:#8eb02f"
+                    onmouseover="if(!this.disabled)this.style.backgroundColor='#6d8c24'"
+                    onmouseout="this.style.backgroundColor='#8eb02f'">
+                    <span x-text="saving ? 'Guardando...' : 'Guardar'"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ─── Modal: Editar VCard ───────────────────────────────────────────── -->
+    <div x-show="editVcardModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
+        <div class="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center p-5 border-b sticky top-0 bg-white z-10">
+                <div>
+                    <h2 class="text-lg font-semibold">Editar VCard</h2>
+                    <p class="text-xs text-gray-500 mt-0.5" x-text="editVcardData ? (editVcardData.nombre || '') : ''"></p>
+                </div>
+                <button @click="editVcardModal = false" class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
+            </div>
+            <div class="p-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Nombre</label>
+                    <input x-model="editVcardForm.nombre" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Cargo</label>
+                    <input x-model="editVcardForm.cargo" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div class="sm:col-span-2">
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Descripción</label>
+                    <textarea x-model="editVcardForm.descripcion" rows="2"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]"></textarea>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Teléfono</label>
+                    <input x-model="editVcardForm.telefono" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">WhatsApp</label>
+                    <input x-model="editVcardForm.whatsapp" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Email</label>
+                    <input x-model="editVcardForm.email" type="email"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Empresa</label>
+                    <input x-model="editVcardForm.empresa" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div class="sm:col-span-2">
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Dirección</label>
+                    <input x-model="editVcardForm.direccion" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Website</label>
+                    <input x-model="editVcardForm.website" type="url"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">País</label>
+                    <input x-model="editVcardForm.pais" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Ciudad</label>
+                    <input x-model="editVcardForm.ciudad" type="text"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]" />
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-700 mb-1">Privacidad</label>
+                    <select x-model="editVcardForm.privacidad"
+                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#8eb02f]">
+                        <option value="publica">Pública</option>
+                        <option value="privada">Privada</option>
+                    </select>
+                </div>
+                <div class="flex items-center gap-4 sm:col-span-2">
+                    <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
+                        <input x-model="editVcardForm.estado" type="checkbox" class="rounded" /> Activa
+                    </label>
+                    <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer">
+                        <input x-model="editVcardForm.es_borrador" type="checkbox" class="rounded" /> Borrador
+                    </label>
+                </div>
+                <div x-show="editVcardError" class="sm:col-span-2 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600" x-text="editVcardError"></div>
+                <div x-show="editVcardSuccess" class="sm:col-span-2 p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700">✓ VCard actualizada correctamente.</div>
+            </div>
+            <div class="flex justify-end gap-3 px-5 pb-5">
+                <button @click="editVcardModal = false" class="px-4 py-2 text-sm border rounded-lg hover:bg-gray-50">Cancelar</button>
+                <button @click="saveEditVcard()" :disabled="saving"
+                    class="px-4 py-2 text-sm text-white rounded-lg disabled:opacity-50"
+                    style="background-color:#8eb02f"
+                    onmouseover="if(!this.disabled)this.style.backgroundColor='#6d8c24'"
+                    onmouseout="this.style.backgroundColor='#8eb02f'">
+                    <span x-text="saving ? 'Guardando...' : 'Guardar'"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- ─── Modal: Membresía ──────────────────────────────────────────────── -->
     <div x-show="membresiaModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
         <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
@@ -475,6 +826,34 @@ function vcardApiApp() {
         membresiaError: '',
         planes: [],
 
+        // Filtros por tab
+        filters: {
+            pagos:         { estado: '', moneda: '', desde: '', hasta: '' },
+            transacciones: { type: '', status: '' },
+            logs:          { type: '', desde: '', hasta: '' },
+        },
+
+        // Modal editar usuario
+        editUsuarioModal: false,
+        editUsuarioData: null,
+        editUsuarioForm: { name: '', email: '', rol_id: '', plan_id: '' },
+        editUsuarioError: '',
+        editUsuarioSuccess: false,
+
+        // Modal editar vcard
+        editVcardModal: false,
+        editVcardData: null,
+        editVcardForm: { nombre: '', cargo: '', descripcion: '', telefono: '', whatsapp: '', email: '', empresa: '', direccion: '', website: '', pais: '', ciudad: '', estado: true, privacidad: 'publica', es_borrador: false },
+        editVcardError: '',
+        editVcardSuccess: false,
+
+        // Drill-down por usuario
+        drillDownUserId: null,
+        drillDownSection: '',
+        drillDownItems: [],
+        drillDownLoading: false,
+        drillDownError: '',
+
         get totalPages() {
             return Math.max(1, Math.ceil(this.total / this.perPage));
         },
@@ -485,6 +864,13 @@ function vcardApiApp() {
             this.loadPlanes();
         },
 
+        closeModals() {
+            this.configModal = false;
+            this.membresiaModal = false;
+            this.editUsuarioModal = false;
+            this.editVcardModal = false;
+        },
+
         async loadConfig() {
             try {
                 const r = await fetch('/app/vcard-api/config');
@@ -551,27 +937,43 @@ function vcardApiApp() {
             this.items = [];
             this.total = 0;
             this.errorMsg = '';
+            this.closeDrillDown();
             if (this.hasConfig) this.loadTab();
         },
 
+        buildEndpoint() {
+            const qs = (p) => Object.entries(p).filter(([,v]) => v !== '').map(([k,v]) => `${k}=${encodeURIComponent(v)}`).join('&');
+            const base = {
+                usuarios:      `/app/vcard-api/usuarios?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
+                vcards:        `/app/vcard-api/vcards?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
+                planes:        `/app/vcard-api/planes`,
+                pagos:         `/app/vcard-api/pagos?per_page=${this.perPage}&page=${this.page}`,
+                transacciones: `/app/vcard-api/transacciones?per_page=${this.perPage}&page=${this.page}`,
+                logs:          `/app/vcard-api/logs?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
+                miniwebs:      `/app/vcard-api/miniwebs?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
+            };
+            let url = base[this.tab] || '';
+            if (this.tab === 'pagos') {
+                const f = qs(this.filters.pagos);
+                if (f) url += '&' + f;
+            } else if (this.tab === 'transacciones') {
+                const f = qs(this.filters.transacciones);
+                if (f) url += '&' + f;
+            } else if (this.tab === 'logs') {
+                const f = qs(this.filters.logs);
+                if (f) url += '&' + f;
+            }
+            return url;
+        },
+
         async loadTab() {
             if (!this.hasConfig) return;
             this.loading = true;
             this.errorMsg = '';
-            const endpoints = {
-                usuarios: `/app/vcard-api/usuarios?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
-                vcards: `/app/vcard-api/vcards?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
-                planes: `/app/vcard-api/planes`,
-                pagos: `/app/vcard-api/pagos?per_page=${this.perPage}&page=${this.page}`,
-                transacciones: `/app/vcard-api/transacciones?per_page=${this.perPage}&page=${this.page}`,
-                logs: `/app/vcard-api/logs?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
-                miniwebs: `/app/vcard-api/miniwebs?search=${encodeURIComponent(this.search)}&per_page=${this.perPage}&page=${this.page}`,
-            };
             try {
-                const r = await fetch(endpoints[this.tab]);
+                const r = await fetch(this.buildEndpoint());
                 const d = await r.json();
                 if (!r.ok) { this.errorMsg = d.error || `Error ${r.status}`; this.loading = false; return; }
-                // Laravel pagination o array plano
                 if (d.data && Array.isArray(d.data)) {
                     this.items = d.data;
                     this.total = d.total || d.data.length;
@@ -587,6 +989,14 @@ function vcardApiApp() {
             this.loading = false;
         },
 
+        clearFilters(tab) {
+            if (tab === 'pagos')         this.filters.pagos         = { estado: '', moneda: '', desde: '', hasta: '' };
+            if (tab === 'transacciones') this.filters.transacciones = { type: '', status: '' };
+            if (tab === 'logs')          this.filters.logs          = { type: '', desde: '', hasta: '' };
+            this.page = 1;
+            this.loadTab();
+        },
+
         async loadPlanes() {
             try {
                 const r = await fetch('/app/vcard-api/planes');
@@ -615,6 +1025,145 @@ function vcardApiApp() {
             this.loading = false;
         },
 
+        // ─── Edit Usuario ────────────────────────────────────────────────────
+
+        openEditUsuarioModal(u) {
+            this.editUsuarioData = u;
+            this.editUsuarioForm = {
+                name:    u.name || u.nombre || '',
+                email:   u.email || '',
+                rol_id:  (u.rol && (u.rol.id || u.rol._id)) ? (u.rol.id || u.rol._id) : '',
+                plan_id: (u.plan && (u.plan.id || u.plan._id)) ? (u.plan.id || u.plan._id) : '',
+            };
+            this.editUsuarioError   = '';
+            this.editUsuarioSuccess = false;
+            this.editUsuarioModal   = true;
+        },
+
+        async saveEditUsuario() {
+            this.editUsuarioError   = '';
+            this.editUsuarioSuccess = false;
+            if (!this.editUsuarioForm.name.trim() || !this.editUsuarioForm.email.trim()) {
+                this.editUsuarioError = 'Nombre y email son requeridos.'; return;
+            }
+            this.saving = true;
+            const id = this.editUsuarioData.id || this.editUsuarioData._id;
+            const body = {};
+            if (this.editUsuarioForm.name)    body.name    = this.editUsuarioForm.name;
+            if (this.editUsuarioForm.email)   body.email   = this.editUsuarioForm.email;
+            if (this.editUsuarioForm.rol_id)  body.rol_id  = this.editUsuarioForm.rol_id;
+            if (this.editUsuarioForm.plan_id) body.plan_id = this.editUsuarioForm.plan_id;
+            try {
+                const r = await fetch(`/app/vcard-api/usuarios/${id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+                const d = await r.json();
+                if (!r.ok) {
+                    this.editUsuarioError = d.error || d.message || `Error ${r.status}`;
+                } else {
+                    this.editUsuarioSuccess = true;
+                    await this.loadTab();
+                    setTimeout(() => { this.editUsuarioModal = false; }, 1200);
+                }
+            } catch(e) { this.editUsuarioError = e.message; }
+            this.saving = false;
+        },
+
+        // ─── Edit VCard ──────────────────────────────────────────────────────
+
+        openEditVcardModal(v) {
+            this.editVcardData = v;
+            this.editVcardForm = {
+                nombre:      v.nombre      || '',
+                cargo:       v.cargo       || '',
+                descripcion: v.descripcion || '',
+                telefono:    v.telefono    || '',
+                whatsapp:    v.whatsapp    || '',
+                email:       v.email       || '',
+                empresa:     v.empresa     || '',
+                direccion:   v.direccion   || '',
+                website:     v.website     || '',
+                pais:        v.pais        || '',
+                ciudad:      v.ciudad      || '',
+                estado:      !!v.estado,
+                privacidad:  v.privacidad  || 'publica',
+                es_borrador: !!v.es_borrador,
+            };
+            this.editVcardError   = '';
+            this.editVcardSuccess = false;
+            this.editVcardModal   = true;
+        },
+
+        async saveEditVcard() {
+            this.editVcardError   = '';
+            this.editVcardSuccess = false;
+            this.saving = true;
+            const id = this.editVcardData.id || this.editVcardData._id;
+            try {
+                const r = await fetch(`/app/vcard-api/vcards/${id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(this.editVcardForm)
+                });
+                const d = await r.json();
+                if (!r.ok) {
+                    this.editVcardError = d.error || d.message || `Error ${r.status}`;
+                } else {
+                    this.editVcardSuccess = true;
+                    await this.loadTab();
+                    setTimeout(() => { this.editVcardModal = false; }, 1200);
+                }
+            } catch(e) { this.editVcardError = e.message; }
+            this.saving = false;
+        },
+
+        // ─── Drill-down por usuario ──────────────────────────────────────────
+
+        openDrillDown(u) {
+            const id = u.id || u._id;
+            if (this.drillDownUserId === id) { this.closeDrillDown(); return; }
+            this.drillDownUserId   = id;
+            this.drillDownSection  = 'vcards';
+            this.drillDownItems    = [];
+            this.drillDownError    = '';
+            this.loadDrillDown('vcards');
+        },
+
+        closeDrillDown() {
+            this.drillDownUserId  = null;
+            this.drillDownSection = '';
+            this.drillDownItems   = [];
+            this.drillDownError   = '';
+        },
+
+        async loadDrillDown(section) {
+            this.drillDownSection = section;
+            this.drillDownItems   = [];
+            this.drillDownError   = '';
+            if (!this.drillDownUserId) return;
+            this.drillDownLoading = true;
+            const map = {
+                vcards:        `/app/vcard-api/usuarios/${this.drillDownUserId}/vcards`,
+                pagos:         `/app/vcard-api/usuarios/${this.drillDownUserId}/pagos`,
+                transacciones: `/app/vcard-api/usuarios/${this.drillDownUserId}/transacciones`,
+                logs:          `/app/vcard-api/usuarios/${this.drillDownUserId}/logs`,
+                miniwebs:      `/app/vcard-api/usuarios/${this.drillDownUserId}/miniwebs`,
+            };
+            try {
+                const r = await fetch(map[section]);
+                const d = await r.json();
+                if (!r.ok) { this.drillDownError = d.error || `Error ${r.status}`; }
+                else if (d.data && Array.isArray(d.data)) { this.drillDownItems = d.data; }
+                else if (Array.isArray(d)) { this.drillDownItems = d; }
+                else { this.drillDownError = 'Respuesta inesperada.'; }
+            } catch(e) { this.drillDownError = e.message; }
+            this.drillDownLoading = false;
+        },
+
+        // ─── Membresía ───────────────────────────────────────────────────────
+
         async openMembresiaModal(u) {
             this.membresiaUser = u;
             this.membresiaInfo = null;