Spaces:

prodevroger
/

ishingiro

Sleeping

File size: 12,164 Bytes

c024705

<!DOCTYPE html>
<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>&times;</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>