From 4ffd12f4b5c581f680bf90dcf92796c42574f90c Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Mon, 23 Mar 2026 08:10:14 +0000
Subject: [PATCH] Actualizar configuracion.html

---
 configuracion.html | 117 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/configuracion.html b/configuracion.html
index 2c93b36..bd919e5 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -60,6 +60,65 @@
                     <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
                     </button>
+                    <button onclick="showTab('billing')" id="tab-billing" 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="building" class="inline w-4 h-4 mr-1"></i> Datos de Empresa
+                    </button>
+                    <div id="view-billing" 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-6">
+                            <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="building" class="w-6 h-6"></i>
+                                </div>
+                                <div>
+                                    <h3 class="text-xl font-black text-slate-800 tracking-tight">Datos de Empresa / Facturación</h3>
+                                    <p class="text-sm text-slate-500 font-medium">Información fiscal y bancaria para presupuestos y facturas.</p>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Nombre y Apellidos / Razón Social</label>
+                                    <input type="text" id="billName" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">DNI / CIF</label>
+                                    <input type="text" id="billDni" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div class="md:col-span-2">
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Dirección de Facturación</label>
+                                    <input type="text" id="billAddress" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Población</label>
+                                    <input type="text" id="billCity" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Provincia</label>
+                                    <input type="text" id="billState" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Código Postal</label>
+                                    <input type="text" id="billZip" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all">
+                                </div>
+                                <div class="md:col-span-2">
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Número de Cuenta (IBAN) para presupuestos</label>
+                                    <input type="text" id="billIban" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all" placeholder="ESXX XXXX XXXX XXXX XXXX XXXX">
+                                </div>
+                                <div class="md:col-span-2">
+                                    <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Observaciones para presupuestos</label>
+                                    <textarea id="billObs" rows="3" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all" placeholder="Ej: Presupuesto válido por 30 días..."></textarea>
+                                </div>
+                            </div>
+
+                            <div class="pt-4 flex justify-end">
+                                <button onclick="saveBillingConfig()" id="btnSaveBilling" class="bg-blue-600 hover:bg-blue-700 text-white font-black py-3 px-8 rounded-xl shadow-lg transition-all uppercase tracking-widest text-xs flex items-center gap-2">
+                                    <i data-lucide="save" class="w-4 h-4"></i> Guardar Datos
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 </div>
             </div>
 
@@ -894,6 +953,7 @@
             if(tabId === 'portal') { loadPortalConfig(); }
             if(tabId === 'app-operario') { loadAppConfig(); }
             if(tabId === 'providers') { 
+            if(tabId === 'billing') { loadBillingConfig(); }
                 loadProviderCredentials(); 
                 loadIaRules(); 
                 loadRobotConfig(); 
@@ -1545,6 +1605,63 @@
                 lucide.createIcons();
             }
         }
+
+        // ==========================================
+        // LÓGICA DATOS DE EMPRESA / FACTURACIÓN
+        // ==========================================
+        async function loadBillingConfig() {
+            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.billing_settings) {
+                    const s = data.config.billing_settings;
+                    document.getElementById('billName').value = s.name || "";
+                    document.getElementById('billDni').value = s.dni || "";
+                    document.getElementById('billAddress').value = s.address || "";
+                    document.getElementById('billCity').value = s.city || "";
+                    document.getElementById('billState').value = s.state || "";
+                    document.getElementById('billZip').value = s.zip || "";
+                    document.getElementById('billIban').value = s.iban || "";
+                    document.getElementById('billObs').value = s.obs || "";
+                }
+            } catch (e) { console.error("Error cargando datos de facturación", e); }
+        }
+
+        async function saveBillingConfig() {
+            const btn = document.getElementById('btnSaveBilling');
+            const originalHtml = btn.innerHTML;
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
+            lucide.createIcons();
+
+            const settings = {
+                name: document.getElementById('billName').value,
+                dni: document.getElementById('billDni').value,
+                address: document.getElementById('billAddress').value,
+                city: document.getElementById('billCity').value,
+                state: document.getElementById('billState').value,
+                zip: document.getElementById('billZip').value,
+                iban: document.getElementById('billIban').value,
+                obs: document.getElementById('billObs').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({ billing_settings: settings })
+                });
+                if (res.ok) {
+                    showToast("✅ Datos de empresa guardados");
+                } else {
+                    showToast("❌ Error al guardar", true);
+                }
+            } catch (e) { 
+                showToast("❌ Error de conexión", true); 
+            } finally { 
+                btn.innerHTML = originalHtml; 
+                lucide.createIcons(); 
+            }
+        }
         
     </script>
 </body>