Actualizar proveedores.html

2026-02-16 15:18:56 +00:00
parent 1728027b16
commit d3aec7471f
1 changed files with 58 additions and 22 deletions
--- a/proveedores.html
+++ b/proveedores.html
@@ -12,12 +12,22 @@
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .service-card { cursor: pointer; transition: all 0.2s ease; position: relative; }
-        .service-card:hover:not(.archived) { transform: translateY(-2px); border-color: #3b82f6; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
-        .archived { opacity: 0.7; grayscale: 100%; }
+        .service-card:hover:not(.archived):not(.locked) { transform: translateY(-2px); border-color: #3b82f6; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
+        .archived { opacity: 0.7; filter: grayscale(100%); }
+        .locked { cursor: not-allowed; }
        
        /* Animación suave para el icono de esperando */
        .pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
+
+        /* Animación de temblor para las tarjetas bloqueadas */
+        .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
+        @keyframes shake {
+            10%, 90% { transform: translate3d(-1px, 0, 0); }
+            20%, 80% { transform: translate3d(2px, 0, 0); }
+            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+            40%, 60% { transform: translate3d(4px, 0, 0); }
+        }
    </style>
 </head>
 <body class="bg-gray-50 text-gray-800 font-sans antialiased overflow-hidden text-left">
@@ -309,7 +319,7 @@
                const raw = svc.raw_data || {};
                const isArchived = svc.status === 'archived';
                const statusLabel = isArchived ? 'ARCHIVADO' : 'SERVICIO ACTIVO';
-                const statusClass = isArchived ? 'bg-gray-100 text-gray-500 border-gray-200' : 'bg-emerald-50 text-emerald-600 border-emerald-100';
+                
                const name = raw['Nombre Cliente'] || raw['CLIENTE'] || "S/N";
                const addr = raw['Dirección'] || raw['DOMICILIO'] || "";
                const pop = raw['Población'] || raw['POBLACION-PROVINCIA'] || "";
@@ -318,25 +328,39 @@
                const guildName = allGuilds.find(g => g.id == raw['guild_id'])?.name || null;
                const opName = raw['assigned_to_name'] || null;

-                // LOGICA DE ESTADO VISUAL
+                // LÓGICA DE ESTADO VISUAL Y BLOQUEO
                let badgeEstado = '';
+                let bgClass = 'bg-white';
+                let isLocked = false;
+                let lockedMsg = '';
+
                if (!isArchived) {
                    if (svc.automation_status === 'in_progress') {
+                        // EN COLA (Amarillo)
+                        bgClass = 'bg-amber-50/40 border-amber-200';
+                        isLocked = true;
+                        lockedMsg = 'Este servicio está actualmente en la rueda de WhatsApp buscando operario.';
                        badgeEstado = `
                            <div class="flex flex-col items-end gap-1">
-                                <span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-amber-200">
+                                <span class="bg-amber-100 text-amber-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-amber-200 shadow-sm">
                                    <span class="w-1.5 h-1.5 bg-amber-500 rounded-full pulse-slow"></span> En Cola / Esperando
                                </span>
                            </div>`;
-                    } else if (raw['assigned_to']) {
+                    } else if (raw['assigned_to'] || svc.status === 'imported') {
+                        // ASIGNADO / TRASPASADO (Verde)
+                        bgClass = 'bg-emerald-50/40 border-emerald-200';
+                        isLocked = true;
+                        lockedMsg = 'Este servicio ya ha sido asignado o traspasado. Ve al Panel Operativo para gestionarlo.';
                        badgeEstado = `
                            <div class="flex flex-col items-end gap-1">
-                                <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-emerald-200">
+                                <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-emerald-200 shadow-sm">
                                    <i data-lucide="check-circle-2" class="w-3 h-3"></i> Asignado
                                </span>
-                                <span class="text-[9px] font-bold text-slate-500 max-w-[120px] truncate text-right">${opName || 'Operario'}</span>
+                                <span class="text-[9px] font-bold text-slate-500 max-w-[120px] truncate text-right">${opName || 'Operario asignado'}</span>
                            </div>`;
                    } else {
+                        // NORMAL (Blanco)
+                        bgClass = 'bg-white border-slate-200';
                        badgeEstado = `
                            <div class="flex flex-col items-end gap-1">
                                <span class="bg-slate-100 text-slate-500 px-3 py-1 rounded-full text-[10px] font-black uppercase flex items-center gap-1.5 border border-slate-200">
@@ -344,15 +368,32 @@
                                </span>
                            </div>`;
                    }
+                } else {
+                    bgClass = 'bg-gray-50 border-gray-200 archived';
                }

                const card = document.createElement('div');
-                card.className = `service-card bg-white p-5 rounded-2xl border ${isArchived ? 'archived' : 'shadow-sm'} flex items-center justify-between transition-all group fade-in text-left`;
+                card.id = `card-${svc.id}`;
+                card.className = `service-card p-5 rounded-2xl border ${bgClass} flex items-center justify-between transition-all group fade-in text-left ${isLocked ? 'locked' : ''}`;
+                
                card.onclick = (e) => {
                    if (e.target.closest('a') || e.target.closest('button')) return;
-                    if (isArchived) showToast("⚠️ Este servicio está ARCHIVADO.", true);
-                    else openEditor(svc.id);
+                    
+                    if (isArchived) {
+                        showToast("⚠️ Este servicio está ARCHIVADO.", true);
+                    } else if (isLocked) {
+                        // Animación de temblor
+                        card.classList.remove('shake');
+                        void card.offsetWidth; // Forzar reflow
+                        card.classList.add('shake');
+                        showToast(`🔒 Bloqueado: ${lockedMsg}`, true);
+                    } else {
+                        openEditor(svc.id);
+                    }
                };
+
+                const statusClass = isArchived ? 'bg-gray-100 text-gray-500 border-gray-200' : 'bg-blue-50 text-blue-600 border-blue-100';
+
                card.innerHTML = `
                    <div class="flex items-center gap-4 min-w-0 text-left flex-1">
                        <div class="w-16 h-16 rounded-2xl flex flex-col items-center justify-center shrink-0 shadow-sm border border-slate-100 ${isArchived ? 'bg-gray-200 text-gray-400' : (svc.provider === 'homeserve' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600')}">
@@ -365,7 +406,6 @@
                        <div class="min-w-0 text-left flex-1">
                            <div class="flex items-center gap-2 text-left">
                                <h3 class="font-black text-slate-800 truncate uppercase text-lg leading-tight text-left">${name}</h3>
-                                <span class="text-[8px] font-black px-2 py-0.5 rounded-full border ${statusClass} text-left">${statusLabel}</span>
                            </div>
                            <p class="text-xs text-slate-400 truncate italic mt-0.5 text-left">${fullAddr}</p>
                            <div class="flex flex-wrap gap-2 mt-2 text-left">
@@ -379,9 +419,9 @@
                        ${badgeEstado}
                        
                        ${!isArchived ? `
-                        <div class="hidden group-hover:flex items-center gap-2 transition-all text-left ml-2 border-l border-slate-100 pl-4">
-                            <a href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(fullAddr)}" target="_blank" class="action-btn p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-600 shadow-sm text-left"><i data-lucide="map" class="w-5 h-5 text-left"></i></a>
-                            ${phone ? `<a href="https://wa.me/34${phone}" target="_blank" class="action-btn p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-emerald-600 shadow-sm text-left"><i data-lucide="message-square" class="w-5 h-5 text-left"></i></a>` : ''}
+                        <div class="hidden group-hover:flex items-center gap-2 transition-all text-left ml-2 border-l border-slate-200 pl-4">
+                            <a href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(fullAddr)}" target="_blank" class="action-btn p-2.5 rounded-xl bg-white text-slate-400 hover:text-blue-600 shadow-sm border border-slate-100 text-left"><i data-lucide="map" class="w-5 h-5 text-left"></i></a>
+                            ${phone ? `<a href="https://wa.me/34${phone}" target="_blank" class="action-btn p-2.5 rounded-xl bg-white text-slate-400 hover:text-emerald-600 shadow-sm border border-slate-100 text-left"><i data-lucide="message-square" class="w-5 h-5 text-left"></i></a>` : ''}
                        </div>` : ''}
                    </div>`;
                container.appendChild(card);
