Update web/historial-consultas.html

web/historial-consultas.html

@@ -13,7 +13,7 @@
     <!-- Fonts CSS -->
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <!-- Icons CSS -->
-    <link rel="stylesheet" href="css/feather.css">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="css/select2.css">
     <link rel="stylesheet" href="css/daterangepicker.css">
     <!-- App CSS -->
@@ -26,14 +26,14 @@
     <!-- Top Navigation -->
     <nav class="topnav navbar navbar-light">
         <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
-            <i class="fe fe-menu navbar-toggler-icon"></i>
+            <i data-feather="menu" class="navbar-toggler-icon"></i>
         </button>
 
         <ul class="nav">
             <!--
             <li class="nav-item">
                 <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
-                    <i class="fe fe-sun fe-16"></i>
+                    <i data-feather="sun" class="fe-16"></i>
                 </a>
             </li>
             -->
@@ -54,7 +54,7 @@
     <!-- Sidebar -->
     <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
         <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
-            <i class="fe fe-x"><span class="sr-only"></span></i>
+            <i data-feather="x"><span class="sr-only"></span></i>
         </a>
         <nav class="vertnav navbar navbar-light">
             <!-- nav bar -->
@@ -68,31 +68,31 @@
             <ul class="navbar-nav flex-fill w-100 mb-2">
                 <li class="nav-item">
                     <a class="nav-link" href="./index.html">
-                        <i class="fe fe-home fe-16"></i>
+                        <i data-feather="home" class="fe-16"></i>
                         <span class="ml-3 item-text">Dashboard</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./diagnosis.html">
-                        <i class="fe fe-eye fe-16"></i>
+                        <i data-feather="eye" class="fe-16"></i>
                         <span class="ml-3 item-text">Diagnóstico</span>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="./patients.html">
-                        <i class="fe fe-users fe-16"></i>
+                        <i data-feather="users" class="fe-16"></i>
                         <span class="ml-3 item-text">Pacientes</span>
                     </a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" href="./historial-consultas.html">
-                        <i class="fe fe-file-text fe-16"></i>
+                        <i data-feather="file-text" class="fe-16"></i>
                         <span class="ml-3 item-text">Consultas</span>
                     </a>
                 </li>
                 <li class="nav-item active">
                     <a class="nav-link" href="./users.html">
-                        <i class="fe fe-user fe-16"></i>
+                        <i data-feather="user" class="fe-16"></i>
                         <span class="ml-3 item-text">Usuarios</span>
                     </a>
                 </li>
@@ -113,7 +113,7 @@
                         </div>
                         <div class="col-auto">
                             <button class="btn btn-primary" onclick="refreshConsultations()">
-                                <i class="fe fe-refresh-cw fe-16 mr-2"></i>Actualizar
+                                <i data-feather="refresh-cw" class="fe-16 mr-2"></i>Actualizar
                             </button>
                         </div>
                     </div>
@@ -126,7 +126,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-primary">
-                                                <i class="fe fe-clipboard fe-16 text-white"></i>
+                                                <i data-feather="clipboard" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -143,7 +143,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-warning">
-                                                <i class="fe fe-alert-triangle fe-16 text-white"></i>
+                                                <i data-feather="alert-triangle" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -160,7 +160,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-success">
-                                                <i class="fe fe-check fe-16 text-white"></i>
+                                                <i data-feather="check" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -177,7 +177,7 @@
                                     <div class="row align-items-center">
                                         <div class="col-3 text-center">
                                             <span class="circle circle-sm bg-info">
-                                                <i class="fe fe-users fe-16 text-white"></i>
+                                                <i data-feather="users" class="fe-16 text-white"></i>
                                             </span>
                                         </div>
                                         <div class="col pr-0">
@@ -194,7 +194,7 @@
                     <div class="card shadow mb-4">
                         <div class="card-header">
                             <h6 class="card-title mb-0">
-                                <i class="fe fe-filter mr-2"></i>Filtros y Búsqueda
+                                <i data-feather="filter" class="mr-2"></i>Filtros y Búsqueda
                             </h6>
                         </div>
                         <div class="card-body">
@@ -230,7 +230,7 @@
                                     <div class="form-group">
                                         <label>&nbsp;</label>
                                         <button type="button" class="btn btn-primary btn-block" onclick="applyFilters()">
-                                            <i class="fe fe-search mr-1"></i>Buscar
+                                            <i data-feather="search" class="mr-1"></i>Buscar
                                         </button>
                                     </div>
                                 </div>
@@ -242,7 +242,7 @@
                     <div class="card shadow">
                         <div class="card-header">
                             <h6 class="card-title mb-0">
-                                <i class="fe fe-clipboard mr-2"></i>Lista de Consultas
+                                <i data-feather="clipboard" class="mr-2"></i>Lista de Consultas
                                 <span class="badge badge-secondary ml-2" id="recordCount">0 registros</span>
                             </h6>
                         </div>
