From fead43dda8954f7ca6c14220cf55536c2068e504 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sat, 14 Feb 2026 11:31:26 +0000
Subject: [PATCH] Actualizar automatizaciones.html

---
 automatizaciones.html | 136 ++++++++++++++++++++++++------------------
 1 file changed, 77 insertions(+), 59 deletions(-)

diff --git a/automatizaciones.html b/automatizaciones.html
index a5e678f..8b5d788 100644
--- a/automatizaciones.html
+++ b/automatizaciones.html
@@ -33,7 +33,7 @@
                             </h2>
                             <p class="text-sm text-slate-500 mt-1 font-medium">Validación rápida y profesional de expedientes.</p>
                         </div>
-                        <button onclick="loadInbox()" class="bg-white border-2 border-slate-200 hover:border-blue-600 hover:text-blue-600 text-slate-600 px-6 py-2.5 rounded-xl font-bold flex items-center gap-2 transition-all active:scale-95 shadow-sm">
+                        <button onclick="loadInbox()" class="bg-white border-2 border-slate-200 hover:border-blue-600 hover:text-blue-600 text-slate-600 px-6 py-2.5 rounded-xl font-bold flex items-center gap-2 transition-all shadow-sm">
                             <i data-lucide="refresh-cw" class="w-4 h-4"></i> Actualizar
                         </button>
                     </div>
@@ -48,19 +48,17 @@
         <div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-4xl flex flex-col max-h-[95vh] overflow-hidden border border-slate-200 fade-in">
             
             <div class="px-8 pt-6 pb-2 flex justify-between items-start">
-                <div>
-                    <h3 class="text-xl font-black text-slate-800 flex items-center gap-2">
-                        <i data-lucide="zap" class="text-amber-500 fill-amber-500 w-5 h-5"></i> 
-                        Validación de Expediente
-                    </h3>
-                    <div class="flex gap-3 mt-1">
-                        <span id="displayRef" class="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded-lg font-bold border border-slate-200 uppercase">REF: --</span>
-                        <span id="displayCompany" class="text-[10px] bg-blue-50 text-blue-600 px-2 py-0.5 rounded-lg font-bold border border-blue-100 uppercase tracking-tighter truncate max-w-[300px]">--</span>
+                <div class="flex items-center gap-4">
+                    <div id="modalCompanyLogo" class="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 p-2 flex items-center justify-center shadow-sm"></div>
+                    <div>
+                        <h3 class="text-xl font-black text-slate-800 flex items-center gap-2">Validación de Expediente</h3>
+                        <div class="flex gap-3 mt-1">
+                            <span id="displayRef" class="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded-lg font-bold border border-slate-200 uppercase">REF: --</span>
+                            <span id="displayCompany" class="text-[10px] bg-blue-50 text-blue-600 px-2 py-0.5 rounded-lg font-bold border border-blue-100 uppercase tracking-tighter truncate max-w-[300px]">--</span>
+                        </div>
                     </div>
                 </div>
-                <button onclick="closeModal()" class="bg-slate-50 p-2 rounded-full hover:bg-red-50 hover:text-red-500 transition-all">
-                    <i data-lucide="x" class="w-5 h-5"></i>
-                </button>
+                <button onclick="closeModal()" class="bg-slate-50 p-2 rounded-full hover:bg-red-50 hover:text-red-500 transition-all"><i data-lucide="x"></i></button>
             </div>
 
             <form id="importForm" onsubmit="handleFinalImport(event)" class="px-8 py-4 space-y-4 overflow-y-auto no-scrollbar">
@@ -68,16 +66,16 @@
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div class="bg-slate-50/80 p-3 rounded-2xl border border-slate-100 flex items-center gap-3">
-                        <div class="bg-white p-2 rounded-xl shadow-sm text-slate-400"><i data-lucide="user" class="w-4 h-4"></i></div>
+                        <div class="bg-white p-2 rounded-xl shadow-sm text-slate-400"><i data-lucide="user"></i></div>
                         <div class="flex flex-col min-w-0 w-full">