@@ -403,15 +443,14 @@
            document.getElementById('impScrapedId').value = id;
            document.getElementById('impName').value = raw['Nombre Cliente'] || raw['CLIENTE'] || "S/N";
            
-            // Permite editar telefono
            const rawPhone = raw['Teléfono'] || raw['TELEFONOS'] || raw['TELEFONO'] || "";
-            document.getElementById('impPhone').value = rawPhone.match(/[6789]\d{8}/)?.[0] || rawPhone;
+            document.getElementById('impPhone').value = rawPhone.match(/[6789]\d{8}/)?.[0] || "";
            
            const addr = raw['Dirección'] || raw['DOMICILIO'] || "";
            const pop = raw['Población'] || raw['POBLACION-PROVINCIA'] || "";
            document.getElementById('impAddress').value = `${addr} ${pop}`.trim();
            document.getElementById('impCP').value = raw['Código Postal'] || raw['C.P.'] || "";
-            document.getElementById('impDesc').value = raw['Descripción'] || raw['DESCRIPCION'] || "";
+            document.getElementById('impDesc').value = raw['Descripción'] || "";
            
            const isUrgent = raw['Urgente'] === 'Sí' || raw['Urgente'] === 'true' || raw['URGENTE'] === 'SI';
            document.getElementById('impUrgent').value = isUrgent.toString();
@@ -462,7 +501,6 @@
            return res.ok;
        }

-        // CAMBIO 2: Guardar Borrador ahora cierra el modal.
        async function saveDraftChanges(e) {
            const id = document.getElementById('impScrapedId').value;
            const btn = e.currentTarget;
@@ -471,7 +509,7 @@
                const ok = await saveFormToDB(id, getFormPayload());
                if(ok) { 
                    showToast("✅ Cambios guardados correctamente"); 
-                    closeModal(); // Cierra el modal
+                    closeModal(); 
                    loadInbox(); 
                } 
                else { showToast("❌ Error al guardar", true); }
@@ -479,7 +517,6 @@
            finally { btn.disabled = false; }
        }

-        // CAMBIO 3: Traspaso Manual bloquea si no hay operario asignado
        async function handleFinalImport(event) {
            event.preventDefault();
            const btn = event.submitter;
@@ -488,7 +525,6 @@
            const id = document.getElementById('impScrapedId').value;
            const payload = getFormPayload();
            
-            // VALIDACIÓN: ¿Hay operario seleccionado?
            if (!payload.assigned_to) {
                showToast("⚠️ ERROR: Selecciona un operario para hacer el traspaso manual.", true);
                return;