Actualizar configuracion.html

configuracion.html

@@ -79,30 +79,49 @@
                 <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 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 de la compañía..." 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">
+                                    <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>
-                                        Añadir
-                                    </button>
                                 </div>
                             </div>
-
                             <div id="listCompanies" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
                                 <p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>
                             </div>
                         </div>
 
-                        <div class="bg-white rounded-xl shadow border border-gray-100 p-6 flex items-center justify-center text-gray-400 text-sm">
+                        <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-[500px]">
-                            <p>Más configuraciones próximamente...</p>
+                            <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="activity" class="w-4 h-4 text-blue-600"></i> Estados del Servicio
+                                </h3>
+                            </div>
+                            <div class="p-4 border-b border-gray-100 bg-white">
+                                <div class="flex gap-2">
+                                    <input type="text" id="newStatusInput" placeholder="Nuevo estado..." class="flex-1 border rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500">
+                                    <select id="newStatusColor" class="border rounded-lg px-2 text-sm text-gray-600 outline-none focus:border-blue-500">
+                                        <option value="gray">Gris</option>
+                                        <option value="blue">Azul</option>
+                                        <option value="green">Verde</option>
+                                        <option value="red">Rojo</option>
+                                        <option value="yellow">Amarillo</option>
+                                        <option value="purple">Morado</option>
+                                    </select>
+                                    <button onclick="addStatus()" 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>
+                            <div id="listStatuses" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
+                                <p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>
+                            </div>
                         </div>
+
                     </div>
 
                 </div>
@@ -117,7 +136,7 @@
     <script>
         document.addEventListener("DOMContentLoaded", () => {
             if (!localStorage.getItem("token")) window.location.href = "index.html";
-            showTab('templates'); // Pestaña por defecto
+            showTab('templates'); 
         });
 
         function showTab(tabId) {
@@ -132,9 +151,9 @@
             btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-bold');
             btn.classList.remove('text-gray-500', 'font-medium');
 
-            // Cargar datos si entramos en "Otras Configuraciones"
             if(tabId === 'others') {
                 loadCompanies();
+                loadStatusesConfig();
             }
         }
 
@@ -142,47 +161,82 @@
         async function loadCompanies() {
             const list = document.getElementById('listCompanies');
             list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
-            
             try {
                 const res = await fetch(`${API_URL}/companies`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
                 const data = await res.json();
-                
                 list.innerHTML = "";
-                if(data.companies.length === 0) {
+                if(data.companies.length === 0) { list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-4">Sin compañías.</p>'; return; }
-                    list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-4">No hay compañías registradas.</p>';
-                    return;
-                }
-
                 data.companies.forEach(c => {
                     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.innerHTML = `
+                    div.innerHTML = `<span class="font-bold text-gray-700 text-sm">${c.name}</span><button onclick="deleteCompany(${c.id})" class="text-gray-300 hover:text-red-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>`;
-                        <span class="font-bold text-gray-700 text-sm">${c.name}</span>
-                        <i data-lucide="building-2" class="w-4 h-4 text-gray-300"></i>
-                    `;
                     list.appendChild(div);
                 });
                 lucide.createIcons();
-            } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error al cargar</p>'; }
+            } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
         }
 
         async function addCompany() {
             const input = document.getElementById('newCompanyInput');
             const name = input.value.trim();
             if(!name) return;
-
             try {
                 const res = await fetch(`${API_URL}/companies`, {
-                    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({ name: name })
                 });
-                if(res.ok) {
+                if(res.ok) { showToast("Compañía añadida"); input.value = ""; loadCompanies(); }
-                    showToast("Compañía añadida");
+            } catch(e) { showToast("Error", true); }
-                    input.value = "";
+        }
-                    loadCompanies();
+
-                } else { showToast("Error al añadir", true); }
+        async function deleteCompany(id) {
-            } catch(e) { showToast("Error de conexión", true); }
+            if(!confirm("¿Borrar compañía?")) return;
+            await fetch(`${API_URL}/companies/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadCompanies();
+        }
+
+        // --- GESTIÓN DE ESTADOS (NUEVO) ---
+        async function loadStatusesConfig() {
+            const list = document.getElementById('listStatuses');
+            list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';
+            try {
+                const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                list.innerHTML = "";
+                data.statuses.forEach(s => {
+                    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.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>
+                        <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>
+                    `;
+                    list.appendChild(div);
+                });
+                lucide.createIcons();
+            } catch(e) { list.innerHTML = '<p class="text-red-500 text-xs text-center">Error</p>'; }
+        }
+
+        async function addStatus() {
+            const input = document.getElementById('newStatusInput');
+            const color = document.getElementById('newStatusColor').value;
+            const name = input.value.trim();
+            if(!name) return;
+            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 })
+                });
+                if(res.ok) { showToast("Estado añadido"); input.value = ""; loadStatusesConfig(); }
+            } catch(e) { showToast("Error", true); }
+        }
+
+        async function deleteStatus(id) {
+            if(!confirm("¿Borrar estado? Los servicios con este estado podrían verse afectados.")) return;
+            await fetch(`${API_URL}/statuses/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadStatusesConfig();
         }
 
         function showToast(msg, isError = false) {