-                            <span class="text-[9px] font-black text-slate-400 uppercase leading-none mb-1">Asegurado</span>
+                            <span class="text-[9px] font-black text-slate-400 uppercase mb-1">Asegurado</span>
                             <input type="text" id="impName" readonly class="bg-transparent border-none p-0 text-sm font-bold text-slate-700 outline-none focus:ring-0 truncate w-full">
                         </div>
                     </div>
                     <div class="bg-slate-50/80 p-3 rounded-2xl border border-slate-100 flex items-center gap-3">
-                        <div class="bg-white p-2 rounded-xl shadow-sm text-emerald-500"><i data-lucide="phone" class="w-4 h-4"></i></div>
+                        <div class="bg-white p-2 rounded-xl shadow-sm text-emerald-500"><i data-lucide="phone"></i></div>
                         <div class="flex flex-col min-w-0 w-full">
-                            <span class="text-[9px] font-black text-slate-400 uppercase leading-none mb-1">Contacto</span>
+                            <span class="text-[9px] font-black text-slate-400 uppercase mb-1">Contacto</span>
                             <input type="text" id="impPhone" readonly class="bg-transparent border-none p-0 text-sm font-black text-emerald-600 outline-none focus:ring-0 w-full">
                         </div>
                     </div>
@@ -86,7 +84,7 @@
                 <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
                     <div class="md:col-span-4 space-y-1">
                         <label class="text-[9px] font-black text-blue-600 uppercase tracking-widest ml-2">Dirección de la Reparación</label>
-                        <input type="text" id="impAddress" required class="w-full border-2 border-slate-100 bg-white px-4 py-2.5 rounded-2xl text-sm font-medium outline-none focus:border-blue-500 transition-all shadow-sm">
+                        <input type="text" id="impAddress" required class="w-full border-2 border-slate-100 bg-white px-4 py-2.5 rounded-2xl text-sm font-medium outline-none focus:border-blue-500 shadow-sm">
                     </div>
                     <div class="space-y-1">
                         <label class="text-[9px] font-black text-blue-600 uppercase tracking-widest text-center block">C.P.</label>
@@ -94,16 +92,16 @@
                     </div>
                 </div>
 
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-[1.8rem] border-2 border-blue-50 bg-blue-50/20">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-[1.8rem] border-2 border-blue-50 bg-blue-50/20 shadow-sm">
                     <div class="space-y-1">
                         <label class="text-[9px] font-black text-blue-600 uppercase tracking-widest ml-2">Gremio Especialista *</label>
-                        <select id="impGuild" required onchange="loadOpsForGuild(this.value)" class="w-full border border-blue-100 bg-white px-3 py-2 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                        <select id="impGuild" required onchange="loadOpsForGuild(this.value)" class="w-full border border-blue-100 bg-white px-3 py-2 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
                             <option value="">-- Elegir Especialidad --</option>
                         </select>
                     </div>
                     <div class="space-y-1">
                         <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-2">Asignación Operario</label>
-                        <select id="impOperator" class="w-full border border-blue-100 bg-white px-3 py-2 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                        <select id="impOperator" class="w-full border border-blue-100 bg-white px-3 py-2 rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
                             <option value="">-- Automática --</option>
                         </select>
                     </div>
@@ -116,11 +114,11 @@
                     </div>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div>
-                            <label class="text-[9px] font-black text-amber-600 uppercase tracking-widest ml-2 mb-1 block">Notas Internas</label>
+                            <label class="text-[9px] font-black text-amber-600 uppercase ml-2 mb-1 block">Notas Internas</label>
                             <textarea id="impNotesInt" rows="1" class="w-full border border-amber-100 bg-amber-50/30 px-3 py-2 rounded-xl text-xs outline-none focus:bg-white"></textarea>
                         </div>
                         <div>
