Update web/patients.html

web/patients.html

@@ -9,7 +9,7 @@
     <title>Gestión de Pacientes</title>
     <link rel="stylesheet" href="css/simplebar.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">
-    <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/dropzone.css">
     <link rel="stylesheet" href="css/uppy.min.css">
@@ -185,7 +185,7 @@
 <div class="wrapper">
     <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">
@@ -205,7 +205,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 -->
@@ -219,31 +219,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 active">
                     <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">
                     <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">
                     <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>
@@ -262,14 +262,14 @@
                     <div class="row align-items-center mb-4">
                         <div class="col">
                             <h2 class="h3 page-title">
-                                <i class="fe fe-users fe-24 mr-2 text-primary"></i>
+                                <i data-feather="users" class="fe-24 mr-2 text-primary"></i>
                                 Gestión de Pacientes
                             </h2>
                             <p class="text-muted">Administra la información de tus pacientes de manera eficiente</p>
                         </div>
                         <div class="col-auto">
                             <button class="btn btn-primary" onclick="showNewPatientWizard()">
-                                <i class="fe fe-plus fe-16 mr-2"></i>Nuevo Paciente
+                                <i data-feather="plus" class="fe-16 mr-2"></i>Nuevo Paciente
                             </button>
                         </div>
                     </div>
@@ -323,7 +323,7 @@
                         <div class="row align-items-center" style="background-color: #f5f5f5; padding: 15px; border-radius: 8px;">
                             <div class="col-lg-6">
                                 <h5 class="mb-3">
-                                    <i class="fe fe-search mr-2"></i>Buscar Pacientes
+                                    <i data-feather="search" class="mr-2"></i>Buscar Pacientes
                                 </h5>
                                 <input type="text" class="form-control search-input" id="patientSearchInput" placeholder="Buscar por nombre, ID o tipo de diabetes...">
                             </div>
@@ -347,11 +347,11 @@
                     </div>
 
                     <div id="emptyState" class="empty-state" style="display: none;">
-                        <i class="fe fe-users"></i>
+                        <i data-feather="users"></i>
                         <h4>No hay pacientes registrados</h4>
                         <p class="text-muted">Comienza agregando tu primer paciente al sistema</p>
                         <button class="btn btn-primary" onclick="showNewPatientWizard()">
-                            <i class="fe fe-plus mr-2"></i>Agregar Primer Paciente
+                            <i data-feather="plus" class="mr-2"></i>Agregar Primer Paciente
                         </button>
                     </div>
                 </div>
@@ -366,7 +366,7 @@
         <div class="modal-content form-wizard">
             <div class="modal-header step-indicator">
                 <h5 class="modal-title">
-                    <i class="fe fe-user-plus mr-2"></i>Nuevo Paciente
+                    <i data-feather="user-plus" class="mr-2"></i>Nuevo Paciente
                 </h5>
                 <div class="ml-auto">
                     <span class="step-item active" data-step="1">1. Información Personal</span>
@@ -428,7 +428,7 @@
 
             <div class="modal-footer">
                 <button type="button" class="btn btn-success" id="savePatientBtn" style="display: none;">
-                    <i class="fe fe-save mr-2"></i>Guardar Paciente
+                    <i data-feather="save" class="mr-2"></i>Guardar Paciente
                 </button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
             </div>
@@ -442,7 +442,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">
-                    <i class="fe fe-edit mr-2"></i>Editar Paciente
+                    <i data-feather="edit" class="mr-2"></i>Editar Paciente
                 </h5>
                 <button type="button" class="close" data-dismiss="modal">
                     <span aria-hidden="true">&times;</span>
@@ -496,7 +496,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-success" id="updatePatientBtn">
-                    <i class="fe fe-save mr-2"></i>Actualizar
+                    <i data-feather="save" class="mr-2"></i>Actualizar
                 </button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
             </div>
@@ -510,7 +510,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">
-                    <i class="fe fe-user mr-2"></i>Detalles del Paciente
+                    <i data-feather="user" class="mr-2"></i>Detalles del Paciente
                 </h5>
                 <button type="button" class="close" data-dismiss="modal">
                     <span aria-hidden="true">&times;</span>
@@ -521,7 +521,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary" onclick="startDiagnosisForPatient()">
-                    <i class="fe fe-eye mr-2"></i>Nuevo Diagnóstico
+                    <i data-feather="eye" class="mr-2"></i>Nuevo Diagnóstico
                 </button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
             </div>
