From 661e02ef9c8c2f4e75fba8d439bad62a8d6c9af4 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Sat, 23 May 2026 08:57:18 -0500
Subject: [PATCH] feat: desactivar usuario + VCards desde tab usuarios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Botón '🚫 + VCards' abre modal de confirmación
- Modal carga y lista las VCards activas del usuario
- Al confirmar: inactiva cada VCard (PUT estado:false) y desactiva el usuario
- Muestra resumen del resultado antes de cerrar
- Botón 'Ordenar por vencimiento' con colores en filas (rojo/amarillo/verde)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 resources/views/vcard_api.html | 237 ++++++++++++++++++++++++++++++++-
 1 file changed, 236 insertions(+), 1 deletion(-)

diff --git a/resources/views/vcard_api.html b/resources/views/vcard_api.html
index cef69cb..697cb0e 100644
--- a/resources/views/vcard_api.html
+++ b/resources/views/vcard_api.html
@@ -71,6 +71,27 @@
         <!-- ─── TAB: Usuarios ─── -->
         <div x-show="tab === 'usuarios'">
             <div x-show="items.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Sin datos. Haz clic en "Cargar".</div>
+
+            <!-- Toolbar: ordenar por vencimiento -->
+            <div class="flex flex-wrap items-center gap-3 mb-3" x-show="items.length > 0">
+                <button @click="toggleSortVenc()" :disabled="loadingVenc"
+                    :class="sortByVenc ? 'bg-[#8eb02f] text-white border-[#8eb02f]' : 'text-gray-600 border-gray-300 hover:bg-gray-50'"
+                    class="flex items-center gap-1.5 text-xs px-3 py-1.5 border rounded-lg transition disabled:opacity-50">
+                    <svg x-show="loadingVenc" class="w-3 h-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    <svg x-show="!loadingVenc" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                    </svg>
+                    <span x-text="loadingVenc ? 'Cargando membresías...' : (sortByVenc ? '✓ Ordenado por vencimiento' : 'Ordenar por vencimiento')"></span>
+                </button>
+                <div class="flex items-center gap-2 text-xs" x-show="sortByVenc">
+                    <span class="px-2 py-0.5 rounded-full bg-red-100 text-red-700">Vencido / ≤7 días</span>
+                    <span class="px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700">8–30 días</span>
+                    <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-700">&gt;30 días</span>
+                </div>
+            </div>
+
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-sm" x-show="items.length > 0">
                     <thead class="border-b border-gray-200 text-left text-xs font-semibold text-gray-500 uppercase">
@@ -79,13 +100,14 @@
                             <th class="py-2 px-3">Email</th>
                             <th class="py-2 px-3">Rol</th>
                             <th class="py-2 px-3">Plan</th>
+                            <th class="py-2 px-3" x-show="sortByVenc">Vence</th>
                             <th class="py-2 px-3">Estado</th>
                             <th class="py-2 px-3 text-right">Acciones</th>
                         </tr>
                     </thead>
                     <tbody>
                         <template x-for="u in items" :key="u.id || u._id">
-                            <tr class="hover:bg-gray-50 border-b border-gray-100">
+                            <tr :class="sortByVenc ? vencimientoRowClass(u) : 'hover:bg-gray-50'" class="border-b border-gray-100 transition-colors">
                                 <td class="py-2 px-3 font-medium" x-text="u.name || u.nombre || '—'"></td>
                                 <td class="py-2 px-3 text-gray-500 text-xs" x-text="u.email || '—'"></td>
                                 <td class="py-2 px-3">
@@ -93,6 +115,9 @@
                                         class="text-xs px-2 py-0.5 rounded-full" x-text="(u.rol && u.rol.nombre) ? u.rol.nombre : '—'"></span>
                                 </td>
                                 <td class="py-2 px-3 text-xs" x-text="(u.plan && u.plan.nombre) ? u.plan.nombre : '—'"></td>