-                            <label class="text-[9px] font-black text-blue-500 uppercase tracking-widest ml-2 mb-1 block">Notas Cliente</label>
+                            <label class="text-[9px] font-black text-blue-500 uppercase ml-2 mb-1 block">Notas Cliente</label>
                             <textarea id="impNotesExt" rows="1" class="w-full border border-blue-100 bg-blue-50/30 px-3 py-2 rounded-xl text-xs outline-none focus:bg-white"></textarea>
                         </div>
                     </div>
@@ -129,7 +127,7 @@
                 <div class="flex items-center gap-3 pt-4 border-t">
                     <div class="flex-1 bg-slate-100 p-1.5 rounded-2xl flex items-center gap-2">
                         <div class="bg-white px-4 py-2 rounded-xl shadow-sm">
-                            <span class="text-[8px] font-black text-slate-400 uppercase block mb-1">Urgencia</span>
+                            <span class="text-[8px] font-black text-slate-400 uppercase block mb-1 leading-none">Urgencia</span>
                             <select id="impUrgent" class="border-none bg-transparent text-xs font-black text-slate-700 focus:ring-0 p-0 cursor-pointer">
                                 <option value="false">Normal</option>
                                 <option value="true">🚨 URGENTE</option>
@@ -152,34 +150,52 @@
         let allGuilds = [];
         let scrapedData = [];
 