@@ -294,11 +294,11 @@
 
                             <!-- Empty State -->
                             <div id="emptyState" class="text-center py-5" style="display: none;">
-                                <i class="fe fe-inbox fe-48 text-muted mb-3"></i>
+                                <i data-feather="inbox" class="fe-48 text-muted mb-3"></i>
                                 <h6 class="text-muted">No se encontraron consultas</h6>
                                 <p class="text-muted">No hay consultas que coincidan con los filtros seleccionados.</p>
                                 <button class="btn btn-outline-primary" onclick="clearFilters()">
-                                    <i class="fe fe-refresh-cw mr-1"></i>Limpiar Filtros
+                                    <i data-feather="refresh-cw" class="mr-1"></i>Limpiar Filtros
                                 </button>
                             </div>
                         </div>
@@ -315,7 +315,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="consultationModalLabel">
-                    <i class="fe fe-eye mr-2"></i>Detalles de Consulta
+                    <i data-feather="eye" class="mr-2"></i>Detalles de Consulta
                 </h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
@@ -327,7 +327,7 @@
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                 <button type="button" class="btn btn-danger" id="deleteConsultationBtn" onclick="deleteConsultation()">
-                    <i class="fe fe-trash-2 mr-1"></i>Eliminar
+                    <i data-feather="trash-2" class="mr-1"></i>Eliminar
                 </button>
             </div>
         </div>
@@ -505,12 +505,12 @@
                             <button class="btn btn-sm btn-outline-primary"
                                     onclick="viewConsultationDetails(${consultation.consultationID})"
                                     title="Ver detalles">
-                                <i class="fe fe-eye fe-12"></i>
+                                <i data-feather="eye" class="fe-12"></i>
                             </button>
                             <button class="btn btn-sm btn-outline-danger"
                                     onclick="confirmDeleteConsultation(${consultation.consultationID})"
                                     title="Eliminar">
-                                <i class="fe fe-trash-2 fe-12"></i>
+                                <i data-feather="trash-2" class="fe-12"></i>
                             </button>
                         </div>
                     </td>
@@ -534,7 +534,7 @@
             container.append(`
             <li class="page-item ${prevDisabled}">
                 <a class="page-link" href="#" onclick="changePage(${pagination.current_page - 1})" ${prevDisabled ? 'tabindex="-1"' : ''}>
-                    <i class="fe fe-chevron-left"></i>
+                    <i data-feather="chevron-left"></i>
                 </a>
             </li>
         `);
@@ -582,7 +582,7 @@
             container.append(`
             <li class="page-item ${nextDisabled}">
                 <a class="page-link" href="#" onclick="changePage(${pagination.current_page + 1})" ${nextDisabled ? 'tabindex="-1"' : ''}>
-                    <i class="fe fe-chevron-right"></i>
+                    <i data-feather="chevron-right"></i>
                 </a>
             </li>
         `);
@@ -600,33 +600,14 @@
             console.log(`Viendo detalles de consulta: ${consultationId}`);
             currentConsultationId = consultationId;
 
-            // Mostrar loading en el modal mientras carga
-            $('#consultationModalBody').html(`
-                <div class="text-center py-4">
-                    <div class="spinner-border text-primary" role="status"></div>
-                    <p class="text-muted mt-2">Cargando detalles...</p>
-                </div>
-            `);
-            $('#consultationModal').modal('show');
-
-            api.getConsultation(consultationId).then(function(response) {
-                if (response && response.success) {
-                    renderConsultationModal(response.consultation, response.consultation.riskFactors || []);
+            api.getConsultations(1, 100).then(function(response) {
+                const consultation = (response.consultations || []).find(c => c.consultationID === consultationId);
+                if (consultation) {
+                    renderConsultationModal(consultation, []);
+                    $('#consultationModal').modal('show');
                 } else {
-                    $('#consultationModalBody').html(`
-                        <div class="alert alert-danger">
-                            <i class="fe fe-alert-circle mr-2"></i>
-                            ${response?.message || 'No se pudo cargar la consulta.'}
-                        </div>
-                    `);
+                    showAlert('error', 'Consulta no encontrada');
                 }
-            }).catch(function() {
-                $('#consultationModalBody').html(`
-                    <div class="alert alert-danger">
-                        <i class="fe fe-alert-circle mr-2"></i>
-                        Error de conexión al cargar la consulta.
-                    </div>
-                `);
             });
         }
 
@@ -640,9 +621,9 @@
                 new Date(consultation.consultationDate).toLocaleString('es-ES') : 'N/A';
 
             const confidence = consultation.confidence ?
-                `${parseFloat(consultation.confidence).toFixed(1)}%` : 'N/A';
+                `${consultation.confidence.toFixed(1)}%` : 'N/A';
 
-            // Calcular edad
+            // Calcular edad si hay fecha de nacimiento
             let age = 'N/A';
             if (consultation.birthDate) {
                 try {
@@ -654,13 +635,11 @@
                         age--;
                     }
                     age += ' años';
-                } catch (e) { age = 'N/A'; }
+                } catch (e) {
+                    age = 'N/A';
+                }
             }
 