+                                <td class="py-2 px-3 text-xs" x-show="sortByVenc">
+                                    <span :class="vencimientoBadgeClass(u)" class="px-2 py-0.5 rounded-full whitespace-nowrap" x-text="vencimientoTexto(u)"></span>
+                                </td>
                                 <td class="py-2 px-3">
                                     <span :class="(u.estado === true || u.estado === 'true') ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                                         class="text-xs px-2 py-0.5 rounded-full"
@@ -108,6 +133,10 @@
                                             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 === true || u.estado === 'true'" @click="toggleUsuario(u, 'desactivar')"
                                             class="text-red-400 hover:text-red-600 text-xs px-2 py-1 border border-red-200 rounded">Desactivar</button>
+                                        <button x-show="u.estado === true || u.estado === 'true'" @click="openDesactivarConVcardsModal(u)"
+                                            class="text-orange-500 hover:text-orange-700 text-xs px-2 py-1 border border-orange-300 rounded" title="Desactiva usuario e inactiva todas sus VCards">
+                                            🚫 + VCards
+                                        </button>
                                         <button @click="openMembresiaModal(u)"
                                             class="text-blue-500 hover:text-blue-700 text-xs px-2 py-1 border border-blue-200 rounded">Membresía</button>
                                     </div>
@@ -1182,6 +1211,65 @@
         </div>
     </div>
 
+    <!-- ─── Modal: Desactivar Usuario + VCards ───────────────────────────── -->
+    <div x-show="desactivarVcardsModal" 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>
+                    <h3 class="text-base font-semibold text-red-700">Desactivar usuario + VCards</h3>
+                    <p class="text-xs text-gray-500 mt-0.5" x-text="desactivarVcardsUser ? (desactivarVcardsUser.name || desactivarVcardsUser.email) : ''"></p>
+                </div>
+                <button @click="desactivarVcardsModal = false" class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
+            </div>
+            <div class="p-5 space-y-4">
+                <!-- Cargando vcards -->
+                <div x-show="desactivarVcardsLoading" class="flex items-center gap-2 text-sm text-gray-500">
+                    <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    Cargando VCards del usuario...
+                </div>
+                <!-- Resumen de vcards encontradas -->
+                <div x-show="!desactivarVcardsLoading && desactivarVcardsItems.length > 0" class="p-3 bg-orange-50 border border-orange-200 rounded-lg text-sm">
+                    <p class="font-medium text-orange-800 mb-2">
+                        Se inactivarán <span class="font-bold" x-text="desactivarVcardsItems.length"></span> VCard(s):
+                    </p>
+                    <ul class="space-y-1 max-h-40 overflow-y-auto">
+                        <template x-for="v in desactivarVcardsItems" :key="v.id || v._id">
+                            <li class="flex items-center gap-2 text-xs text-orange-700">
+                                <span class="text-orange-400">•</span>
+                                <span class="font-medium" x-text="v.nombre || v.name || '—'"></span>
+                                <span class="text-orange-500 font-mono" x-text="v.unico ? '/' + v.unico : ''"></span>
+                                <span :class="v.estado ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400'"
+                                    class="ml-auto px-1.5 py-0.5 rounded-full text-xs"
+                                    x-text="v.estado ? 'Activa' : 'Inactiva'"></span>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+                <!-- Sin vcards -->
+                <div x-show="!desactivarVcardsLoading && desactivarVcardsItems.length === 0" class="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-500">
+                    Este usuario no tiene VCards. Solo se desactivará la cuenta.
+                </div>
+                <p class="text-sm text-gray-700">¿Confirmas desactivar la cuenta del usuario y todas sus VCards?</p>
+                <!-- Error -->
+                <div x-show="desactivarVcardsError" class="p-3 bg-red-50 border border-red-200 rounded text-sm text-red-600" x-text="desactivarVcardsError"></div>
+                <!-- Resultado -->
+                <div x-show="desactivarVcardsResult" class="p-3 bg-green-50 border border-green-200 rounded text-sm text-green-700" x-text="desactivarVcardsResult"></div>
+            </div>
+            <div class="flex justify-end gap-3 px-5 pb-5">
+                <button @click="desactivarVcardsModal = false" class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancelar</button>
+                <button @click="confirmarDesactivarConVcards()" :disabled="saving || desactivarVcardsLoading"
+                    class="text-sm px-4 py-2 rounded-lg text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 flex items-center gap-2">
+                    <svg x-show="saving" class="w-3.5 h-3.5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                    <span x-text="saving ? 'Desactivando...' : 'Confirmar desactivación'"></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">
@@ -1483,6 +1571,19 @@ function vcardApiApp() {
         membresiaError: '',
         planes: [],
 
+        // Ordenar usuarios por vencimiento
+        sortByVenc: false,
+        loadingVenc: false,
+        membresiaMap: {},  // { userId: { fecha_fin, activo, plan } }
+
+        // Desactivar usuario + VCards
+        desactivarVcardsModal: false,
+        desactivarVcardsUser: null,
+        desactivarVcardsItems: [],
+        desactivarVcardsLoading: false,
+        desactivarVcardsError: '',
+        desactivarVcardsResult: '',
+
         // Filtros por tab
         filters: {
             pagos:         { estado: '', moneda: '', desde: '', hasta: '' },
@@ -1571,6 +1672,7 @@ function vcardApiApp() {
             this.verVcardModal = false;
             this.verPlanModal = false;
             this.editPlanModal = false;
+            this.desactivarVcardsModal = false;
         },
 
         async loadConfig() {
@@ -1690,6 +1792,10 @@ function vcardApiApp() {
                 }
             } catch(e) { this.errorMsg = e.message; }
             this.loading = false;
+            // Si el sort por vencimiento estaba activo, re-aplicarlo con los nuevos items
+            if (this.sortByVenc && this.tab === 'usuarios' && this.items.length > 0) {
+                await this._fetchAndSortVenc();
+            }
         },
 
         _collectRoles(users) {
@@ -1703,6 +1809,82 @@ function vcardApiApp() {
             });
         },
 