+        // DICCIONARIO DE LOGOS
+      const companyLogos = {
+    'REPSOL': 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Logo_Repsol.svg/1200px-Logo_Repsol.svg.png',
+    'MUTUA': 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Mutua_Madrile%C3%B1a_Logo.svg/2560px-Mutua_Madrile%C3%B1a_Logo.svg.png',
+    'ALLIANZ': 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Allianz_logo.svg/2560px-Allianz_logo.svg.png',
+    'CASER': 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Caser_Seguros_logo.svg/2560px-Caser_Seguros_logo.svg.png',
+    'SEGURCAIXA': 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Logo_SegurCaixa_Adeslas.svg/2560px-Logo_SegurCaixa_Adeslas.svg.png',
+    'AXA': 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/AXA_Logo.svg/1200px-AXA_Logo.svg.png',
+    'LINEA DIRECTA': 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Logotipo_L%C3%ADnea_Directa.svg/2560px-Logotipo_L%C3%ADnea_Directa.svg.png',
+    'RGA': 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Logotipo_Seguros_RGA.svg/2560px-Logotipo_Seguros_RGA.svg.png',
+    'PELAYO': 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Logotipo_Pelayo_Seguros.svg/2560px-Logotipo_Pelayo_Seguros.svg.png',
+    'SABADELL': 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Banco_Sabadell_logo.svg/2560px-Banco_Sabadell_logo.svg.png',
+    'SANTANDER': 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Logotipo_Santander.svg/2560px-Logotipo_Santander.svg.png',
+    'DEFAULT': 'https://cdn-icons-png.flaticon.com/512/2875/2875438.png'
+};
+
+        function getLogoUrl(companyName) {
+            if (!companyName) return companyLogos['DEFAULT'];
+            const name = companyName.toUpperCase();
+            for (const key in companyLogos) {
+                if (name.includes(key)) return companyLogos[key];
+            }
+            return companyLogos['DEFAULT'];
+        }
+
         document.addEventListener("DOMContentLoaded", async () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
-            setTimeout(async () => {
-                await loadGuilds();
-                await loadInbox();
-            }, 200);
+            setTimeout(async () => { await loadGuilds(); await loadInbox(); }, 200);
         });
 
         async function loadGuilds() {
-            try {
-                const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                allGuilds = data.guilds || [];
-                const sel = document.getElementById('impGuild');
-                sel.innerHTML = '<option value="">-- Seleccionar Gremio --</option>';
-                allGuilds.forEach(g => sel.innerHTML += `<option value="${g.id}">${g.name}</option>`);
-            } catch(e) {}
+            const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            allGuilds = data.guilds || [];
+            const sel = document.getElementById('impGuild');
+            sel.innerHTML = '<option value="">-- Seleccionar Gremio --</option>';
+            allGuilds.forEach(g => sel.innerHTML += `<option value="${g.id}">${g.name}</option>`);
         }
 
         async function loadOpsForGuild(guildId) {
             const sel = document.getElementById('impOperator');
             if(!guildId) { sel.innerHTML = '<option value="">-- Automática --</option>'; return; }
-            try {
-                const res = await fetch(`${API_URL}/operators?guild_id=${guildId}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                sel.innerHTML = '<option value="">-- Automática (Por defecto) --</option>';
-                data.operators.forEach(op => sel.innerHTML += `<option value="${op.id}">${op.full_name}</option>`);
-            } catch(e) {}
+            const res = await fetch(`${API_URL}/operators?guild_id=${guildId}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            sel.innerHTML = '<option value="">-- Automática (Por defecto) --</option>';
+            data.operators.forEach(op => sel.innerHTML += `<option value="${op.id}">${op.full_name}</option>`);
         }
 
         async function loadInbox() {
@@ -200,35 +216,39 @@
 
                 scrapedData.forEach(svc => {
                     const raw = svc.raw_data || {};
-                    const name = raw['Nombre Cliente'] || raw['CLIENTE'] || "";
+                    const name = raw['Nombre Cliente'] || raw['CLIENTE'] || "S/N";
                     const addr = raw['Dirección'] || raw['DOMICILIO'] || "";
                     const pop = raw['Población'] || raw['POBLACION-PROVINCIA'] || "";
                     const fullAddr = `${addr} ${pop}`.trim();
-                    const isBlocked = (!name || name.toUpperCase().includes('SIN NOMBRE') || !addr);
+                    const companyName = raw['Compañía'] || raw['COMPAÑIA'] || "";
+                    const logoUrl = getLogoUrl(companyName); //
                     const phone = (raw['Teléfono'] || raw['TELEFONOS'] || raw['TELEFONO'] || "").match(/[6789]\d{8}/)?.[0] || "";
+                    const isBlocked = (!name || name.toUpperCase().includes('SIN NOMBRE') || !addr);
 
                     const card = document.createElement('div');
                     card.className = `bg-white p-5 rounded-2xl border ${isBlocked ? 'opacity-50' : 'shadow-sm hover:border-blue-300'} flex items-center justify-between transition-all group fade-in`;
                     card.innerHTML = `
                         <div class="flex items-center gap-6 min-w-0">
-                            <div class="w-14 h-14 rounded-2xl flex flex-col items-center justify-center shrink-0 ${isBlocked ? 'bg-slate-200' : (svc.provider === 'homeserve' ? 'bg-red-50 text-red-600' : 'bg-blue-50 text-blue-600')}">
-                                <span class="text-[8px] font-black uppercase tracking-widest">${svc.provider === 'multiasistencia' ? 'MULTI' : 'HOME'}</span>
-                                <i data-lucide="${isBlocked ? 'lock' : 'file-text'}" class="w-5 h-5 mt-0.5"></i>
+                            <div class="w-14 h-14 rounded-2xl bg-slate-50 border border-slate-100 p-2 flex items-center justify-center shrink-0 shadow-inner">
+                                <img src="${logoUrl}" class="max-w-full max-h-full object-contain filter drop-shadow-sm">
                             </div>
                             <div class="min-w-0">
-                                <h3 class="font-black text-slate-800 truncate uppercase text-lg">${isBlocked ? 'Expediente Bloqueado' : name}</h3>
+                                <div class="flex items-center gap-2">
+                                    <h3 class="font-black text-slate-800 truncate uppercase text-lg">${isBlocked ? 'Bloqueado' : name}</h3>
+                                    <span class="text-[8px] font-black bg-slate-100 px-2 py-0.5 rounded-full border">${svc.provider === 'multiasistencia' ? 'MULTI' : 'HOME'}</span>
+                                </div>
                                 <p class="text-xs text-slate-400 truncate italic">${isBlocked ? 'Pendiente de liberación' : fullAddr}</p>
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
                             ${!isBlocked ? `
-                            <div class="hidden group-hover:flex items-center gap-1 pr-4 border-r mr-2">
-                                <a href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(fullAddr)}" target="_blank" class="p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-600 transition-all shadow-sm"><i data-lucide="map" class="w-5 h-5"></i></a>
+                            <div class="hidden group-hover:flex items-center gap-1 pr-4 border-r mr-2 transition-all">
+                                <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"><i data-lucide="map" class="w-5 h-5"></i></a>
                                 ${phone ? `
-                                    <a href="https://wa.me/34${phone}" target="_blank" class="p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-emerald-600 transition-all shadow-sm"><i data-lucide="message-square" class="w-5 h-5"></i></a>
-                                    <a href="tel:${phone}" class="p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-600 transition-all shadow-sm"><i data-lucide="phone-call" class="w-5 h-5"></i></a>
+                                    <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"><i data-lucide="message-square" class="w-5 h-5"></i></a>
+                                    <a href="tel:${phone}" class="action-btn p-2.5 rounded-xl bg-slate-50 text-slate-400 hover:text-blue-600 shadow-sm"><i data-lucide="phone-call" class="w-5 h-5"></i></a>
                                 ` : ''}
-                                <button onclick="openEditor(${svc.id})" class="bg-blue-600 text-white p-4 rounded-2xl shadow-lg active:scale-90 transition-all ml-2"><i data-lucide="edit-3" class="w-6 h-6"></i></button>
+                                <button onclick="openEditor(${svc.id})" class="bg-blue-600 text-white p-4 rounded-2xl shadow-lg active:scale-90 ml-2 transition-all"><i data-lucide="edit-3" class="w-6 h-6"></i></button>
                             </div>` : '<i data-lucide="shield-off" class="text-slate-300 mx-4"></i>'}
                         </div>`;
                     container.appendChild(card);
@@ -241,22 +261,22 @@
             const svc = scrapedData.find(s => s.id === id);
             if(!svc) return;
             const raw = svc.raw_data;
+            const companyName = raw['Compañía'] || raw['COMPAÑIA'] || "";
+            const logoUrl = getLogoUrl(companyName); //
 
             // ACTUALIZACIÓN DE CABECERA
             document.getElementById('displayRef').innerText = `REF: ${svc.service_ref}`;
-            document.getElementById('displayCompany').innerText = raw['Compañía'] || raw['COMPAÑIA'] || svc.provider.toUpperCase();
+            document.getElementById('displayCompany').innerText = companyName || svc.provider.toUpperCase();
+            document.getElementById('modalCompanyLogo').innerHTML = `<img src="${logoUrl}" class="max-w-full max-h-full object-contain">`;
 
             // RELLENAR FORMULARIO
             document.getElementById('impScrapedId').value = id;
             document.getElementById('impName').value = raw['Nombre Cliente'] || raw['CLIENTE'] || "";
-            
             const rawPhone = raw['Teléfono'] || raw['TELEFONOS'] || raw['TELEFONO'] || "";
             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'] || "";
             document.getElementById('impDesc').value = raw['Descripción'] || "";
             document.getElementById('impUrgent').value = (raw['Urgente'] === 'Sí' || raw['Urgente'] === 'true').toString();
@@ -264,8 +284,6 @@
             document.getElementById('impNotesInt').value = "";
             document.getElementById('impNotesExt').value = "";
             document.getElementById('impGuild').value = "";
-            document.getElementById('impOperator').innerHTML = '<option value="">-- Automática --</option>';
-
             document.getElementById('importModal').classList.remove('hidden');
             lucide.createIcons();
         }
@@ -299,7 +317,7 @@
                 });
                 const result = await res.json();
                 if(result.ok) {
-                    showToast("✅ Traspasado con éxito");
+                    showToast("✅ Expediente traspasado con éxito");
                     closeModal();
                     loadInbox();
                 } else { showToast("❌ Error al importar", true); }