Actualizar configuracion.html

This commit is contained in:
2026-02-22 18:32:08 +00:00
parent 3f130ce7d5
commit 5bd3fdd7ac

View File

@@ -8,6 +8,11 @@
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style> <style>
:root {
--primary: #2563eb;
--secondary: #f59e0b;
--app-bg: #f4f7f9;
}
.fade-in { animation: fadeIn 0.3s ease-in-out; } .fade-in { animation: fadeIn 0.3s ease-in-out; }
.scroller::-webkit-scrollbar { width: 6px; } .scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; } .scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
@@ -17,6 +22,9 @@
.toggle-label { background-color: #e2e8f0; transition: all 0.3s ease; cursor: pointer; } .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); } .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; } } @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.var-btn { padding: 0.25rem 0.5rem; background-color: white; border: 1px solid #e2e8f0; border-radius: 0.25rem; font-family: monospace; font-size: 0.75rem; font-weight: 500; color: #4b5563; transition: all 0.2s; }
.var-btn:hover { border-color: #2563eb; color: #2563eb; }
</style> </style>
</head> </head>
<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex"> <body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex">
@@ -46,6 +54,9 @@
<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"> <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 <i data-lucide="globe" class="inline w-4 h-4 mr-1"></i> Portal Cliente
</button> </button>
<button onclick="showTab('app-operario')" id="tab-app-operario" 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="smartphone" class="inline w-4 h-4 mr-1"></i> App Operario
</button>
<button onclick="showTab('others')" id="tab-others" 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"> <button onclick="showTab('others')" id="tab-others" 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="sliders" class="inline w-4 h-4 mr-1"></i> Otras Configuraciones <i data-lucide="sliders" class="inline w-4 h-4 mr-1"></i> Otras Configuraciones
</button> </button>
@@ -398,6 +409,75 @@
</div> </div>
</div> </div>
<div id="view-app-operario" class="tab-content hidden h-full fade-in pb-10">
<div class="max-w-4xl mx-auto mt-6">
<div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 space-y-8">
<div class="flex items-center gap-4 border-b border-slate-100 pb-4">
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center shrink-0">
<i data-lucide="palette" class="w-6 h-6"></i>
</div>
<div>
<h3 class="text-xl font-black text-slate-800 tracking-tight">Personalización de la App</h3>
<p class="text-sm text-slate-500 font-medium">Configura los colores corporativos para el menú y las fichas de los operarios.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div class="space-y-6">
<div>
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Color Principal (Cabeceras y Botones)</label>
<div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
<input type="color" id="color-primary" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
<input type="text" id="color-primary-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#2563EB">
</div>
</div>
<div>
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Color Secundario (Acentos y Badges)</label>
<div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
<input type="color" id="color-secondary" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
<input type="text" id="color-secondary-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#F59E0B">
</div>
</div>
<div>
<label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-3">Fondo de Pantalla (App)</label>
<div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-200">
<input type="color" id="color-bg" class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
<input type="text" id="color-bg-hex" class="flex-1 bg-transparent text-sm font-mono font-bold outline-none uppercase" placeholder="#F4F7F9">
</div>
</div>
</div>
<div class="flex flex-col items-center">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Vista Previa en Vivo</p>
<div id="app-preview" class="w-64 h-[400px] border-[6px] border-slate-800 rounded-[2.5rem] shadow-2xl overflow-hidden relative bg-gray-100 scale-90 origin-top">
<div id="prev-header" class="h-20 w-full p-4 text-white" style="background-color: #2563eb;">
<div class="w-8 h-2 bg-white/30 rounded mb-2"></div>
<div class="w-20 h-4 bg-white rounded"></div>
</div>
<div class="p-4 grid grid-cols-2 gap-2">
<div class="h-16 bg-white rounded-xl border border-slate-200 shadow-sm flex items-center justify-center">
<div id="prev-icon" class="w-6 h-6 rounded-lg" style="background-color: #f59e0b;"></div>
</div>
<div class="h-16 bg-white rounded-xl border border-slate-200 shadow-sm"></div>
</div>
<div class="absolute bottom-6 left-4 right-4">
<div id="prev-btn" class="h-10 w-full rounded-xl shadow-md" style="background-color: #2563eb;"></div>
</div>
</div>
</div>
</div>
<div class="pt-6 flex justify-end">
<button onclick="saveAppConfig()" id="btnSaveApp" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-4 px-10 rounded-2xl shadow-xl shadow-blue-500/30 transition-all uppercase tracking-widest text-xs flex items-center gap-2 active:scale-95">
<i data-lucide="save" class="w-5 h-5"></i> Aplicar a todos los dispositivos
</button>
</div>
</div>
</div>
</div>
<div id="view-others" class="tab-content hidden h-full fade-in flex flex-col pb-10"> <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="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="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
@@ -439,7 +519,6 @@
<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> <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> <script src="js/layout.js"></script>
<style>.var-btn { @apply px-2 py-1 bg-white border border-gray-200 rounded text-xs font-mono font-medium text-gray-600 hover:border-blue-400 hover:text-blue-600 transition shadow-sm; }</style>
<script> <script>
let cachedTemplates = {}; let cachedTemplates = {};
let currentTemplateType = null; let currentTemplateType = null;
@@ -452,6 +531,33 @@
loadWaSettings(); loadWaSettings();
}); });
// ==========================================
// LÓGICA DE NAVEGACIÓN Y TABS
// ==========================================
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById(`view-${tabId}`).classList.remove('hidden');
document.querySelectorAll('.tab-btn').forEach(el => {
el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
el.classList.add('text-gray-500', 'font-medium');
});
const btn = document.getElementById(`tab-${tabId}`);
if(btn) {
btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
btn.classList.remove('text-gray-500', 'font-medium');
}
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
if(tabId === 'whatsapp') { checkWhatsappStatus(); }
if(tabId === 'portal') { loadPortalConfig(); }
if(tabId === 'app-operario') { loadAppConfig(); }
if(tabId === 'providers') {
loadProviderCredentials();
loadIaRules();
}
}
// ========================================== // ==========================================
// LÓGICA DE INTELIGENCIA ARTIFICIAL (GREMIOS) // LÓGICA DE INTELIGENCIA ARTIFICIAL (GREMIOS)
// ========================================== // ==========================================
@@ -474,7 +580,6 @@
localGuilds.forEach(g => { localGuilds.forEach(g => {
const keywords = Array.isArray(g.ia_keywords) ? g.ia_keywords : []; const keywords = Array.isArray(g.ia_keywords) ? g.ia_keywords : [];
const tagsHtml = keywords.length > 0 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('') ? 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>'; : '<span class="text-xs text-gray-400 italic">Sin reglas asignadas.</span>';
@@ -494,9 +599,7 @@
`; `;
list.appendChild(row); list.appendChild(row);
}); });
lucide.createIcons(); lucide.createIcons();
} catch (e) { } catch (e) {
console.error("Error cargando reglas IA:", 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>'; list.innerHTML = '<p class="text-center text-sm text-red-500 py-8">Error al cargar las reglas de IA.</p>';
@@ -506,77 +609,113 @@
function openIaModal(guildId, guildName) { function openIaModal(guildId, guildName) {
const guild = localGuilds.find(g => g.id === guildId); const guild = localGuilds.find(g => g.id === guildId);
const keywords = Array.isArray(guild.ia_keywords) ? guild.ia_keywords : []; const keywords = Array.isArray(guild.ia_keywords) ? guild.ia_keywords : [];
document.getElementById('iaModalGuildId').value = guildId; document.getElementById('iaModalGuildId').value = guildId;
document.getElementById('iaModalGuildName').innerText = guildName; document.getElementById('iaModalGuildName').innerText = guildName;
document.getElementById('iaModalKeywords').value = keywords.join(', '); document.getElementById('iaModalKeywords').value = keywords.join(', ');
document.getElementById('iaModal').classList.remove('hidden'); document.getElementById('iaModal').classList.remove('hidden');
} }
function closeIaModal() { function closeIaModal() { document.getElementById('iaModal').classList.add('hidden'); }
document.getElementById('iaModal').classList.add('hidden');
}
async function saveIaRule() { async function saveIaRule() {
const guildId = document.getElementById('iaModalGuildId').value; const guildId = document.getElementById('iaModalGuildId').value;
const rawKeywords = document.getElementById('iaModalKeywords').value; const rawKeywords = document.getElementById('iaModalKeywords').value;
const keywordsArray = rawKeywords.split(',').map(k => k.trim().toLowerCase()).filter(k => k.length > 0);
const keywordsArray = rawKeywords.split(',')
.map(k => k.trim().toLowerCase())
.filter(k => k.length > 0);
try { try {
const res = await fetch(`${API_URL}/guilds/${guildId}/ia-rules`, { const res = await fetch(`${API_URL}/guilds/${guildId}/ia-rules`, {
method: 'PUT', method: 'PUT', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ keywords: keywordsArray }) body: JSON.stringify({ keywords: keywordsArray })
}); });
if (res.ok) { if (res.ok) {
showToast("✅ Reglas de IA guardadas correctamente."); showToast("✅ Reglas de IA guardadas correctamente.");
closeIaModal(); closeIaModal();
loadIaRules(); loadIaRules();
} else { } else { showToast("❌ Error al guardar las reglas.", true); }
showToast("❌ Error al guardar las reglas.", true); } catch (e) { showToast("❌ Error de conexión.", true); }
}
// ==========================================
// LÓGICA PORTAL OPERARIO (COLORES)
// ==========================================
['primary', 'secondary', 'bg'].forEach(type => {
const picker = document.getElementById(`color-${type}`);
const text = document.getElementById(`color-${type}-hex`);
if(picker && text) {
picker.addEventListener('input', (e) => {
text.value = e.target.value.toUpperCase();
updateAppPreview();
});
text.addEventListener('input', (e) => {
if(/^#[0-9A-F]{6}$/i.test(e.target.value)) {
picker.value = e.target.value;
updateAppPreview();
}
});
}
});
function updateAppPreview() {
const p = document.getElementById('color-primary').value;
const s = document.getElementById('color-secondary').value;
const b = document.getElementById('color-bg').value;
document.getElementById('prev-header').style.backgroundColor = p;
document.getElementById('prev-icon').style.backgroundColor = s;
document.getElementById('prev-btn').style.backgroundColor = p;
document.getElementById('app-preview').style.backgroundColor = b;
}
async function loadAppConfig() {
try {
const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if (data.ok && data.config && data.config.app_settings) {
const s = data.config.app_settings;
document.getElementById('color-primary').value = s.primary || "#2563EB";
document.getElementById('color-primary-hex').value = s.primary || "#2563EB";
document.getElementById('color-secondary').value = s.secondary || "#F59E0B";
document.getElementById('color-secondary-hex').value = s.secondary || "#F59E0B";
document.getElementById('color-bg').value = s.bg || "#F4F7F9";
document.getElementById('color-bg-hex').value = s.bg || "#F4F7F9";
updateAppPreview();
} }
} catch (e) { } catch (e) { console.error("Error cargando colores"); }
showToast("❌ Error de conexión.", true);
}
} }
function showTab(tabId) { async function saveAppConfig() {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden')); const btn = document.getElementById('btnSaveApp');
document.getElementById(`view-${tabId}`).classList.remove('hidden'); const original = btn.innerHTML;
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Aplicando...';
document.querySelectorAll('.tab-btn').forEach(el => { lucide.createIcons();
el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
el.classList.add('text-gray-500', 'font-medium');
});
const btn = document.getElementById(`tab-${tabId}`);
btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
btn.classList.remove('text-gray-500', 'font-medium');
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); } const settings = {
if(tabId === 'whatsapp') { checkWhatsappStatus(); } primary: document.getElementById('color-primary').value,
if(tabId === 'portal') { loadPortalConfig(); } // CARGAR DATOS DEL PORTAL secondary: document.getElementById('color-secondary').value,
if(tabId === 'providers') { bg: document.getElementById('color-bg').value
loadProviderCredentials(); };
loadIaRules(); try {
} const res = await fetch(`${API_URL}/config/company`, {
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ app_settings: settings })
});
if (res.ok) {
showToast("✅ Colores de la App actualizados");
localStorage.setItem('app_theme', JSON.stringify(settings));
}
} catch (e) { showToast("Error al guardar", true); }
finally { btn.innerHTML = original; lucide.createIcons(); }
} }
// ==========================================
// LÓGICA WHATSAPP
// ==========================================
async function loadWaSettings() { async function loadWaSettings() {
try { try {
const res = await fetch(`${API_URL}/whatsapp/settings`, { const res = await fetch(`${API_URL}/whatsapp/settings`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json(); const data = await res.json();
const s = data.settings || {}; const s = data.settings || {};
document.getElementById('cfg_delay').checked = s.wa_delay_enabled !== false; document.getElementById('cfg_delay').checked = s.wa_delay_enabled !== false;
document.getElementById('cfg_evt_welcome').checked = s.wa_evt_welcome || false; document.getElementById('cfg_evt_welcome').checked = s.wa_evt_welcome || false;
document.getElementById('cfg_evt_assigned').checked = s.wa_evt_assigned || false; // NUEVO document.getElementById('cfg_evt_assigned').checked = s.wa_evt_assigned || false;
document.getElementById('cfg_evt_date').checked = s.wa_evt_date || false; document.getElementById('cfg_evt_date').checked = s.wa_evt_date || false;
document.getElementById('cfg_evt_onway').checked = s.wa_evt_onway || false; document.getElementById('cfg_evt_onway').checked = s.wa_evt_onway || false;
document.getElementById('cfg_evt_finished').checked = s.wa_evt_finished || false; document.getElementById('cfg_evt_finished').checked = s.wa_evt_finished || false;
@@ -588,61 +727,30 @@
const settings = { const settings = {
wa_delay_enabled: document.getElementById('cfg_delay').checked, wa_delay_enabled: document.getElementById('cfg_delay').checked,
wa_evt_welcome: document.getElementById('cfg_evt_welcome').checked, wa_evt_welcome: document.getElementById('cfg_evt_welcome').checked,
wa_evt_assigned: document.getElementById('cfg_evt_assigned').checked, // NUEVO wa_evt_assigned: document.getElementById('cfg_evt_assigned').checked,
wa_evt_date: document.getElementById('cfg_evt_date').checked, wa_evt_date: document.getElementById('cfg_evt_date').checked,
wa_evt_onway: document.getElementById('cfg_evt_onway').checked, wa_evt_onway: document.getElementById('cfg_evt_onway').checked,
wa_evt_finished: document.getElementById('cfg_evt_finished').checked, wa_evt_finished: document.getElementById('cfg_evt_finished').checked,
wa_evt_survey: document.getElementById('cfg_evt_survey').checked wa_evt_survey: document.getElementById('cfg_evt_survey').checked
}; };
try { try {
const res = await fetch(`${API_URL}/whatsapp/settings`, { const res = await fetch(`${API_URL}/whatsapp/settings`, {
method: 'POST', method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify(settings) body: JSON.stringify(settings)
}); });
if (res.ok) showToast("✅ Ajustes de WhatsApp guardados"); if (res.ok) showToast("✅ Ajustes de WhatsApp guardados");
else showToast("❌ Error al guardar", true); else showToast("❌ Error al guardar", true);
} catch(e) { showToast("❌ Error de conexión", true); } } catch(e) { showToast("❌ Error de conexión", true); }
} }
async function saveProviderCreds(event, provider) {
event.preventDefault();
const username = document.getElementById(`user_${provider}`).value;
const password = document.getElementById(`pass_${provider}`).value;
if(!username || !password) {
showToast("Rellena usuario y contraseña", true);
return;
}
try {
const res = await fetch(`${API_URL}/providers/credentials`, {
method: 'POST',
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify({ provider, username, password })
});
if(res.ok) {
showToast(`✅ Acceso a ${provider} guardado`);
} else {
showToast("Error al guardar", true);
}
} catch(e) { showToast("Error de conexión", true); }
}
async function checkWhatsappStatus() { async function checkWhatsappStatus() {
const container = document.getElementById('waStatusContainer'); const container = document.getElementById('waStatusContainer');
container.innerHTML = `<div class="flex flex-col items-center animate-pulse"><div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div><span class="text-sm font-bold text-slate-400">Verificando instancia...</span></div>`; container.innerHTML = `<div class="flex flex-col items-center animate-pulse"><div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div><span class="text-sm font-bold text-slate-400">Verificando instancia...</span></div>`;
lucide.createIcons(); lucide.createIcons();
try { try {
const res = await fetch(`${API_URL}/whatsapp/status`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/whatsapp/status`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json(); const data = await res.json();
if (!data.ok) throw new Error(data.error || "Error desconocido"); if (!data.ok) throw new Error(data.error || "Error desconocido");
if (data.state === "open") { if (data.state === "open") {
container.innerHTML = `<div class="flex flex-col items-center"><div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 shadow-sm border border-green-200"><i data-lucide="check" class="w-8 h-8 text-green-600"></i></div><h4 class="text-xl font-bold text-green-700">Conectado</h4><p class="text-xs text-green-600 mt-1 font-medium bg-green-50 px-2 py-1 rounded">Instancia: ${data.instanceName}</p></div>`; container.innerHTML = `<div class="flex flex-col items-center"><div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 shadow-sm border border-green-200"><i data-lucide="check" class="w-8 h-8 text-green-600"></i></div><h4 class="text-xl font-bold text-green-700">Conectado</h4><p class="text-xs text-green-600 mt-1 font-medium bg-green-50 px-2 py-1 rounded">Instancia: ${data.instanceName}</p></div>`;
} else if (data.qr) { } else if (data.qr) {
@@ -656,6 +764,9 @@
lucide.createIcons(); lucide.createIcons();
} }
// ==========================================
// LÓGICA PLANTILLAS
// ==========================================
async function loadTemplates() { async function loadTemplates() {
try { try {
const res = await fetch(`${API_URL}/templates`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/templates`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -671,22 +782,14 @@
currentTemplateType = type; currentTemplateType = type;
document.querySelectorAll('.tpl-btn').forEach(b => { document.querySelectorAll('.tpl-btn').forEach(b => {
b.classList.remove('bg-blue-50', 'ring-1', 'ring-blue-200'); b.classList.remove('bg-blue-50', 'ring-1', 'ring-blue-200');
b.querySelector('span').classList.replace('bg-blue-600', 'bg-blue-100'); const s = b.querySelector('span');
b.querySelector('span').classList.replace('text-white', 'text-blue-600'); if(s.classList.contains('bg-blue-600')) s.classList.replace('bg-blue-600', 'bg-blue-100'), s.classList.replace('text-white', 'text-blue-600');
if (b.querySelector('span').classList.contains('bg-orange-600')) { if(s.classList.contains('bg-orange-600')) s.classList.replace('bg-orange-600', 'bg-orange-100'), s.classList.replace('text-white', 'text-orange-600');
b.querySelector('span').classList.replace('bg-orange-600', 'bg-orange-100');
b.querySelector('span').classList.replace('text-white', 'text-orange-600');
}
}); });
btn.classList.add('bg-blue-50', 'ring-1', 'ring-blue-200'); btn.classList.add('bg-blue-50', 'ring-1', 'ring-blue-200');
const span = btn.querySelector('span'); const span = btn.querySelector('span');
if (span.classList.contains('bg-blue-100')) { if (span.classList.contains('bg-blue-100')) span.classList.replace('bg-blue-100', 'bg-blue-600'), span.classList.replace('text-blue-600', 'text-white');
span.classList.replace('bg-blue-100', 'bg-blue-600'); else if (span.classList.contains('bg-orange-100')) span.classList.replace('bg-orange-100', 'bg-orange-600'), span.classList.replace('text-orange-600', 'text-white');
span.classList.replace('text-blue-600', 'text-white');
} else if (span.classList.contains('bg-orange-100')) {
span.classList.replace('bg-orange-100', 'bg-orange-600');
span.classList.replace('text-orange-600', 'text-white');
}
document.getElementById('editorTitle').innerText = btn.innerText.trim(); document.getElementById('editorTitle').innerText = btn.innerText.trim();
document.getElementById('tplContent').value = cachedTemplates[type] || ""; document.getElementById('tplContent').value = cachedTemplates[type] || "";
} }
@@ -694,9 +797,7 @@
function insertVar(text) { function insertVar(text) {
const textarea = document.getElementById('tplContent'); const textarea = document.getElementById('tplContent');
if (!textarea) return; if (!textarea) return;
const start = textarea.selectionStart; const start = textarea.selectionStart, end = textarea.selectionEnd, val = textarea.value;
const end = textarea.selectionEnd;
const val = textarea.value;
textarea.value = val.substring(0, start) + text + val.substring(end); textarea.value = val.substring(0, start) + text + val.substring(end);
textarea.focus(); textarea.focus();
textarea.selectionStart = textarea.selectionEnd = start + text.length; textarea.selectionStart = textarea.selectionEnd = start + text.length;
@@ -714,6 +815,9 @@
} catch(e) { showToast("Error", true); } } catch(e) { showToast("Error", true); }
} }
// ==========================================
// LÓGICA OTROS (COMPAÑÍAS Y ESTADOS)
// ==========================================
async function loadCompanies() { async function loadCompanies() {
const list = document.getElementById('listCompanies'); const list = document.getElementById('listCompanies');
list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>'; list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
@@ -733,8 +837,7 @@
} }
async function addCompany() { async function addCompany() {
const input = document.getElementById('newCompanyInput'); const input = document.getElementById('newCompanyInput'), name = input.value.trim();
const name = input.value.trim();
if(!name) return; if(!name) return;
try { try {
const res = await fetch(`${API_URL}/companies`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name }) }); const res = await fetch(`${API_URL}/companies`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name }) });
@@ -758,17 +861,8 @@
data.statuses.forEach(s => { data.statuses.forEach(s => {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors"; div.className = "p-3 border border-gray-100 rounded-lg bg-gray-50 flex justify-between items-center group hover:border-blue-200 transition-colors";
const actionBtn = s.is_system const actionBtn = s.is_system ? `<i data-lucide="lock" class="w-4 h-4 text-slate-300" title="Estado del sistema"></i>` : `<button onclick="deleteStatus(${s.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
? `<i data-lucide="lock" class="w-4 h-4 text-slate-300" title="Estado del sistema (Imborrable)"></i>` div.innerHTML = `<div class="flex items-center gap-3"><div class="w-3 h-3 rounded-full bg-${s.color}-500"></div><span class="font-bold text-gray-700 text-sm">${s.name}</span></div>${actionBtn}`;
: `<button onclick="deleteStatus(${s.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
div.innerHTML = `
<div class="flex items-center gap-3">
<div class="w-3 h-3 rounded-full bg-${s.color}-500"></div>
<span class="font-bold text-gray-700 text-sm">${s.name}</span>
</div>
${actionBtn}
`;
list.appendChild(div); list.appendChild(div);
}); });
lucide.createIcons(); lucide.createIcons();
@@ -776,9 +870,7 @@
} }
async function addStatus() { async function addStatus() {
const input = document.getElementById('newStatusInput'); const input = document.getElementById('newStatusInput'), color = document.getElementById('newStatusColor').value, name = input.value.trim();
const color = document.getElementById('newStatusColor').value;
const name = input.value.trim();
if(!name) return; if(!name) return;
try { try {
const res = await fetch(`${API_URL}/statuses`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name, color: color }) }); const res = await fetch(`${API_URL}/statuses`, { method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` }, body: JSON.stringify({ name: name, color: color }) });
@@ -787,32 +879,43 @@
} }
async function deleteStatus(id) { async function deleteStatus(id) {
if(!confirm("¿Borrar este estado? Asegúrate de que ningún servicio lo esté utilizando.")) return; if(!confirm("¿Borrar estado?")) return;
try { try {
const res = await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const json = await res.json(); if(res.ok) { showToast("Estado eliminado"); loadStatusesConfig(); }
if(res.ok) { else { const j = await res.json(); showToast(j.error || "Error", true); }
showToast("Estado eliminado");
loadStatusesConfig();
} else {
showToast(json.error || "Error al borrar", true);
}
} catch(e) { showToast("Error de conexión", true); } } catch(e) { showToast("Error de conexión", true); }
} }
// --- LÓGICA PORTAL DEL CLIENTE --- // ==========================================
// LÓGICA PROVEEDORES CREDENCIALES
// ==========================================
async function loadProviderCredentials() {
try {
const res = await fetch(`${API_URL}/providers/credentials`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json();
if(data.ok) {
data.credentials.forEach(c => {
const userInp = document.getElementById(`user_${c.provider.toLowerCase()}`);
if(userInp) userInp.value = c.username;
});
}
} catch(e) { console.error("Error creds"); }
}
// ==========================================
// LÓGICA PORTAL CLIENTE
// ==========================================
async function loadPortalConfig() { async function loadPortalConfig() {
try { try {
const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/config/company`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
const data = await res.json(); const data = await res.json();
if (data.ok && data.config) { if (data.ok && data.config) {
document.getElementById('confCompanyName').value = data.config.full_name || ""; document.getElementById('confCompanyName').value = data.config.full_name || "";
if (data.config.company_logo) { if (data.config.company_logo) {
document.getElementById('confLogoBase64').value = data.config.company_logo; document.getElementById('confLogoBase64').value = data.config.company_logo;
document.getElementById('logoPreview').innerHTML = `<img src="${data.config.company_logo}" class="w-full h-full object-contain">`; document.getElementById('logoPreview').innerHTML = `<img src="${data.config.company_logo}" class="w-full h-full object-contain">`;
} }
if (data.config.portal_settings) { if (data.config.portal_settings) {
const s = data.config.portal_settings; const s = data.config.portal_settings;
if(s.m_start) document.getElementById('mStart').value = s.m_start; if(s.m_start) document.getElementById('mStart').value = s.m_start;
@@ -821,65 +924,40 @@
if(s.a_end) document.getElementById('aEnd').value = s.a_end; if(s.a_end) document.getElementById('aEnd').value = s.a_end;
} }
} }
} catch (e) { console.error("Error cargando config", e); } } catch (e) { console.error("Error portal"); }
} }
function encodeLogo(input) { function encodeLogo(input) {
const file = input.files[0]; const file = input.files[0];
if (!file) return; if (!file || file.size > 1024 * 1024) { alert("Máximo 1MB"); return; }
if (file.size > 1024 * 1024) {
alert("La imagen es demasiado grande. Máximo 1MB.");
return;
}
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = (e) => {
const base64 = e.target.result; document.getElementById('confLogoBase64').value = e.target.result;
document.getElementById('confLogoBase64').value = base64; document.getElementById('logoPreview').innerHTML = `<img src="${e.target.result}" class="w-full h-full object-contain">`;
document.getElementById('logoPreview').innerHTML = `<img src="${base64}" class="w-full h-full object-contain">`;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
async function savePortalConfig() { async function savePortalConfig() {
const btn = document.getElementById('btnSavePortal'); const btn = document.getElementById('btnSavePortal'), original = btn.innerHTML;
const originalText = btn.innerHTML;
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...'; btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
lucide.createIcons(); lucide.createIcons();
const payload = { const payload = {
company_name: document.getElementById('confCompanyName').value, company_name: document.getElementById('confCompanyName').value,
company_logo: document.getElementById('confLogoBase64').value, company_logo: document.getElementById('confLogoBase64').value,
portal_settings: { portal_settings: {
m_start: document.getElementById('mStart').value, m_start: document.getElementById('mStart').value, m_end: document.getElementById('mEnd').value,
m_end: document.getElementById('mEnd').value, a_start: document.getElementById('aStart').value, a_end: document.getElementById('aEnd').value
a_start: document.getElementById('aStart').value,
a_end: document.getElementById('aEnd').value
} }
}; };
try { try {
const res = await fetch(`${API_URL}/config/company`, { const res = await fetch(`${API_URL}/config/company`, {
method: 'POST', method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
body: JSON.stringify(payload) body: JSON.stringify(payload)
}); });
const data = await res.json(); if (res.ok) showToast("Configuración del Portal guardada");
} catch (e) { showToast("Error conexión", true); }
if (data.ok) { finally { btn.innerHTML = original; lucide.createIcons(); }
showToast("Configuración del Portal guardada");
const nameEl = document.getElementById("headerUserName");
if (nameEl && payload.company_name) nameEl.innerText = payload.company_name;
} else {
showToast("Error: " + data.error, true);
}
} catch (e) {
showToast("Error de conexión", true);
} finally {
btn.innerHTML = originalText;
lucide.createIcons();
}
} }
function showToast(msg, isError = false) { function showToast(msg, isError = false) {