+        // ─── Ordenar por vencimiento ─────────────────────────────────────────
+
+        diasHastaVencer(u) {
+            const id = u.id || u._id;
+            const m = this.membresiaMap[id];
+            if (!m || !m.fecha_fin) return null;
+            const diff = new Date(m.fecha_fin) - new Date();
+            return Math.ceil(diff / (1000 * 60 * 60 * 24));
+        },
+
+        vencimientoRowClass(u) {
+            const dias = this.diasHastaVencer(u);
+            if (dias === null) return 'hover:bg-gray-50';
+            if (dias <= 7)  return 'bg-red-50 hover:bg-red-100';
+            if (dias <= 30) return 'bg-yellow-50 hover:bg-yellow-100';
+            return 'bg-green-50 hover:bg-green-100';
+        },
+
+        vencimientoBadgeClass(u) {
+            const dias = this.diasHastaVencer(u);
+            if (dias === null) return 'bg-gray-100 text-gray-400';
+            if (dias <= 0)  return 'bg-red-200 text-red-800 font-semibold';
+            if (dias <= 7)  return 'bg-red-100 text-red-700 font-semibold';
+            if (dias <= 30) return 'bg-yellow-100 text-yellow-700';
+            return 'bg-green-100 text-green-700';
+        },
+
+        vencimientoTexto(u) {
+            const id = u.id || u._id;
+            const m = this.membresiaMap[id];
+            if (this.loadingVenc && !m) return '...';
+            if (!m || !m.fecha_fin) return '—';
+            const dias = this.diasHastaVencer(u);
+            const fecha = m.fecha_fin.substring(0, 10);
+            if (dias <= 0)  return `Vencido · ${fecha}`;
+            if (dias === 1) return `Mañana · ${fecha}`;
+            return `${dias}d · ${fecha}`;
+        },
+
+        async _fetchAndSortVenc() {
+            this.loadingVenc = true;
+            const batchSize = 5;
+            for (let i = 0; i < this.items.length; i += batchSize) {
+                const batch = this.items.slice(i, i + batchSize);
+                await Promise.all(batch.map(async u => {
+                    const id = u.id || u._id;
+                    if (this.membresiaMap[id]) return;
+                    try {
+                        const r = await fetch(`/app/vcard-api/usuarios/${id}/membresia`);
+                        if (r.ok) { this.membresiaMap[id] = await r.json(); }
+                    } catch(e) { /* ignorar errores individuales */ }
+                }));
+            }
+            this.loadingVenc = false;
+            this.items = [...this.items].sort((a, b) => {
+                const ma = this.membresiaMap[a.id || a._id];
+                const mb = this.membresiaMap[b.id || b._id];
+                const fa = ma?.fecha_fin ? new Date(ma.fecha_fin) : null;
+                const fb = mb?.fecha_fin ? new Date(mb.fecha_fin) : null;
+                if (!fa && !fb) return 0;
+                if (!fa) return 1;
+                if (!fb) return -1;
+                return fa - fb;
+            });
+        },
+
+        async toggleSortVenc() {
+            if (this.sortByVenc) {
+                this.sortByVenc = false;
+                this.loadTab();
+                return;
+            }
+            this.sortByVenc = true;
+            await this._fetchAndSortVenc();
+        },
+
         clearFilters(tab) {
             if (tab === 'pagos')         this.filters.pagos         = { estado: '', moneda: '', desde: '', hasta: '' };
             if (tab === 'transacciones') this.filters.transacciones = { type: '', status: '' };
@@ -1801,6 +1983,57 @@ function vcardApiApp() {
             this.loading = false;
         },
 
+        async openDesactivarConVcardsModal(u) {
+            this.desactivarVcardsUser = u;
+            this.desactivarVcardsItems = [];
+            this.desactivarVcardsError = '';
+            this.desactivarVcardsResult = '';
+            this.desactivarVcardsLoading = true;
+            this.desactivarVcardsModal = true;
+            try {
+                const id = u.id || u._id;
+                const r = await fetch(`/app/vcard-api/usuarios/${id}/vcards`);
+                const d = await r.json();
+                if (d.data && Array.isArray(d.data)) this.desactivarVcardsItems = d.data;
+                else if (Array.isArray(d)) this.desactivarVcardsItems = d;
+            } catch(e) { this.desactivarVcardsError = 'No se pudieron cargar las VCards: ' + e.message; }
+            this.desactivarVcardsLoading = false;
+        },
+
+        async confirmarDesactivarConVcards() {
+            this.desactivarVcardsError = '';
+            this.desactivarVcardsResult = '';
+            this.saving = true;
+            const id = this.desactivarVcardsUser.id || this.desactivarVcardsUser._id;
+            try {
+                // 1. Inactivar cada VCard activa
+                let inactivadas = 0;
+                const vcards = this.desactivarVcardsItems.filter(v => v.estado === true || v.estado === 1);
+                for (const v of vcards) {
+                    const vid = v.id || v._id;
+                    const r = await fetch(`/app/vcard-api/vcards/${vid}`, {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ estado: false })
+                    });
+                    if (r.ok) inactivadas++;
+                }
+                // 2. Desactivar usuario
+                const rU = await fetch(`/app/vcard-api/usuarios/${id}/desactivar`, { method: 'POST' });
+                const dU = await rU.json();
+                if (!rU.ok) {
+                    this.desactivarVcardsError = dU.error || 'Error al desactivar el usuario.';
+                } else {
+                    this.desactivarVcardsResult = `Usuario desactivado. VCards inactivadas: ${inactivadas} de ${vcards.length}.`;
+                    setTimeout(async () => {
+                        this.desactivarVcardsModal = false;
+                        await this.loadTab();
+                    }, 1800);
+                }
+            } catch(e) { this.desactivarVcardsError = e.message; }
+            this.saving = false;
+        },
+
         // ─── Edit Usuario ────────────────────────────────────────────────────
 
         openEditUsuarioModal(u) {
@@ -1987,6 +2220,8 @@ function vcardApiApp() {
                 const r = await fetch(`/app/vcard-api/usuarios/${id}/membresia`);
                 const d = await r.json();
                 this.membresiaInfo = d;
+                // Cachear para el sort por vencimiento
+                this.membresiaMap[id] = d;
             } catch(e) {}
         },