Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Medispot - Gestión Médica Integral</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-icon { | |
| margin-right: 0; | |
| } | |
| .main-content { | |
| transition: margin-left 0.3s ease; | |
| } | |
| .active-menu { | |
| background-color: #3b82f6; | |
| color: white ; | |
| } | |
| .active-menu:hover { | |
| background-color: #2563eb ; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| background-color: white; | |
| min-width: 200px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 0.5rem; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .patient-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .calendar-day:hover { | |
| background-color: #e0f2fe; | |
| } | |
| .calendar-day.today { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .calendar-day.appointment { | |
| background-color: #f0fdf4; | |
| border: 1px solid #86efac; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 50; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.5); | |
| } | |
| .modal-content { | |
| background-color: white; | |
| margin: 5% auto; | |
| padding: 20px; | |
| border-radius: 0.5rem; | |
| width: 80%; | |
| max-width: 700px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| #full-calendar { | |
| height: 600px; | |
| } | |
| .fc-event { | |
| cursor: pointer; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white text-gray-800 shadow-lg w-64 flex flex-col"> | |
| <div class="p-4 flex items-center border-b border-gray-200"> | |
| <div class="logo-icon mr-3 text-blue-500"> | |
| <i class="fas fa-heartbeat text-2xl"></i> | |
| </div> | |
| <div class="logo-text font-bold text-xl text-blue-600">Medispot</div> | |
| </div> | |
| <div class="p-4 border-b border-gray-200 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user-md text-blue-500"></i> | |
| </div> | |
| <div class="sidebar-text"> | |
| <div class="font-medium">Dr. Juan Pérez</div> | |
| <div class="text-xs text-gray-500">Cardiólogo</div> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto py-4"> | |
| <div class="px-4 mb-6"> | |
| <button id="new-appointment-btn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span class="sidebar-text">Nueva Consulta</span> | |
| </button> | |
| </div> | |
| <ul class="space-y-1 px-2"> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700 active-menu" data-tab="dashboard"> | |
| <i class="fas fa-home mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Inicio</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="schedule"> | |
| <i class="fas fa-calendar-alt mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Agenda</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="patients"> | |
| <i class="fas fa-users mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Pacientes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="prescriptions"> | |
| <i class="fas fa-file-prescription mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Recetas</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="exams"> | |
| <i class="fas fa-flask mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Exámenes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="images"> | |
| <i class="fas fa-procedures mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Imágenes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="reports"> | |
| <i class="fas fa-chart-line mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Reportes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="finance"> | |
| <i class="fas fa-money-bill-wave mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Finanzas</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="px-4 mt-8"> | |
| <div class="text-xs uppercase text-gray-500 mb-2 sidebar-text">Configuración</div> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="settings"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Ajustes</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" data-tab="profile"> | |
| <i class="fas fa-user-shield mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Perfil</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center py-2 px-4 rounded-lg hover:bg-blue-50 text-gray-700" id="logout-btn"> | |
| <i class="fas fa-sign-out-alt mr-3 text-gray-500"></i> | |
| <span class="sidebar-text">Cerrar Sesión</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-moon text-blue-500"></i> | |
| </div> | |
| <span class="sidebar-text text-sm">Modo Oscuro</span> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="dark-mode-toggle" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="mr-4 text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800" id="page-title">Panel Principal</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600" id="notifications-btn"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <div class="dropdown-content right-0 mt-2 w-64"> | |
| <div class="p-3 border-b border-gray-200"> | |
| <h3 class="font-medium">Notificaciones</h3> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto" id="notifications-list"> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-calendar-check text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Nueva cita programada</p> | |
| <p class="text-xs text-gray-500">Hoy a las 4:00 PM</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Resultados de laboratorio pendientes</p> | |
| <p class="text-xs text-gray-500">2 exámenes sin revisar</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-user-plus text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="font-medium">Nuevo paciente registrado</p> | |
| <p class="text-xs text-gray-500">María González</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="p-3 border-t border-gray-200 text-center"> | |
| <a href="#" class="text-sm text-blue-500 font-medium">Ver todas</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative dropdown"> | |
| <button class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> | |
| JP | |
| </div> | |
| <span class="hidden md:inline-block">Dr. Juan Pérez</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="dropdown-content right-0 mt-2"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-tab="profile"><i class="fas fa-user mr-2"></i>Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-tab="settings"><i class="fas fa-cog mr-2"></i>Ajustes</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" id="logout-btn-2"><i class="fas fa-sign-out-alt mr-2"></i>Cerrar Sesión</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Pacientes</p> | |
| <h3 class="text-2xl font-bold" id="total-patients">1,248</h3> | |
| <p class="text-green-500 text-xs">+12 este mes</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Consultas Hoy</p> | |
| <h3 class="text-2xl font-bold" id="today-appointments">8</h3> | |
| <p class="text-green-500 text-xs">+2 pendientes</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4"> | |
| <i class="fas fa-file-prescription text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Recetas Mes</p> | |
| <h3 class="text-2xl font-bold" id="month-prescriptions">42</h3> | |
| <p class="text-green-500 text-xs">+5 esta semana</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-500 mr-4"> | |
| <i class="fas fa-flask text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Exámenes Pend.</p> | |
| <h3 class="text-2xl font-bold" id="pending-exams">15</h3> | |
| <p class="text-red-500 text-xs">3 urgentes</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Patients and Calendar --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Recent Patients --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Pacientes Recientes</h2> | |
| <button class="text-blue-500 hover:text-blue-700 text-sm font-medium" id="view-all-patients">Ver todos</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paciente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Última Visita</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="recent-patients-table"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-500">MG</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">María González</div> | |
| <div class="text-sm text-gray-500">Femenino, 35 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15 Jun 2023</div> | |
| <div class="text-sm text-gray-500">10:30 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Activo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-500">JR</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">José Ramírez</div> | |
| <div class="text-sm text-gray-500">Masculino, 42 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| <div class="text-sm text-gray-500">4:15 PM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Pendiente | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-500">AL</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ana López</div> | |
| <div class="text-sm text-gray-500">Femenino, 28 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12 Jun 2023</div> | |
| <div class="text-sm text-gray-500">9:00 AM</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Activo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Calendar --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Agenda</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium" id="current-month">Junio 2023</h3> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 rounded-full hover:bg-gray-100" id="prev-month"><i class="fas fa-chevron-left"></i></button> | |
| <button class="p-1 rounded-full hover:bg-gray-100" id="next-month"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 mb-2"> | |
| <div class="text-center text-xs font-medium text-gray-500">L</div> | |
| <div class="text-center text-xs font-medium text-gray-500">M</div> | |
| <div class="text-center text-xs font-medium text-gray-500">M</div> | |
| <div class="text-center text-xs font-medium text-gray-500">J</div> | |
| <div class="text-center text-xs font-medium text-gray-500">V</div> | |
| <div class="text-center text-xs font-medium text-gray-500">S</div> | |
| <div class="text-center text-xs font-medium text-gray-500">D</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1" id="calendar-days"> | |
| <!-- Days will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <h3 class="text-sm font-medium mb-2">Consultas de Hoy</h3> | |
| <div class="space-y-3" id="today-appointments-list"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-2 w-2 rounded-full bg-blue-500"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">María González</p> | |
| <p class="text-xs text-gray-500">10:30 AM - Control de presión</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-2 w-2 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Carlos Mendoza</p> | |
| <p class="text-xs text-gray-500">2:15 PM - Consulta de rutina</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-2 w-2 rounded-full bg-purple-500"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Luisa Fernández</p> | |
| <p class="text-xs text-gray-500">4:00 PM - Revisión de resultados</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prescriptions and Exams --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Recent Prescriptions --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recetas Recientes</h2> | |
| <button class="text-blue-500 hover:text-blue-700 text-sm font-medium" id="view-all-prescriptions">Ver todas</button> | |
| </div> | |
| <div class="divide-y divide-gray-200" id="recent-prescriptions-list"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">María González</p> | |
| <p class="text-sm text-gray-500">15 Jun 2023</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Activa</span> | |
| </div> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-700">Losartán 50mg, 1 comprimido cada 24 horas</p> | |
| <p class="text-sm text-gray-700 mt-1">Hidroclorotiazida 25mg, 1 comprimido cada 24 horas</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">José Ramírez</p> | |
| <p class="text-sm text-gray-500">14 Jun 2023</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completada</span> | |
| </div> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-700">Atorvastatina 20mg, 1 comprimido cada noche</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Ana López</p> | |
| <p class="text-sm text-gray-500">12 Jun 2023</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Activa</span> | |
| </div> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-700">Metformina 850mg, 1 comprimido cada 12 horas</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pending Exams --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Exámenes Pendientes</h2> | |
| <button class="text-blue-500 hover:text-blue-700 text-sm font-medium" id="view-all-exams">Ver todos</button> | |
| </div> | |
| <div class="divide-y divide-gray-200" id="pending-exams-list"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Carlos Mendoza</p> | |
| <p class="text-sm text-gray-500">Perfil lipídico</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Urgente</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <p class="text-sm text-gray-500">Solicitado: 10 Jun 2023</p> | |
| <button class="text-xs text-blue-500 hover:text-blue-700">Ver resultados</button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Luisa Fernández</p> | |
| <p class="text-sm text-gray-500">Hemograma completo</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pendiente</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <p class="text-sm text-gray-500">Solicitado: 8 Jun 2023</p> | |
| <button class="text-xs text-blue-500 hover:text-blue-700">Ver resultados</button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Roberto Sánchez</p> | |
| <p class="text-sm text-gray-500">Electrocardiograma</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pendiente</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <p class="text-sm text-gray-500">Solicitado: 5 Jun 2023</p> | |
| <button class="text-xs text-blue-500 hover:text-blue-700">Ver resultados</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Schedule Tab --> | |
| <div id="schedule" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Agenda de Consultas</h2> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm" id="add-appointment-btn">Agregar Consulta</button> | |
| </div> | |
| <div class="p-4"> | |
| <div id="full-calendar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Patients Tab --> | |
| <div id="patients" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Gestión de Pacientes</h2> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar paciente..." class="border border-gray-300 rounded-lg py-1 px-3 text-sm" id="patient-search"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm" id="add-patient-btn">Nuevo Paciente</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paciente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cédula</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teléfono</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Última Visita</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="patients-table"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-500">MG</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">María González</div> | |
| <div class="text-sm text-gray-500">Femenino, 35 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">8-123-456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">6123-4567</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-500">JR</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">José Ramírez</div> | |
| <div class="text-sm text-gray-500">Masculino, 42 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">8-234-567</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">6789-0123</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-500">AL</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ana López</div> | |
| <div class="text-sm text-gray-500">Femenino, 28 años</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">8-345-678</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">6456-7890</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500" id="patients-pagination-info">Mostrando 1-10 de 1,248 pacientes</div> | |
| <div class="flex space-x-2"> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm disabled" id="prev-patients-page">Anterior</button> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm bg-blue-500 text-white" id="current-patients-page">1</button> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm" id="next-patients-page">Siguiente</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prescriptions Tab --> | |
| <div id="prescriptions" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Gestión de Recetas</h2> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar receta..." class="border border-gray-300 rounded-lg py-1 px-3 text-sm" id="prescription-search"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm" id="add-prescription-btn">Nueva Receta</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paciente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Medicamentos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="prescriptions-table"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-500">MG</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">María González</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900">Losartán 50mg, Hidroclorotiazida 25mg</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> | |
| Activa | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-500">JR</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">José Ramírez</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900">Atorvastatina 20mg</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Completada | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-500">AL</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ana López</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900">Metformina 850mg</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> | |
| Activa | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500" id="prescriptions-pagination-info">Mostrando 1-10 de 42 recetas</div> | |
| <div class="flex space-x-2"> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm disabled" id="prev-prescriptions-page">Anterior</button> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm bg-blue-500 text-white" id="current-prescriptions-page">1</button> | |
| <button class="border border-gray-300 rounded-lg py-1 px-3 text-sm" id="next-prescriptions-page">Siguiente</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Exams Tab --> | |
| <div id="exams" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Exámenes Médicos</h2> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar examen..." class="border border-gray-300 rounded-lg py-1 px-3 text-sm" id="exam-search"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm" id="add-exam-btn">Nuevo Examen</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paciente</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="exams-table"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-500">CM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Carlos Mendoza</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Perfil lipídico</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">10 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| Urgente | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-500">LF</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Luisa Fernández</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Hemograma completo</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">8 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Pendiente | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-500">RS</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Roberto Sánchez</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Electrocardiograma</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">5 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Pendiente | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </极速赛车开奖直播网 | |
| </html> |