From 4ee11d5cbf8d6e147cac8c43be524190eb4d4f4b Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 15 Feb 2026 18:27:20 +0000
Subject: [PATCH] Actualizar usuarios.html

---
 usuarios.html | 162 ++++++++++++++++++++------------------------------
 1 file changed, 64 insertions(+), 98 deletions(-)

diff --git a/usuarios.html b/usuarios.html
index 53ffe28..31e4230 100644
--- a/usuarios.html
+++ b/usuarios.html
@@ -147,8 +147,8 @@
     </div>
 
     <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Mensaje</span></div>
+    
     <script src="js/layout.js"></script>
-
     <script>
         let availableGuilds = [];
         let currentUsers = [];
@@ -238,7 +238,7 @@
             
             if (!prov || !munName) { showToast("Selecciona Provincia y Municipio", true); return; }
 
-            if (munName === "OTRO" || selMun.options[selMun.selectedIndex].text.includes("MANUAL")) {
+            if (munName === "OTRO" || (selMun.options[selMun.selectedIndex] && selMun.options[selMun.selectedIndex].text.includes("MANUAL"))) {
                 const manualCP = document.getElementById('cpInput').value.trim();
                 if(!manualCP) { showToast("Escribe el CP manual", true); return; }
                 tempUserZones.push({ province: prov, city: munName === "OTRO" ? "MANUAL" : munName, cps: manualCP });
@@ -262,6 +262,7 @@
 
         function renderTempZones() {
             const area = document.getElementById('userZonesArea');
+            if(!area) return;
             area.innerHTML = tempUserZones.length === 0 ? '<p class="text-[10px] text-gray-300 italic p-1">Sin zonas añadidas...</p>' : "";
             
             const visualGroup = tempUserZones.reduce((acc, curr) => {
@@ -401,108 +402,73 @@
             });
         }
 
-  function renderUsersTable() {
-    const tbody = document.getElementById('usersListBody');
-    if (!tbody) return;
-    
-    tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
-    
-    currentUsers.forEach(u => {
-        // Detectamos si el operario está activo o de baja
-        const isActive = u.status === 'active';
-        const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
-        
-        // Agrupación visual de zonas
-        const groupedZones = (u.zones || []).reduce((acc, curr) => {
-            if (!acc[curr.city]) acc[curr.city] = [];
-            if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps);
-            return acc;
-        }, {});
+        function renderUsersTable() {
+            const tbody = document.getElementById('usersListBody');
+            if (!tbody) return;
+            tbody.innerHTML = currentUsers.length === 0 ? `<tr><td colspan="5" class="p-8 text-center text-gray-300 font-bold uppercase tracking-widest text-left">Cargando equipo...</td></tr>` : "";
+            
+            currentUsers.forEach(u => {
+                const isActive = u.status === 'active';
+                const uGuildNames = (u.guilds || []).map(gid => availableGuilds.find(ag => ag.id === gid)?.name).filter(Boolean).join(", ");
+                
+                const groupedZones = (u.zones || []).reduce((acc, curr) => {
+                    if (!acc[curr.city]) acc[curr.city] = [];
+                    if (!acc[curr.city].includes(curr.cps)) acc[curr.city].push(curr.cps);
+                    return acc;
+                }, {});
 
-        const uZonesHtml = Object.keys(groupedZones).map(city => {
-            return `<div class="mb-1 last:mb-0">
-                        <span class="font-black ${isActive ? 'text-blue-600' : 'text-gray-400'} text-[10px] uppercase">📍 ${city}</span> 
-                        <span class="text-gray-500 text-[9px]">(${groupedZones[city].join(", ")})</span>
-                    </div>`;
-        }).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>';
+                const uZonesHtml = Object.keys(groupedZones).map(city => {
+                    return `<div class="mb-1 last:mb-0"><span class="font-black ${isActive ? 'text-blue-600' : 'text-gray-400'} text-[10px] uppercase">📍 ${city}</span> <span class="text-gray-500 text-[9px]">(${groupedZones[city].join(", ")})</span></div>`;
+                }).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>';
 
-        // Aplicamos el estilo gris y opacidad si es baja temporal
-        tbody.innerHTML += `
-            <tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b">
-                <td class="p-4">
-                    <div class="flex flex-col">
-                        <div class="flex items-center gap-2">
-                            ${!isActive ? '<i data-lucide="lock" class="w-3 h-3 text-red-500"></i>' : ''}
-                            <span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span>
-                        </div>
-                        <span class="text-[9px] text-gray-400 font-bold">${u.email}</span>
-                        ${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase">[ Baja Temporal ]</span>' : ''}
-                    </div>
-                </td>
-                <td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td>
-                <td class="p-4">
-                    <span class="${isActive ? 'bg-slate-100 text-slate-600' : 'bg-gray-200 text-gray-400'} px-2 py-0.5 rounded text-[10px] font-black uppercase">${u.role}</span>
-                    <p class="text-[9px] text-gray-400 mt-1 uppercase font-bold">${uGuildNames || '-'}</p>
-                </td>
-                <td class="p-4 text-left"><div class="max-h-24 overflow-y-auto no-scrollbar">${uZonesHtml}</div></td>
-                <td class="p-4 text-right space-x-2">
-                    <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-[10px] uppercase">Editar</button>
-                    
-                    <button onclick="toggleUserStatus(${u.id}, '${u.status || 'active'}')" 
-                            class="${isActive ? 'text-amber-500 hover:text-amber-700' : 'text-green-500 hover:text-green-700'} font-black text-[10px] uppercase">
-                        ${isActive ? 'Baja' : 'Activar'}
-                    </button>
-                    
-                    <button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-[10px] uppercase">Borrar</button>
-                </td>
-            </tr>`;
-    });
-    lucide.createIcons(); // Importante para que se vea el candado
-}
-
-// Nueva función para el botón de Baja/Activar
-async function toggleUserStatus(id, currentStatus) {
-    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
-    const msg = newStatus === 'active' ? "¿Reactivar operario?" : "¿Dar de baja temporal?";
-    if(!confirm(msg)) return;
-
-    try {
-        const res = await fetch(`${API_URL}/admin/users/${id}/status`, {
-            method: 'PATCH',
-            headers: { 
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${localStorage.getItem("token")}` 
-            },
-            body: JSON.stringify({ status: newStatus })
-        });
-        const data = await res.json();
-        if(data.ok) {
-            showToast(newStatus === 'active' ? "Operario activado" : "Operario en baja temporal");
-            fetchUsers();
+                tbody.innerHTML += `
+                    <tr class="${isActive ? 'bg-white' : 'bg-gray-100 opacity-60'} hover:bg-gray-50 transition border-b">
+                        <td class="p-4">
+                            <div class="flex flex-col">
+                                <div class="flex items-center gap-2">
+                                    ${!isActive ? '<i data-lucide="lock" class="w-3 h-3 text-red-500"></i>' : ''}
+                                    <span class="font-black ${isActive ? 'text-slate-800' : 'text-gray-500'} uppercase">${u.full_name}</span>
+                                </div>
+                                <span class="text-[9px] text-gray-400 font-bold">${u.email}</span>
+                                ${!isActive ? '<span class="text-[8px] font-black text-red-500 mt-1 uppercase tracking-tighter">[ Baja Temporal ]</span>' : ''}
+                            </div>
+                        </td>
+                        <td class="p-4 font-black ${isActive ? 'text-green-600' : 'text-gray-400'}">${u.phone}</td>
+                        <td class="p-4"><span class="${isActive ? 'bg-slate-100 text-slate-600' : 'bg-gray-200 text-gray-400'} px-2 py-0.5 rounded text-[10px] font-black uppercase">${u.role}</span><p class="text-[9px] text-gray-400 mt-1 uppercase font-bold">${uGuildNames || '-'}</p></td>
+                        <td class="p-4 text-left"><div class="max-h-24 overflow-y-auto no-scrollbar">${uZonesHtml}</div></td>
+                        <td class="p-4 text-right space-x-2">
+                            <button onclick="editUser(${u.id})" class="text-blue-500 hover:text-blue-700 font-black text-[10px] uppercase">Editar</button>
+                            <button onclick="toggleUserStatus(${u.id}, '${u.status || 'active'}')" class="${isActive ? 'text-amber-500 hover:text-amber-700' : 'text-green-500 hover:text-green-700'} font-black text-[10px] uppercase">
+                                ${isActive ? 'Baja' : 'Activar'}
+                            </button>
+                            <button onclick="deleteUser(${u.id})" class="text-red-400 hover:text-red-700 font-black text-[10px] uppercase">Borrar</button>
+                        </td>
+                    </tr>`;
+            });
+            lucide.createIcons();
         }
-    } catch(e) { showToast("Error de conexión", true); }
-}
 
-// Asegúrate de tener también esta función para que los botones de la tabla funcionen
-async function toggleUserStatus(id, currentStatus) {
-    const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
-    if(!confirm(`¿Deseas cambiar el estado de este operario?`)) return;
+        async function toggleUserStatus(id, currentStatus) {
+            const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
+            const msg = newStatus === 'active' ? "¿Reactivar operario?" : "¿Dar de baja temporal?";
+            if(!confirm(msg)) return;
 
-    try {
-        const res = await fetch(`${API_URL}/admin/users/${id}/status`, {
-            method: 'PATCH',
-            headers: { 
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${localStorage.getItem("token")}` 
-            },
-            body: JSON.stringify({ status: newStatus })
-        });
-        if(await res.json()) {
-            showToast(newStatus === 'active' ? "Operario activado" : "Operario en baja temporal");
-            fetchUsers();
+            try {
+                const res = await fetch(`${API_URL}/admin/users/${id}/status`, {
+                    method: 'PATCH',
+                    headers: { 
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${localStorage.getItem("token")}` 
+                    },
+                    body: JSON.stringify({ status: newStatus })
+                });
+                const data = await res.json();
+                if(data.ok) {
+                    showToast(newStatus === 'active' ? "Operario activado" : "Operario en baja temporal");
+                    fetchUsers();
+                }
+            } catch(e) { showToast("Error de conexión", true); }
         }
-    } catch(e) { showToast("Error", true); }
-}
 
         function showToast(msg, err=false){
              const t=document.getElementById('toast'), m=document.getElementById('toastMsg');