Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>User Role Test - AIMHSA Dashboard</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; background: #f4f4f4; } | |
| .test-container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } | |
| .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } | |
| .success { background-color: #d4edda; border-color: #c3e6cb; } | |
| .error { background-color: #f8d7da; border-color: #f5c6cb; } | |
| .warning { background-color: #fff3cd; border-color: #ffeaa7; } | |
| .info { background-color: #d1ecf1; border-color: #bee5eb; } | |
| button { padding: 10px 20px; margin: 5px; cursor: pointer; border: none; border-radius: 4px; } | |
| .btn-primary { background: #007bff; color: white; } | |
| .btn-success { background: #28a745; color: white; } | |
| .btn-warning { background: #ffc107; color: black; } | |
| .btn-danger { background: #dc3545; color: white; } | |
| .btn-info { background: #17a2b8; color: white; } | |
| .role-demo { display: flex; gap: 20px; margin: 20px 0; } | |
| .role-card { flex: 1; padding: 15px; border: 2px solid #ddd; border-radius: 8px; text-align: center; } | |
| .role-card.admin { border-color: #dc3545; background: #f8d7da; } | |
| .role-card.professional { border-color: #28a745; background: #d4edda; } | |
| .role-card.user { border-color: #17a2b8; background: #d1ecf1; } | |
| .current-session { background: #e9ecef; padding: 10px; border-radius: 4px; margin: 10px 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="test-container"> | |
| <h1>🔐 AIMHSA Dashboard - User Role Testing</h1> | |
| <p>This page allows you to test the admin dashboard with different user roles and see how the interface changes based on the logged-in user.</p> | |
| <div class="test-section info"> | |
| <h3>📋 Current Session Status</h3> | |
| <div id="current-session" class="current-session"> | |
| <p><strong>Current User:</strong> <span id="current-user">Not logged in</span></p> | |
| <p><strong>Current Role:</strong> <span id="current-role">None</span></p> | |
| <p><strong>Session Data:</strong> <span id="session-data">No session found</span></p> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h3>🎭 Test Different User Roles</h3> | |
| <p>Click the buttons below to simulate different user logins and see how the dashboard adapts:</p> | |
| <div class="role-demo"> | |
| <div class="role-card admin"> | |
| <h4>👑 Admin User</h4> | |
| <p>Full system access</p> | |
| <button class="btn-danger" onclick="loginAsAdmin()">Login as Admin</button> | |
| </div> | |
| <div class="role-card professional"> | |
| <h4>👨⚕️ Professional User</h4> | |
| <p>Mental health professional</p> | |
| <button class="btn-success" onclick="loginAsProfessional()">Login as Professional</button> | |
| </div> | |
| <div class="role-card user"> | |
| <h4>👤 Regular User</h4> | |
| <p>Standard user account</p> | |
| <button class="btn-info" onclick="loginAsUser()">Login as User</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h3>🔧 Dashboard Actions</h3> | |
| <button class="btn-primary" onclick="openDashboard()">Open Dashboard</button> | |
| <button class="btn-warning" onclick="clearSession()">Clear Session</button> | |
| <button class="btn-info" onclick="refreshSession()">Refresh Session Info</button> | |
| </div> | |
| <div class="test-section"> | |
| <h3>📊 Expected Behavior by Role</h3> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;"> | |
| <div> | |
| <h4>👑 Admin Role</h4> | |
| <ul> | |
| <li>Full dashboard access</li> | |
| <li>All navigation sections visible</li> | |
| <li>System-wide KPI data</li> | |
| <li>Professional management</li> | |
| <li>User management</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4>👨⚕️ Professional Role</h4> | |
| <ul> | |
| <li>Limited navigation (no admin sections)</li> | |
| <li>Professional-specific KPIs</li> | |
| <li>My Sessions data</li> | |
| <li>Patient management</li> | |
| <li>Risk monitoring</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4>👤 User Role</h4> | |
| <ul> | |
| <li>Minimal navigation</li> | |
| <li>Personal KPI data</li> | |
| <li>My Bookings</li> | |
| <li>Risk assessment history</li> | |
| <li>Session history</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="test-section info"> | |
| <h3>🔍 Debug Information</h3> | |
| <button class="btn-primary" onclick="showDebugInfo()">Show Debug Info</button> | |
| <div id="debug-info" style="margin-top: 10px; display: none;"> | |
| <pre id="debug-content"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample user data for testing | |
| const sampleUsers = { | |
| admin: { | |
| username: 'admin', | |
| email: 'admin@aimhsa.rw', | |
| fullname: 'System Administrator', | |
| role: 'admin' | |
| }, | |
| professional: { | |
| username: 'dr_mukamana', | |
| email: 'dr.mukamana@aimhsa.rw', | |
| fullname: 'Dr. Marie Mukamana', | |
| role: 'professional', | |
| specialization: 'Psychiatrist' | |
| }, | |
| user: { | |
| username: 'testuser', | |
| email: 'testuser@example.com', | |
| fullname: 'Test User', | |
| role: 'user', | |
| risk_level: 'medium' | |
| } | |
| }; | |
| function loginAsAdmin() { | |
| console.log('🔐 Logging in as Admin...'); | |
| localStorage.setItem('aimhsa_admin', JSON.stringify(sampleUsers.admin)); | |
| localStorage.removeItem('aimhsa_professional'); | |
| localStorage.removeItem('aimhsa_account'); | |
| refreshSession(); | |
| showMessage('✅ Logged in as Admin. Open the dashboard to see the changes.', 'success'); | |
| } | |
| function loginAsProfessional() { | |
| console.log('🔐 Logging in as Professional...'); | |
| localStorage.setItem('aimhsa_professional', JSON.stringify(sampleUsers.professional)); | |
| localStorage.removeItem('aimhsa_admin'); | |
| localStorage.removeItem('aimhsa_account'); | |
| refreshSession(); | |
| showMessage('✅ Logged in as Professional. Open the dashboard to see the changes.', 'success'); | |
| } | |
| function loginAsUser() { | |
| console.log('🔐 Logging in as User...'); | |
| localStorage.setItem('aimhsa_account', JSON.stringify(sampleUsers.user)); | |
| localStorage.removeItem('aimhsa_admin'); | |
| localStorage.removeItem('aimhsa_professional'); | |
| refreshSession(); | |
| showMessage('✅ Logged in as User. Open the dashboard to see the changes.', 'success'); | |
| } | |
| function clearSession() { | |
| console.log('🚪 Clearing all sessions...'); | |
| localStorage.removeItem('aimhsa_admin'); | |
| localStorage.removeItem('aimhsa_professional'); | |
| localStorage.removeItem('aimhsa_account'); | |
| refreshSession(); | |
| showMessage('✅ All sessions cleared.', 'info'); | |
| } | |
| function refreshSession() { | |
| const adminSession = localStorage.getItem('aimhsa_admin'); | |
| const professionalSession = localStorage.getItem('aimhsa_professional'); | |
| const userSession = localStorage.getItem('aimhsa_account'); | |
| let currentUser = 'Not logged in'; | |
| let currentRole = 'None'; | |
| let sessionData = 'No session found'; | |
| if (adminSession) { | |
| const user = JSON.parse(adminSession); | |
| currentUser = user.fullname || user.username; | |
| currentRole = 'Admin'; | |
| sessionData = adminSession; | |
| } else if (professionalSession) { | |
| const user = JSON.parse(professionalSession); | |
| currentUser = user.fullname || user.username; | |
| currentRole = 'Professional'; | |
| sessionData = professionalSession; | |
| } else if (userSession) { | |
| const user = JSON.parse(userSession); | |
| currentUser = user.fullname || user.username; | |
| currentRole = 'User'; | |
| sessionData = userSession; | |
| } | |
| document.getElementById('current-user').textContent = currentUser; | |
| document.getElementById('current-role').textContent = currentRole; | |
| document.getElementById('session-data').textContent = sessionData; | |
| } | |
| function openDashboard() { | |
| window.open('admin_dashboard.html', '_blank'); | |
| } | |
| function showDebugInfo() { | |
| const debugInfo = { | |
| localStorage: { | |
| aimhsa_admin: localStorage.getItem('aimhsa_admin'), | |
| aimhsa_professional: localStorage.getItem('aimhsa_professional'), | |
| aimhsa_account: localStorage.getItem('aimhsa_account') | |
| }, | |
| userAgent: navigator.userAgent, | |
| timestamp: new Date().toISOString() | |
| }; | |
| document.getElementById('debug-content').textContent = JSON.stringify(debugInfo, null, 2); | |
| document.getElementById('debug-info').style.display = 'block'; | |
| } | |
| function showMessage(message, type) { | |
| const alertClass = type === 'success' ? 'alert-success' : | |
| type === 'error' ? 'alert-danger' : | |
| type === 'warning' ? 'alert-warning' : 'alert-info'; | |
| const alertHtml = ` | |
| <div class="alert ${alertClass} alert-dismissible fade show" role="alert"> | |
| ${message} | |
| <button type="button" class="close" data-dismiss="alert"> | |
| <span>×</span> | |
| </button> | |
| </div> | |
| `; | |
| // Insert at the top of the container | |
| const container = document.querySelector('.test-container'); | |
| container.insertAdjacentHTML('afterbegin', alertHtml); | |
| // Auto-remove after 5 seconds | |
| setTimeout(() => { | |
| const alert = container.querySelector('.alert'); | |
| if (alert) { | |
| alert.remove(); | |
| } | |
| }, 5000); | |
| } | |
| // Initialize on page load | |
| window.onload = function() { | |
| refreshSession(); | |
| console.log('🚀 User Role Test Page Loaded'); | |
| console.log('📋 Available functions:'); | |
| console.log(' - loginAsAdmin()'); | |
| console.log(' - loginAsProfessional()'); | |
| console.log(' - loginAsUser()'); | |
| console.log(' - clearSession()'); | |
| console.log(' - openDashboard()'); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |