Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AIMHSA AdminLTE 4 Integration Test</title> | |
| <!-- AdminLTE 4 CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <!-- Google Font: Source Sans Pro --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> | |
| <!-- Custom CSS (preserves existing styles) --> | |
| <link rel="stylesheet" href="chatbot/admin.css"> | |
| </head> | |
| <body> | |
| <div class="admin-container"> | |
| <nav class="admin-nav"> | |
| <div class="nav-header"> | |
| <h1>AIMHSA Admin</h1> | |
| <p>Therapy Booking System</p> | |
| </div> | |
| <ul class="nav-menu"> | |
| <li><a href="#professionals" class="nav-link active">Manage Professionals</a></li> | |
| <li><a href="#bookings" class="nav-link">View Bookings</a></li> | |
| <li><a href="#risk-monitor" class="nav-link">Risk Monitor</a></li> | |
| <li><a href="#analytics" class="nav-link">Analytics</a></li> | |
| <li><a href="#rag-status" class="nav-link">RAG Status</a></li> | |
| </ul> | |
| <div class="nav-footer"> | |
| <button id="logoutBtn" class="logout-btn">Logout</button> | |
| </div> | |
| </nav> | |
| <main class="admin-content"> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Global Toolbar --> | |
| <div class="admin-toolbar" id="adminToolbar"> | |
| <div class="toolbar-left"> | |
| <input type="text" id="globalSearch" placeholder="Search users, professionals, bookings..." aria-label="Global search" /> | |
| </div> | |
| <div class="toolbar-right"> | |
| <select id="timeRange"> | |
| <option value="24h">Last 24h</option> | |
| <option value="7d" selected>Last 7 days</option> | |
| <option value="30d">Last 30 days</option> | |
| </select> | |
| <button class="btn-secondary" id="refreshAllBtn">Refresh</button> | |
| </div> | |
| </div> | |
| <!-- KPI Cards --> | |
| <section class="kpi-grid" aria-label="Key metrics"> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Active Bookings</div> | |
| <div class="kpi-value" id="kpiActiveBookings">12</div> | |
| <div class="kpi-trend" id="trendActive">+5%</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Critical Risks</div> | |
| <div class="kpi-value" id="kpiCritical">3</div> | |
| <div class="kpi-trend" id="trendCritical">-2%</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Professionals</div> | |
| <div class="kpi-value" id="kpiProfessionals">8</div> | |
| <div class="kpi-trend" id="trendProfessionals">+1</div> | |
| </div> | |
| <div class="kpi-card"> | |
| <div class="kpi-label">Assessments Today</div> | |
| <div class="kpi-value" id="kpiAssessments">24</div> | |
| <div class="kpi-trend" id="trendAssessments">+12%</div> | |
| </div> | |
| </section> | |
| <!-- Test Section --> | |
| <section class="admin-section active"> | |
| <div class="section-header"> | |
| <h2>AdminLTE 4 Integration Test</h2> | |
| <div class="section-controls"> | |
| <button class="btn-primary" onclick="testToast()">Test Toast</button> | |
| <button class="btn-secondary" onclick="testModal()">Test Modal</button> | |
| <button class="btn-secondary" onclick="testLoading()">Test Loading</button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Integration Status</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h5>AdminLTE 4 Components</h5> | |
| <ul class="list-group list-group-flush"> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> CSS Framework | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Font Awesome Icons | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Bootstrap 4 Components | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Dark Theme Integration | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="col-md-6"> | |
| <h5>Enhanced Features</h5> | |
| <ul class="list-group list-group-flush"> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Mobile Responsive | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Toast Notifications | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Loading States | |
| </li> | |
| <li class="list-group-item"> | |
| <i class="fas fa-check text-success"></i> Animations | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- jQuery --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <!-- Bootstrap 4 --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- AdminLTE 4 --> | |
| <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script> | |
| <script> | |
| // Test functions | |
| function testToast() { | |
| if (typeof $ !== 'undefined' && $.fn.toast) { | |
| const toastHtml = ` | |
| <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <strong class="mr-auto">AIMHSA Admin</strong> | |
| <button type="button" class="ml-2 mb-1 close" data-dismiss="toast"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="toast-body"> | |
| AdminLTE 4 toast notification is working! | |
| </div> | |
| </div> | |
| `; | |
| let toastContainer = document.querySelector('.toast-container'); | |
| if (!toastContainer) { | |
| toastContainer = document.createElement('div'); | |
| toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3'; | |
| toastContainer.style.zIndex = '9999'; | |
| document.body.appendChild(toastContainer); | |
| } | |
| toastContainer.insertAdjacentHTML('beforeend', toastHtml); | |
| const toastElement = toastContainer.lastElementChild; | |
| $(toastElement).toast({ | |
| autohide: true, | |
| delay: 3000 | |
| }); | |
| $(toastElement).toast('show'); | |
| $(toastElement).on('hidden.bs.toast', function() { | |
| $(this).remove(); | |
| }); | |
| } else { | |
| alert('AdminLTE 4 not loaded properly'); | |
| } | |
| } | |
| function testModal() { | |
| if (typeof $ !== 'undefined' && $.fn.modal) { | |
| const modalHtml = ` | |
| <div class="modal fade" id="testModal" tabindex="-1"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Test Modal</h5> | |
| <button type="button" class="close" data-dismiss="modal"> | |
| <span>×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| AdminLTE 4 modal is working correctly! | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| document.body.insertAdjacentHTML('beforeend', modalHtml); | |
| $('#testModal').modal('show'); | |
| $('#testModal').on('hidden.bs.modal', function() { | |
| $(this).remove(); | |
| }); | |
| } else { | |
| alert('Bootstrap 4 not loaded properly'); | |
| } | |
| } | |
| function testLoading() { | |
| const btn = event.target; | |
| btn.classList.add('loading'); | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| btn.classList.remove('loading'); | |
| btn.disabled = false; | |
| testToast(); | |
| }, 2000); | |
| } | |
| // Initialize mobile menu | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileToggle = document.getElementById('mobileMenuToggle'); | |
| const adminNav = document.querySelector('.admin-nav'); | |
| if (mobileToggle && adminNav) { | |
| mobileToggle.addEventListener('click', function() { | |
| adminNav.classList.toggle('mobile-open'); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |