Actualizar usuarios.html

usuarios.html

@@ -401,15 +401,18 @@
             });
         }
 
-    function renderUsersTable() {
+  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 => {
-        // Determinamos si el usuario está activo basándonos en el campo 'status' del servidor
+        // Detectamos si el operario está activo o de baja
-        const isActive = (u.status === 'active' || u.status === null); 
+        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);
@@ -423,7 +426,7 @@
                     </div>`;
         }).join("") || '<span class="text-[9px] text-gray-300 italic">Sin zona</span>';
 
-        // Aplicamos clases CSS de "grisado" si no está activo
+        // 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">
@@ -433,7 +436,7 @@
                             <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>' : ''}
+                        ${!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>
@@ -457,6 +460,29 @@
     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();
+        }
+    } 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';