marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar configuracion.html

Browse Source
This commit is contained in:
marsalva
2026-02-20 14:22:32 +00:00
parent 01d59685ec
commit 36c91e10ff
1 changed files with 227 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
configuracion.html
View File

@@ -11,11 +11,12 @@
.fade-in { animation: fadeIn 0.3s ease-in-out; }
.scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
/* Toggle Switch PRO - CORREGIDO */
.toggle-checkbox:checked { transform: translateX(100%); border-color: #2563eb; }
.toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
.toggle-checkbox { top: 0; left: 0; z-index: 10; transition: all 0.3s ease; border-color: #cbd5e1; }
.toggle-label { background-color: #e2e8f0; transition: all 0.3s ease; cursor: pointer; }
.keyword-tag { animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex">
@@ -40,7 +41,7 @@
<i data-lucide="message-circle" class="inline w-4 h-4 mr-1"></i> WhatsApp
</button>
<button onclick="showTab('providers')" id="tab-providers" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
<i data-lucide="truck" class="inline w-4 h-4 mr-1"></i> Proveedores
<i data-lucide="truck" class="inline w-4 h-4 mr-1"></i> Proveedores e IA
</button>
<button onclick="showTab('portal')" id="tab-portal" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-100 transition whitespace-nowrap">
<i data-lucide="globe" class="inline w-4 h-4 mr-1"></i> Portal Cliente
@@ -51,7 +52,7 @@
</div>
</div>
<div class="flex-1 overflow-hidden p-6 bg-gray-50">
<div class="flex-1 overflow-y-auto scroller p-6 bg-gray-50">
<div id="view-templates" class="tab-content h-full fade-in flex flex-col md:flex-row gap-6">
<div class="w-full md:w-1/3 bg-white rounded-xl shadow border border-gray-100 overflow-hidden flex flex-col">
@@ -83,7 +84,7 @@
</div>
</div>
<div id="view-whatsapp" class="tab-content hidden h-full fade-in overflow-y-auto scroller pb-10">
<div id="view-whatsapp" class="tab-content hidden h-full fade-in pb-10">
<div class="max-w-5xl mx-auto mt-6">
<div class="mb-8">
<h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
@@ -212,66 +213,83 @@
</div>
<div id="view-providers" class="tab-content hidden h-full fade-in">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-10">
<h2 class="text-2xl font-bold text-gray-800">Conexión con Aseguradoras</h2>
<p class="text-gray-500 text-sm">Configura tus accesos para que el robot descargue los servicios automáticamente.</p>
</div>
<div class="max-w-6xl mx-auto space-y-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-blue-300 transition-colors">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition">
<i data-lucide="shield" class="w-24 h-24 text-blue-600"></i>
</div>
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-700 font-bold text-xl shadow-sm">M</div>
<div>
<h3 class="font-bold text-gray-800 text-lg">Multiasistencia</h3>
<p class="text-xs text-gray-500">Conexión Web</p>
</div>
</div>
<form onsubmit="saveProviderCreds(event, 'multiasistencia')" class="space-y-4 relative z-10">
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Usuario / Código</label>
<input type="text" id="user_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Ej: 123456">
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
<input type="password" id="pass_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="••••••••">
</div>
<button type="submit" class="w-full bg-blue-600 text-white font-bold py-2 rounded-lg hover:bg-blue-700 transition shadow-md flex justify-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
</button>
</form>
<div>
<div class="mb-6">
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2"><i data-lucide="key" class="text-blue-600"></i> Accesos Web</h2>
<p class="text-gray-500 text-sm mt-1">Configura tus credenciales para que el robot descargue los servicios automáticamente.</p>
</div>
<div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-red-300 transition-colors">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition">
<i data-lucide="home" class="w-24 h-24 text-red-600"></i>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-blue-300 transition-colors">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center text-blue-700 font-bold text-xl shadow-sm">M</div>
<div>
<h3 class="font-bold text-gray-800 text-lg">Multiasistencia</h3>
<p class="text-xs text-gray-500">Conexión Web</p>
</div>
</div>
<form onsubmit="saveProviderCreds(event, 'multiasistencia')" class="space-y-4 relative z-10">
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Usuario / Código</label>
<input type="text" id="user_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="Ej: 123456">
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
<input type="password" id="pass_multiasistencia" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none" placeholder="••••••••">
</div>
<button type="submit" class="w-full bg-blue-600 text-white font-bold py-2 rounded-lg hover:bg-blue-700 transition shadow-md flex justify-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
</button>
</form>
</div>
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-700 font-bold text-xl shadow-sm">H</div>
<div>
<h3 class="font-bold text-gray-800 text-lg">HomeServe</h3>
<p class="text-xs text-gray-500">Conexión Web</p>
<div class="bg-white rounded-xl shadow border border-gray-200 p-6 relative overflow-hidden group hover:border-red-300 transition-colors">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center text-red-700 font-bold text-xl shadow-sm">H</div>
<div>
<h3 class="font-bold text-gray-800 text-lg">HomeServe</h3>
<p class="text-xs text-gray-500">Conexión Web</p>
</div>
</div>
<form onsubmit="saveProviderCreds(event, 'homeserve')" class="space-y-4 relative z-10">
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Código Proveedor</label>
<input type="text" id="user_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="Ej: P-9999">
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
<input type="password" id="pass_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="••••••••">
</div>
<button type="submit" class="w-full bg-red-600 text-white font-bold py-2 rounded-lg hover:bg-red-700 transition shadow-md flex justify-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
</button>
</form>
</div>
<form onsubmit="saveProviderCreds(event, 'homeserve')" class="space-y-4 relative z-10">
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Código Proveedor</label>
<input type="text" id="user_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="Ej: P-9999">
</div>
<div>
<label class="block text-xs font-bold text-gray-600 mb-1">Contraseña</label>
<input type="password" id="pass_homeserve" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 outline-none" placeholder="••••••••">
</div>
<button type="submit" class="w-full bg-red-600 text-white font-bold py-2 rounded-lg hover:bg-red-700 transition shadow-md flex justify-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Acceso
</button>
</form>
</div>
</div>
<p class="text-center text-xs text-gray-400 mt-8">Tus credenciales se guardan encriptadas y solo se usan para la sincronización automática.</p>
<div class="border-t border-gray-200 pt-10">
<div class="mb-6 flex justify-between items-end">
<div>
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2"><i data-lucide="brain-circuit" class="text-purple-600"></i> Reglas de Asignación Automática (IA)</h2>
<p class="text-gray-500 text-sm mt-1">Configura las palabras clave para que el robot asigne el gremio automáticamente al descargar el servicio.</p>
</div>
</div>
<div class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden">
<div class="p-4 bg-gray-50 border-b border-gray-200 grid grid-cols-12 gap-4 font-bold text-gray-500 text-xs uppercase tracking-wider">
<div class="col-span-3">Gremio Especialista</div>
<div class="col-span-8">Palabras Clave (Separadas por comas)</div>
<div class="col-span-1 text-center">Acción</div>
</div>
<div id="iaRulesList" class="divide-y divide-gray-100">
<p class="text-center text-sm text-gray-400 py-8">Cargando gremios...</p>
</div>
</div>
</div>
</div>
</div>
@@ -283,8 +301,8 @@
</div>
</div>
<div id="view-others" class="tab-content hidden h-full fade-in flex flex-col">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div id="view-others" class="tab-content hidden h-full fade-in flex flex-col pb-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-6xl mx-auto w-full">
<div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
<div class="p-4 bg-gray-50 border-b border-gray-200 shrink-0"><h3 class="font-bold text-gray-700 flex items-center gap-2"><i data-lucide="shield" class="w-4 h-4 text-blue-600"></i> Compañías de Seguros</h3></div>
<div class="p-4 border-b border-gray-100 bg-white"><div class="flex gap-2"><input type="text" id="newCompanyInput" placeholder="Nombre..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500"><button onclick="addCompany()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-xs font-bold transition-colors">Añadir</button></div></div>
@@ -302,6 +320,25 @@
</main>
</div>
<div id="iaModal" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden z-[100] flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden fade-in">
<div class="p-5 border-b bg-gray-50 flex justify-between items-center">
<h3 class="font-bold text-gray-800 text-lg flex items-center gap-2"><i data-lucide="brain-circuit" class="text-purple-600"></i> Reglas IA para <span id="iaModalGuildName" class="text-blue-600"></span></h3>
<button onclick="closeIaModal()" class="text-gray-400 hover:text-red-500"><i data-lucide="x"></i></button>
</div>
<div class="p-6">
<input type="hidden" id="iaModalGuildId">
<label class="block text-sm font-bold text-gray-700 mb-2">Palabras Clave</label>
<p class="text-xs text-gray-500 mb-3">Escribe palabras clave separadas por comas. Si el robot detecta alguna de ellas en la descripción del servicio, lo asignará a este gremio automáticamente.</p>
<textarea id="iaModalKeywords" rows="5" class="w-full border border-gray-300 rounded-xl p-3 text-sm focus:ring-2 focus:ring-purple-500 outline-none" placeholder="Ej: fuga de agua, tubería rota, grifo, desatasco..."></textarea>
</div>
<div class="p-4 border-t bg-gray-50 flex justify-end gap-3">
<button onclick="closeIaModal()" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-bold text-gray-600 hover:bg-gray-100 transition">Cancelar</button>
<button onclick="saveIaRule()" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-bold shadow transition flex items-center gap-2"><i data-lucide="save" class="w-4 h-4"></i> Guardar Regla</button>
</div>
</div>
</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">Msg</span></div>
<script src="js/layout.js"></script>
@@ -309,61 +346,114 @@
<script>
let cachedTemplates = {};
let currentTemplateType = null;
let localGuilds = []; // Guardará los gremios cargados para la IA
document.addEventListener("DOMContentLoaded", () => {
if (!localStorage.getItem("token")) window.location.href = "index.html";
showTab('templates');
loadTemplates();
// Cargar configuración de eventos de WhatsApp al inicio
loadWaSettings();
});
function loadWaSettings() {
// Lee del LocalStorage.
// TODO: En el futuro, cambiar esto por un fetch a la BD (ej. /config/whatsapp)
const getCfg = (key, defaultVal) => {
const val = localStorage.getItem(key);
return val === null ? defaultVal : val === 'true';
};
// ==========================================
// LÓGICA DE INTELIGENCIA ARTIFICIAL (GREMIOS)
// ==========================================
async function loadIaRules() {
const list = document.getElementById('iaRulesList');
list.innerHTML = '<p class="text-center text-sm text-gray-400 py-8"><i data-lucide="loader-2" class="w-6 h-6 animate-spin mx-auto mb-2"></i> Cargando...</p>';
lucide.createIcons();
document.getElementById('cfg_delay').checked = getCfg('wa_delay_enabled', true);
document.getElementById('cfg_evt_welcome').checked = getCfg('wa_evt_welcome', true);
document.getElementById('cfg_evt_date').checked = getCfg('wa_evt_date', true);
document.getElementById('cfg_evt_onway').checked = getCfg('wa_evt_onway', true);
document.getElementById('cfg_evt_finished').checked = getCfg('wa_evt_finished', false);
document.getElementById('cfg_evt_survey').checked = getCfg('wa_evt_survey', false);
}
try {
// 1. Cargamos todos los gremios del usuario
const resGuilds = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const dataGuilds = await resGuilds.json();
async function saveWaSettings() {
// Guarda los valores actuales de los switches
const settings = {
wa_delay_enabled: document.getElementById('cfg_delay').checked,
wa_evt_welcome: document.getElementById('cfg_evt_welcome').checked,
wa_evt_date: document.getElementById('cfg_evt_date').checked,
wa_evt_onway: document.getElementById('cfg_evt_onway').checked,
wa_evt_finished: document.getElementById('cfg_evt_finished').checked,
wa_evt_survey: document.getElementById('cfg_evt_survey').checked
};
if (!dataGuilds.ok || dataGuilds.guilds.length === 0) {
list.innerHTML = '<p class="text-center text-sm text-orange-500 py-8">No tienes gremios creados. Crea gremios en "Otras Configuraciones" primero.</p>';
return;
}
// Guarda en LocalStorage
for (const [key, value] of Object.entries(settings)) {
localStorage.setItem(key, value);
localGuilds = dataGuilds.guilds;
list.innerHTML = '';
// 2. Para cada gremio, mostramos su fila
localGuilds.forEach(g => {
// El array de keywords lo leemos del JSONB de la BD (si existe), si no, un array vacío.
const keywords = Array.isArray(g.ia_keywords) ? g.ia_keywords : [];
const tagsHtml = keywords.length > 0
? keywords.map(kw => `<span class="inline-block bg-purple-100 text-purple-700 text-[10px] font-bold px-2 py-1 rounded-md keyword-tag m-0.5 border border-purple-200">${kw}</span>`).join('')
: '<span class="text-xs text-gray-400 italic">Sin reglas asignadas.</span>';
const row = document.createElement('div');
row.className = "p-4 hover:bg-purple-50/30 transition-colors grid grid-cols-12 gap-4 items-center group";
row.innerHTML = `
<div class="col-span-3 font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="hammer" class="w-4 h-4 text-gray-400 group-hover:text-purple-500 transition-colors"></i> ${g.name}
</div>
<div class="col-span-8 flex flex-wrap items-center gap-1">${tagsHtml}</div>
<div class="col-span-1 text-center">
<button onclick="openIaModal(${g.id}, '${g.name.replace(/'/g, "\\'")}')" class="text-gray-400 hover:text-purple-600 bg-white hover:bg-purple-50 border border-gray-200 hover:border-purple-200 p-2 rounded-lg transition-all shadow-sm">
<i data-lucide="edit-2" class="w-4 h-4"></i>
</button>
</div>
`;
list.appendChild(row);
});
lucide.createIcons();
} catch (e) {
console.error("Error cargando reglas IA:", e);
list.innerHTML = '<p class="text-center text-sm text-red-500 py-8">Error al cargar las reglas de IA.</p>';
}
// TODO: Aquí pondrías la llamada al Backend para guardar en PostgreSQL
/*
await fetch(`${API_URL}/config/whatsapp`, {
method: 'POST',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify(settings)
});
*/
showToast("Ajustes de WhatsApp guardados");
}
function openIaModal(guildId, guildName) {
const guild = localGuilds.find(g => g.id === guildId);
const keywords = Array.isArray(guild.ia_keywords) ? guild.ia_keywords : [];
document.getElementById('iaModalGuildId').value = guildId;
document.getElementById('iaModalGuildName').innerText = guildName;
document.getElementById('iaModalKeywords').value = keywords.join(', ');
document.getElementById('iaModal').classList.remove('hidden');
}
function closeIaModal() {
document.getElementById('iaModal').classList.add('hidden');
}
async function saveIaRule() {
const guildId = document.getElementById('iaModalGuildId').value;
const rawKeywords = document.getElementById('iaModalKeywords').value;
// Limpiamos y convertimos el texto en un array
const keywordsArray = rawKeywords.split(',')
.map(k => k.trim().toLowerCase())
.filter(k => k.length > 0);
try {
// Hacemos el PUT a la nueva ruta que vamos a crear en el servidor
const res = await fetch(`${API_URL}/guilds/${guildId}/ia-rules`, {
method: 'PUT',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ keywords: keywordsArray })
});
if (res.ok) {
showToast("✅ Reglas de IA guardadas correctamente.");
closeIaModal();
loadIaRules(); // Recargamos la lista
} else {
showToast("❌ Error al guardar las reglas.", true);
}
} catch (e) {
showToast("❌ Error de conexión.", true);
}
}
// Modificamos showTab para cargar la IA al entrar a Proveedores
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById(`view-${tabId}`).classList.remove('hidden');
@@ -378,7 +468,44 @@
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
if(tabId === 'whatsapp') { checkWhatsappStatus(); }
if(tabId === 'providers') { loadProviderCredentials(); }
if(tabId === 'providers') {
loadProviderCredentials();
loadIaRules(); // <--- AÑADIDO AQUI
}
}
// ==========================================
// RESTO DE FUNCIONES (INTACTAS)
// ==========================================
function loadWaSettings() {
const getCfg = (key, defaultVal) => {
const val = localStorage.getItem(key);
return val === null ? defaultVal : val === 'true';
};
document.getElementById('cfg_delay').checked = getCfg('wa_delay_enabled', true);
document.getElementById('cfg_evt_welcome').checked = getCfg('wa_evt_welcome', true);
document.getElementById('cfg_evt_date').checked = getCfg('wa_evt_date', true);
document.getElementById('cfg_evt_onway').checked = getCfg('wa_evt_onway', true);
document.getElementById('cfg_evt_finished').checked = getCfg('wa_evt_finished', false);
document.getElementById('cfg_evt_survey').checked = getCfg('wa_evt_survey', false);
}
async function saveWaSettings() {
const settings = {
wa_delay_enabled: document.getElementById('cfg_delay').checked,
wa_evt_welcome: document.getElementById('cfg_evt_welcome').checked,
wa_evt_date: document.getElementById('cfg_evt_date').checked,
wa_evt_onway: document.getElementById('cfg_evt_onway').checked,
wa_evt_finished: document.getElementById('cfg_evt_finished').checked,
wa_evt_survey: document.getElementById('cfg_evt_survey').checked
};
for (const [key, value] of Object.entries(settings)) {
localStorage.setItem(key, value);
}
showToast("Ajustes de WhatsApp guardados");
}
async function loadProviderCredentials() {