@@ -665,7 +665,7 @@
 
                                     <div class="mt-3">
                                         <small class="text-muted">
-                                            <i class="fe fe-calendar fe-12 mr-1"></i>
+                                            <i data-feather="calendar" class="fe-12 mr-1"></i>
                                             Registro: ${moment(patient.creationDate).format('DD/MM/YYYY')}
                                         </small>
                                     </div>
@@ -673,21 +673,21 @@
 
                                 <div class="dropdown">
                                     <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-                                        <i class="fe fe-more-horizontal"></i>
+                                        <i data-feather="more-horizontal"></i>
                                     </button>
                                     <div class="dropdown-menu dropdown-menu-right">
                                         <a class="dropdown-item" href="#" onclick="viewPatientDetails(${patient.patientID})">
-                                            <i class="fe fe-eye mr-2"></i>Ver Detalles
+                                            <i data-feather="eye" class="mr-2"></i>Ver Detalles
                                         </a>
                                         <a class="dropdown-item" href="#" onclick="editPatient(${patient.patientID})">
-                                            <i class="fe fe-edit mr-2"></i>Editar
+                                            <i data-feather="edit" class="mr-2"></i>Editar
                                         </a>
                                         <a class="dropdown-item" href="diagnosis.html?patient=${patient.patientID}">
-                                            <i class="fe fe-activity mr-2"></i>Nuevo Diagnóstico
+                                            <i data-feather="activity" class="mr-2"></i>Nuevo Diagnóstico
                                         </a>
                                         <div class="dropdown-divider"></div>
                                         <a class="dropdown-item text-danger" href="#" onclick="deletePatient(${patient.patientID}, '${patient.name}')">
-                                            <i class="fe fe-trash-2 mr-2"></i>Eliminar
+                                            <i data-feather="trash-2" class="mr-2"></i>Eliminar
                                         </a>
                                     </div>
                                 </div>
@@ -849,7 +849,7 @@
                 diabetesType: formData.diabetesType || null
             }).then(function(response) {
                 $('#savePatientBtn').prop('disabled', false)
-                    .html('<i class="fe fe-save mr-2"></i>Guardar Paciente');
+                    .html('<i data-feather="save" class="mr-2"></i>Guardar Paciente');
 
                 if (response && response.success) {
                     showAlert('success', `Paciente ${formData.name} creado exitosamente`);
@@ -899,7 +899,7 @@
                 diabetesType: formData.diabetes_type
             }).then(function(response) {
                 $('#updatePatientBtn').prop('disabled', false)
-                    .html('<i class="fe fe-save mr-2"></i>Actualizar');
+                    .html('<i data-feather="save" class="mr-2"></i>Actualizar');
 
                 if (response && response.success) {
                     showAlert('success', 'Paciente actualizado exitosamente');
@@ -995,7 +995,7 @@
                                     </div>
                                 ` : `
                                     <div class="text-center text-muted py-4">
-                                        <i class="fe fe-file-text fe-48 mb-3"></i>
+                                        <i data-feather="file-text" class="fe-48 mb-3"></i>
                                         <p>No hay consultas registradas</p>
                                     </div>
                                 `}
@@ -1082,7 +1082,7 @@
 
             const alertHtml = `
                 <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
-                    <i class="fe fe-${type === 'error' ? 'x-circle' : type === 'success' ? 'check-circle' : type === 'warning' ? 'alert-triangle' : 'info'} mr-2"></i>
+                    ${(function(){var n=type==='error'?'x-circle':type==='success'?'check-circle':type==='warning'?'alert-triangle':'info';return typeof feather!=='undefined'?feather.icons[n].toSvg({'width':16,'height':16,'stroke-width':1.8,'style':'margin-right:6px;vertical-align:middle;'}):'';})()}
                     ${message}
                     <button type="button" class="close" data-dismiss="alert">
                         <span aria-hidden="true">&times;</span>
@@ -1233,5 +1233,17 @@
 <script src="js/gauge.min.js"></script>
 <script src="js/jquery.sparkline.min.js"></script>
 <script src="js/apps.js"></script>
+<script>
+    function _initFeather() {
+        if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
+    }
+    document.addEventListener('DOMContentLoaded', _initFeather);
+    var _fObserver = new MutationObserver(function(mutations) {
+        if (mutations.some(function(m){ return m.addedNodes.length > 0; })) _initFeather();
+    });
+    document.addEventListener('DOMContentLoaded', function() {
+        _fObserver.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
 </body>
 </html>