Actualizar configuracion.html
This commit is contained in:
@@ -309,11 +309,92 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="view-portal" class="tab-content hidden h-full fade-in">
|
<div id="view-portal" class="tab-content hidden h-full fade-in pb-10">
|
||||||
<div class="bg-white rounded-xl shadow p-10 text-center border border-gray-100">
|
<div class="max-w-6xl mx-auto mt-6">
|
||||||
<i data-lucide="globe" class="w-16 h-16 text-blue-200 mx-auto mb-4"></i>
|
<div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-100 space-y-6">
|
||||||
<h3 class="text-xl font-bold text-gray-700">Portal del Cliente</h3>
|
<div class="flex items-center gap-4 border-b border-slate-100 pb-4">
|
||||||
<p class="text-gray-500 mt-2">Próximamente</p>
|
<div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center shrink-0">
|
||||||
|
<i data-lucide="smartphone" class="w-6 h-6"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-black text-slate-800 tracking-tight">Portal del Cliente</h3>
|
||||||
|
<p class="text-sm text-slate-500 font-medium">Personaliza la web que ven tus clientes al recibir el WhatsApp.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Nombre Visible (Empresa)</label>
|
||||||
|
<input type="text" id="confCompanyName" placeholder="Ej: IntegraRepara SL" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-2">Logotipo</label>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div id="logoPreview" class="w-20 h-20 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center overflow-hidden shrink-0">
|
||||||
|
<i data-lucide="image" class="text-slate-300 w-8 h-8"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<input type="file" id="confLogoInput" accept="image/png, image/jpeg, image/webp" class="hidden" onchange="encodeLogo(this)">
|
||||||
|
<button onclick="document.getElementById('confLogoInput').click()" class="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 font-bold py-2 px-4 rounded-lg text-sm transition-all shadow-sm">
|
||||||
|
Subir Imagen
|
||||||
|
</button>
|
||||||
|
<p class="text-[10px] text-slate-400 mt-1">Formatos: PNG, JPG (Máx. 1MB). Recomendado: Cuadrado o Apaisado.</p>
|
||||||
|
<input type="hidden" id="confLogoBase64">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-5 bg-slate-50 p-6 rounded-2xl border border-slate-100">
|
||||||
|
<h4 class="text-sm font-black text-slate-800 uppercase tracking-tight flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-blue-500"></i> Horario de Citas (Rutas)</h4>
|
||||||
|
<p class="text-xs text-slate-500 mb-4">El portal calculará los huecos cada 30 min dentro de estas franjas.</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Mañanas (Desde - Hasta)</label>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<select id="mStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="08:00">08:00</option><option value="08:30">08:30</option>
|
||||||
|
<option value="09:00" selected>09:00</option><option value="09:30">09:30</option>
|
||||||
|
<option value="10:00">10:00</option><option value="10:30">10:30</option>
|
||||||
|
</select>
|
||||||
|
<span class="text-slate-400 font-black">-</span>
|
||||||
|
<select id="mEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="13:00">13:00</option><option value="13:30">13:30</option>
|
||||||
|
<option value="14:00" selected>14:00</option><option value="14:30">14:30</option>
|
||||||
|
<option value="15:00">15:00</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1.5">Tardes (Desde - Hasta)</label>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<select id="aStart" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="15:00">15:00</option><option value="15:30">15:30</option>
|
||||||
|
<option value="16:00" selected>16:00</option><option value="16:30">16:30</option>
|
||||||
|
<option value="17:00">17:00</option>
|
||||||
|
</select>
|
||||||
|
<span class="text-slate-400 font-black">-</span>
|
||||||
|
<select id="aEnd" class="w-full bg-white border border-slate-200 text-xs font-bold text-slate-700 p-2.5 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="18:00">18:00</option><option value="18:30">18:30</option>
|
||||||
|
<option value="19:00" selected>19:00</option><option value="19:30">19:30</option>
|
||||||
|
<option value="20:00">20:00</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-4 flex justify-end">
|
||||||
|
<button onclick="savePortalConfig()" id="btnSavePortal" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-8 rounded-xl shadow-lg shadow-blue-500/30 transition-all uppercase tracking-widest text-xs flex items-center gap-2">
|
||||||
|
<i data-lucide="save" class="w-4 h-4"></i> Guardar Portal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -478,6 +559,7 @@
|
|||||||
|
|
||||||
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
|
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
|
||||||
if(tabId === 'whatsapp') { checkWhatsappStatus(); }
|
if(tabId === 'whatsapp') { checkWhatsappStatus(); }
|
||||||
|
if(tabId === 'portal') { loadPortalConfig(); } // CARGAR DATOS DEL PORTAL
|
||||||
if(tabId === 'providers') {
|
if(tabId === 'providers') {
|
||||||
loadProviderCredentials();
|
loadProviderCredentials();
|
||||||
loadIaRules();
|
loadIaRules();
|
||||||
@@ -718,6 +800,88 @@
|
|||||||
} catch(e) { showToast("Error de conexión", true); }
|
} catch(e) { showToast("Error de conexión", true); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- LÓGICA PORTAL DEL CLIENTE ---
|
||||||
|
async function loadPortalConfig() {
|
||||||
|
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) {
|
||||||
|
document.getElementById('confCompanyName').value = data.config.full_name || "";
|
||||||
|
|
||||||
|
if (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">`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.config.portal_settings) {
|
||||||
|
const s = data.config.portal_settings;
|
||||||
|
if(s.m_start) document.getElementById('mStart').value = s.m_start;
|
||||||
|
if(s.m_end) document.getElementById('mEnd').value = s.m_end;
|
||||||
|
if(s.a_start) document.getElementById('aStart').value = s.a_start;
|
||||||
|
if(s.a_end) document.getElementById('aEnd').value = s.a_end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) { console.error("Error cargando config", e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
function encodeLogo(input) {
|
||||||
|
const file = input.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
if (file.size > 1024 * 1024) {
|
||||||
|
alert("La imagen es demasiado grande. Máximo 1MB.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = function(e) {
|
||||||
|
const base64 = e.target.result;
|
||||||
|
document.getElementById('confLogoBase64').value = base64;
|
||||||
|
document.getElementById('logoPreview').innerHTML = `<img src="${base64}" class="w-full h-full object-contain">`;
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function savePortalConfig() {
|
||||||
|
const btn = document.getElementById('btnSavePortal');
|
||||||
|
const originalText = btn.innerHTML;
|
||||||
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
|
||||||
|
lucide.createIcons();
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
company_name: document.getElementById('confCompanyName').value,
|
||||||
|
company_logo: document.getElementById('confLogoBase64').value,
|
||||||
|
portal_settings: {
|
||||||
|
m_start: document.getElementById('mStart').value,
|
||||||
|
m_end: document.getElementById('mEnd').value,
|
||||||
|
a_start: document.getElementById('aStart').value,
|
||||||
|
a_end: document.getElementById('aEnd').value
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_URL}/config/company`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.ok) {
|
||||||
|
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) {
|
||||||
const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
|
const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
|
||||||
t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white font-medium`;
|
t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white font-medium`;
|
||||||
|
|||||||
Reference in New Issue
Block a user