From fa040eb75d1bd50f526d9b5b6b7cfdbad0f78518 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 8 Feb 2026 22:14:08 +0000
Subject: [PATCH] Actualizar configuracion.html

---
 configuracion.html | 299 ++++++++++-----------------------------------
 1 file changed, 67 insertions(+), 232 deletions(-)

diff --git a/configuracion.html b/configuracion.html
index 7488ca8..2b96255 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -9,7 +9,6 @@
     <style>
         .fade-in { animation: fadeIn 0.3s ease-in-out; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        /* Scrollbar fina */
         .scroller::-webkit-scrollbar { width: 6px; }
         .scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
     </style>
@@ -25,67 +24,36 @@
             <main class="flex-1 overflow-hidden flex flex-col p-6 fade-in">
                 
                 <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
-                    <i data-lucide="settings" class="text-blue-600"></i> Configuración del Sistema
+                    <i data-lucide="settings" class="text-blue-600"></i> Configuración Avanzada
                 </h2>
 
-                <div class="flex border-b border-gray-200 mb-6">
-                    <button onclick="showTab('users')" id="tab-users" class="tab-btn px-6 py-3 text-sm font-bold text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition">
-                        <i data-lucide="users" class="inline w-4 h-4 mr-1"></i> Equipo
+                <div class="flex border-b border-gray-200 mb-6 overflow-x-auto">
+                    <button onclick="showTab('zones')" id="tab-zones" class="tab-btn px-6 py-3 text-sm font-bold text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition whitespace-nowrap">
+                        <i data-lucide="map" class="inline w-4 h-4 mr-1"></i> Zonas de Actuación
                     </button>
-                    <button onclick="showTab('guilds')" id="tab-guilds" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
-                        <i data-lucide="hammer" class="inline w-4 h-4 mr-1"></i> Gremios
+                    <button onclick="showTab('templates')" id="tab-templates" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition whitespace-nowrap">
+                        <i data-lucide="file-text" class="inline w-4 h-4 mr-1"></i> Plantillas
                     </button>
-                    <button onclick="showTab('zones')" id="tab-zones" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
-                        <i data-lucide="map" class="inline w-4 h-4 mr-1"></i> Zonas
+                    <button onclick="showTab('whatsapp')" id="tab-whatsapp" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition whitespace-nowrap">
+                        <i data-lucide="message-circle" class="inline w-4 h-4 mr-1"></i> WhatsApp
                     </button>
-                    <button onclick="showTab('statuses')" id="tab-statuses" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
-                        <i data-lucide="activity" class="inline w-4 h-4 mr-1"></i> Estados
+                    <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-50 transition whitespace-nowrap">
+                        <i data-lucide="truck" class="inline w-4 h-4 mr-1"></i> Proveedores
+                    </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-50 transition whitespace-nowrap">
+                        <i data-lucide="globe" class="inline w-4 h-4 mr-1"></i> Portal Cliente
                     </button>
                 </div>
 
                 <div class="flex-1 overflow-hidden relative">
 
-                    <div id="view-users" class="tab-content h-full flex flex-col">
-                        <div class="flex justify-end mb-4">
-                            <button onclick="openUserModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2 text-sm shadow">
-                                <i data-lucide="user-plus" class="w-4 h-4"></i> Nuevo Empleado
-                            </button>
-                        </div>
-                        <div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller">
-                            <table class="w-full text-left">
-                                <thead class="bg-gray-50 text-gray-500 text-xs uppercase sticky top-0">
-                                    <tr>
-                                        <th class="p-4">Nombre</th>
-                                        <th class="p-4">Rol</th>
-                                        <th class="p-4">Contacto</th>
-                                        <th class="p-4 text-right">Acciones</th>
-                                    </tr>
-                                </thead>
-                                <tbody id="usersTableBody" class="divide-y divide-gray-100 text-sm"></tbody>
-                            </table>
-                        </div>
-                    </div>
-
-                    <div id="view-guilds" class="tab-content hidden h-full flex flex-col">
-                        <div class="flex gap-4 mb-4">
-                            <input type="text" id="newGuildName" placeholder="Nombre del gremio (Ej: Fontanería)" class="flex-1 border rounded-lg px-4 outline-none focus:border-blue-500">
-                            <button onclick="addGuild()" class="bg-blue-600 text-white px-6 rounded-lg hover:bg-blue-700">Añadir</button>
-                        </div>
-                        <div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller p-4">
-                            <div id="guildsList" class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                </div>
-                        </div>
-                    </div>
-
-                    <div id="view-zones" class="tab-content hidden h-full flex flex-col">
+                    <div id="view-zones" class="tab-content h-full flex flex-col">
                         <div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-full">
-                            
                             <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden">
                                 <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700">1. Selecciona Provincia</div>
                                 <div class="p-2 border-b"><input type="text" id="searchProv" placeholder="Filtrar..." class="w-full text-xs p-2 border rounded" onkeyup="filterProvinces()"></div>
                                 <div id="listProvinces" class="flex-1 overflow-y-auto scroller p-2 space-y-1"></div>
                             </div>
-
                             <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colZones">
                                 <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
                                     <span>2. Crear/Elegir Zona</span>
@@ -95,7 +63,6 @@
                                     <p class="text-center text-gray-400 mt-10">Selecciona una provincia</p>
                                 </div>
                             </div>
-
                             <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colOperators">
                                 <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
                                     <span>3. Asignar Operarios</span>
@@ -108,12 +75,41 @@
                         </div>
                     </div>
 
-                    <div id="view-statuses" class="tab-content hidden h-full">
-                        <div class="bg-white rounded-xl shadow border border-gray-100 p-6">
-                            <h3 class="font-bold text-gray-700 mb-4">Estados del Servicio</h3>
-                            <div id="statusList" class="space-y-2">
-                                </div>
-                            <p class="text-xs text-gray-400 mt-4">* Los estados se gestionan automáticamente por ahora.</p>
+                    <div id="view-templates" class="tab-content hidden h-full">
+                        <div class="bg-white rounded-xl shadow p-8 text-center border border-gray-100">
+                            <i data-lucide="file-text" class="w-12 h-12 text-gray-300 mx-auto mb-4"></i>
+                            <h3 class="text-lg font-bold text-gray-700">Gestor de Plantillas</h3>
+                            <p class="text-gray-500 mb-4">Configura aquí los textos predefinidos para partes de trabajo y correos.</p>
+                            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">Nueva Plantilla</button>
+                        </div>
+                    </div>
+
+                    <div id="view-whatsapp" class="tab-content hidden h-full">
+                        <div class="bg-white rounded-xl shadow p-8 text-center border border-gray-100">
+                            <i data-lucide="message-circle" class="w-12 h-12 text-green-500 mx-auto mb-4"></i>
+                            <h3 class="text-lg font-bold text-gray-700">Conexión WhatsApp</h3>
+                            <p class="text-gray-500 mb-4">Estado de la conexión con Evolution API.</p>
+                            <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-bold">Conectado</span>
+                        </div>
+                    </div>
+
+                    <div id="view-providers" class="tab-content hidden h-full">
+                        <div class="bg-white rounded-xl shadow p-8 text-center border border-gray-100">
+                            <i data-lucide="truck" class="w-12 h-12 text-gray-300 mx-auto mb-4"></i>
+                            <h3 class="text-lg font-bold text-gray-700">Proveedores</h3>
+                            <p class="text-gray-500 mb-4">Gestión de proveedores de material y servicios externos.</p>
+                            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">Añadir Proveedor</button>
+                        </div>
+                    </div>
+
+                    <div id="view-portal" class="tab-content hidden h-full">
+                        <div class="bg-white rounded-xl shadow p-8 text-center border border-gray-100">
+                            <i data-lucide="globe" class="w-12 h-12 text-blue-300 mx-auto mb-4"></i>
+                            <h3 class="text-lg font-bold text-gray-700">Portal del Cliente</h3>
+                            <p class="text-gray-500 mb-4">Configura qué pueden ver tus clientes al acceder con su enlace.</p>
+                            <div class="inline-flex items-center gap-2 border p-2 rounded bg-gray-50">
+                                <input type="checkbox" checked class="text-blue-600"> <span>Permitir ver fotos</span>
+                            </div>
                         </div>
                     </div>
 
@@ -122,183 +118,45 @@
         </div>
     </div>
 
-    <div id="userModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center backdrop-blur-sm">
-        <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 animate-slide-in">
-            <h3 class="text-xl font-bold mb-4">Nuevo Empleado</h3>
-            <form onsubmit="createUser(event)" class="space-y-4">
-                <div class="grid grid-cols-2 gap-4">
-                    <input type="text" id="uName" placeholder="Nombre Completo" required class="w-full border p-2 rounded">
-                    <input type="tel" id="uPhone" placeholder="Teléfono" required class="w-full border p-2 rounded">
-                </div>
-                <input type="email" id="uEmail" placeholder="Email" required class="w-full border p-2 rounded">
-                <input type="password" id="uPass" placeholder="Contraseña" required class="w-full border p-2 rounded">
-                
-                <div class="grid grid-cols-2 gap-4">
-                    <select id="uRole" class="w-full border p-2 rounded bg-white">
-                        <option value="operario">Operario</option>
-                        <option value="admin">Administrador</option>
-                    </select>
-                </div>
-
-                <div class="border p-3 rounded max-h-32 overflow-y-auto">
-                    <p class="text-xs font-bold text-gray-500 mb-2">Asignar Gremios (Si es operario)</p>
-                    <div id="uGuildsList" class="grid grid-cols-2 gap-2 text-sm">
-                        </div>
-                </div>
-
-                <div class="flex justify-end gap-2 mt-4">
-                    <button type="button" onclick="document.getElementById('userModal').classList.add('hidden')" class="px-4 py-2 text-gray-500 hover:text-gray-700">Cancelar</button>
-                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Guardar</button>
-                </div>
-            </form>
-        </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>
     <script>
-        // VARIABLES GLOBALES
+        // VARIABLES GLOBALES (Solo para Zonas por ahora)
         let provinces = [], currentProvId = null, currentZoneId = null;
-        let allOperators = [];
 
         document.addEventListener("DOMContentLoaded", () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
-            // Cargar datos iniciales
-            loadUsers();
-            loadGuilds();
-            loadProvinces();
-            loadStatuses();
+            loadProvinces(); // Carga inicial para la pestaña de zonas
         });
 
         // --- SISTEMA DE PESTAÑAS ---
         function showTab(tabId) {
+            // Ocultar todo
             document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            // Mostrar seleccionado
             document.getElementById(`view-${tabId}`).classList.remove('hidden');
             
+            // Estilos botones
             document.querySelectorAll('.tab-btn').forEach(el => {
-                el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
-                el.classList.add('text-gray-500');
+                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');
-            btn.classList.remove('text-gray-500');
+            btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
+            btn.classList.remove('text-gray-500', 'font-medium');
         }
 
         // ============================
-        // 1. LÓGICA DE USUARIOS
-        // ============================
-        async function loadUsers() {
-            try {
-                const res = await fetch(`${API_URL}/admin/users`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-                const data = await res.json();
-                const tbody = document.getElementById('usersTableBody');
-                tbody.innerHTML = "";
-                data.users.forEach(u => {
-                    tbody.innerHTML += `
-                        <tr class="hover:bg-gray-50">
-                            <td class="p-4 font-medium">${u.full_name}</td>
-                            <td class="p-4"><span class="px-2 py-1 rounded text-xs uppercase font-bold ${u.role==='admin'?'bg-purple-100 text-purple-700':'bg-blue-100 text-blue-700'}">${u.role}</span></td>
-                            <td class="p-4 text-gray-500">${u.phone}<br><span class="text-xs">${u.email}</span></td>
-                            <td class="p-4 text-right">
-                                <button onclick="deleteUser(${u.id})" class="text-red-500 hover:bg-red-50 p-2 rounded"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
-                            </td>
-                        </tr>
-                    `;
-                });
-                lucide.createIcons();
-            } catch(e) {}
-        }
-
-        async function openUserModal() {
-            // Cargar gremios en el modal
-            const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            const data = await res.json();
-            const container = document.getElementById('uGuildsList');
-            container.innerHTML = "";
-            data.guilds.forEach(g => {
-                container.innerHTML += `<label class="flex items-center gap-2"><input type="checkbox" value="${g.id}" class="guild-check text-blue-600 rounded"> ${g.name}</label>`;
-            });
-            document.getElementById('userModal').classList.remove('hidden');
-        }
-
-        async function createUser(e) {
-            e.preventDefault();
-            const guilds = Array.from(document.querySelectorAll('.guild-check:checked')).map(cb => cb.value);
-            const body = {
-                fullName: document.getElementById('uName').value,
-                phone: document.getElementById('uPhone').value,
-                email: document.getElementById('uEmail').value,
-                password: document.getElementById('uPass').value,
-                role: document.getElementById('uRole').value,
-                guilds: guilds
-            };
-
-            try {
-                const res = await fetch(`${API_URL}/admin/users`, {
-                    method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
-                    body: JSON.stringify(body)
-                });
-                const json = await res.json();
-                if(json.ok) { 
-                    showToast("Usuario creado"); 
-                    document.getElementById('userModal').classList.add('hidden'); 
-                    e.target.reset();
-                    loadUsers(); 
-                } else { showToast(json.error, true); }
-            } catch(e) { showToast("Error", true); }
-        }
-
-        async function deleteUser(id) {
-            if(!confirm("¿Borrar usuario?")) return;
-            await fetch(`${API_URL}/admin/users/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            loadUsers();
-        }
-
-        // ============================
-        // 2. LÓGICA DE GREMIOS
-        // ============================
-        async function loadGuilds() {
-            const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            const data = await res.json();
-            const list = document.getElementById('guildsList');
-            list.innerHTML = "";
-            data.guilds.forEach(g => {
-                list.innerHTML += `
-                    <div class="flex justify-between items-center p-3 border rounded-lg bg-gray-50">
-                        <span class="font-medium">${g.name}</span>
-                        <button onclick="deleteGuild(${g.id})" class="text-red-400 hover:text-red-600"><i data-lucide="trash" class="w-4 h-4"></i></button>
-                    </div>
-                `;
-            });
-            lucide.createIcons();
-        }
-
-        async function addGuild() {
-            const name = document.getElementById('newGuildName').value;
-            if(!name) return;
-            await fetch(`${API_URL}/guilds`, {
-                method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
-                body: JSON.stringify({ name: name.toUpperCase() })
-            });
-            document.getElementById('newGuildName').value = "";
-            loadGuilds();
-        }
-
-        async function deleteGuild(id) {
-            if(!confirm("¿Borrar gremio?")) return;
-            await fetch(`${API_URL}/guilds/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            loadGuilds();
-        }
-
-        // ============================
-        // 3. LÓGICA DE ZONAS (Compleja)
+        // LÓGICA DE ZONAS (Completa)
         // ============================
         async function loadProvinces() {
-            const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            const data = await res.json();
-            provinces = data.provinces;
-            renderProvinces(provinces);
+            try {
+                const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                provinces = data.provinces;
+                renderProvinces(provinces);
+            } catch(e) {}
         }
 
         function renderProvinces(list) {
@@ -340,7 +198,7 @@
                 div.className = "p-3 border border-gray-100 rounded hover:border-blue-300 cursor-pointer bg-white mb-2 flex justify-between items-center zone-item";
                 div.innerHTML = `<span class="font-medium text-gray-700">${z.name}</span>`;
                 
-                if (z.owner_id) { // Solo borrar mis zonas
+                if (z.owner_id) { 
                     const btn = document.createElement('button');
                     btn.innerHTML = '<i data-lucide="trash" class="w-3 h-3"></i>';
                     btn.className = "text-red-300 hover:text-red-500";
@@ -378,13 +236,11 @@
         }
 
         async function loadOperatorsForZone(zoneId) {
-            // 1. Cargar todos los operarios
             const resOps = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
             const dataOps = await resOps.json();
             
-            // 2. Cargar asignados
             const resAssigned = await fetch(`${API_URL}/zones/${zoneId}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            const dataAssigned = await resAssigned.json(); // returns { assignedIds: [1, 5] }
+            const dataAssigned = await resAssigned.json(); 
             const assignedSet = new Set(dataAssigned.assignedIds);
 
             const list = document.getElementById('listOperators');
@@ -404,7 +260,6 @@
         async function saveZoneAssignment() {
             const checkboxes = document.querySelectorAll('.op-zone-check:checked');
             const ids = Array.from(checkboxes).map(c => c.value);
-            
             try {
                 await fetch(`${API_URL}/zones/${currentZoneId}/assign`, {
                     method: 'POST',
@@ -415,26 +270,6 @@
             } catch(e) { showToast("Error al guardar", true); }
         }
 
-        // ============================
-        // 4. LÓGICA DE ESTADOS
-        // ============================
-        async function loadStatuses() {
-            const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
-            const data = await res.json();
-            const list = document.getElementById('statusList');
-            list.innerHTML = "";
-            data.statuses.forEach(s => {
-                list.innerHTML += `
-                    <div class="flex items-center gap-3 p-3 border rounded bg-white">
-                        <div class="w-4 h-4 rounded-full bg-${s.color}-500"></div>
-                        <span class="font-bold text-gray-700">${s.name}</span>
-                        ${s.is_default ? '<span class="text-xs bg-gray-200 px-2 rounded">Default</span>' : ''}
-                        ${s.is_final ? '<span class="text-xs bg-black text-white px-2 rounded">Final</span>' : ''}
-                    </div>
-                `;
-            });
-        }
-
         function showToast(msg, isError = false) {
             const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
             t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-2xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white`;