-            // Género legible
-            const genderMap = { 'M': 'Masculino', 'F': 'Femenino' };
-            const genderText = genderMap[consultation.gender] || consultation.gender || 'N/A';
-
             // Factores de riesgo
             let riskFactorsHtml = '';
             if (riskFactors && riskFactors.length > 0) {
@@ -668,24 +647,19 @@
                     `<span class="badge badge-secondary mr-1 mb-1">${rf.name}</span>`
                 ).join('');
             } else {
-                riskFactorsHtml = '<span class="text-muted small">Sin factores de riesgo registrados</span>';
+                riskFactorsHtml = '<span class="text-muted">No se han registrado factores de riesgo</span>';
             }
 
-            // Badge del doctor que registró la consulta
-            const doctorBadge = consultation.doctorName
-                ? `<span class="badge badge-info ml-1">${consultation.doctorName}</span>`
-                : '';
-
             const modalContent = `
             <div class="row">
                 <div class="col-md-6">
                     <h6 class="mb-3">
-                        <i class="fe fe-user mr-2"></i>Información del Paciente
+                        <i data-feather="user" class="mr-2"></i>Información del Paciente
                     </h6>
                     <table class="table table-sm">
                         <tr>
                             <td><strong>Nombre:</strong></td>
-                            <td>${consultation.patientName || 'N/A'}</td>
+                            <td>${consultation.patientName || consultation.patient_name || 'N/A'}</td>
                         </tr>
                         <tr>
                             <td><strong>Edad:</strong></td>
@@ -693,7 +667,7 @@
                         </tr>
                         <tr>
                             <td><strong>Género:</strong></td>
-                            <td>${genderText}</td>
+                            <td>${consultation.gender || 'N/A'}</td>
                         </tr>
                         <tr>
                             <td><strong>Tipo Diabetes:</strong></td>
@@ -703,7 +677,7 @@
                 </div>
                 <div class="col-md-6">
                     <h6 class="mb-3">
-                        <i class="fe fe-clipboard mr-2"></i>Información de la Consulta
+                        <i data-feather="clipboard" class="mr-2"></i>Información de la Consulta
                     </h6>
                     <table class="table table-sm">
                         <tr>
@@ -719,16 +693,16 @@
                             <td>${confidence}</td>
                         </tr>
                         <tr>
-                            <td><strong>Doctor:</strong></td>
-                            <td>${doctorBadge || 'N/A'}</td>
+                            <td><strong>Imagen:</strong></td>
+                            <td>${consultation.imagePath || 'N/A'}</td>
                         </tr>
                     </table>
                 </div>
             </div>
 
-            <div class="row mt-3">
+            <div class="row mt-4">
                 <div class="col-12">
-                    <div class="alert ${resultClass} d-flex align-items-center mb-0">
+                    <div class="alert ${resultClass} d-flex align-items-center">
                         <i class="fe ${resultIcon} fe-24 mr-3"></i>
                         <div>
                             <h6 class="mb-1">${resultText}</h6>
@@ -738,24 +712,15 @@
                 </div>
             </div>
 
-            <div class="row mt-3">
-                <div class="col-12">
-                    <h6 class="mb-2">
-                        <i class="fe fe-shield mr-2"></i>Factores de Riesgo del Paciente
-                    </h6>
-                    <div>${riskFactorsHtml}</div>
-                </div>
-            </div>
-
             ${consultation.notes ? `
-                <div class="row mt-3">
+                <div class="row">
                     <div class="col-12">
                         <h6 class="mb-2">
-                            <i class="fe fe-edit-2 mr-2"></i>Notas de la Consulta
+                            <i data-feather="edit-2" class="mr-2"></i>Notas de la Consulta
                         </h6>
                         <div class="card bg-light">
-                            <div class="card-body py-2">
-                                <p class="mb-0 small">${consultation.notes}</p>
+                            <div class="card-body">
+                                <p class="mb-0">${consultation.notes}</p>
                             </div>
                         </div>
                     </div>
@@ -986,5 +951,23 @@
 
 <!-- App scripts -->
 <script src="js/apps.js"></script>
+<script>
+    // Feather Icons: reemplaza <i data-feather="X"> con SVG inline
+    // Inmune a problemas de fuentes locales
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    // Re-render al inyectar HTML dinámico (modals, cards, tablas)
+    var _fObserver = new MutationObserver(function(mutations) {
+        var needsRefresh = mutations.some(function(m) {
+            return m.addedNodes.length > 0;
+        });
+        if (needsRefresh) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>