ishingiro

.env

@@ -0,0 +1,39 @@
+# Environment Configuration
+FLASK_ENV=development
+DEBUG=True
+
+# Server Configuration
+SERVER_HOST=0.0.0.0
+SERVER_PORT=7060
+
+# For production hosting (Heroku, Railway, etc.)
+PORT=7060
+
+# API Configuration (leave empty for relative URLs)
+API_BASE_URL=
+FRONTEND_URL=
+
+# Database Configuration
+DB_FILE=storage/conversations.db
+STORAGE_DIR=storage
+DATA_DIR=data
+
+# Email Configuration for AI Mental Health Chatbot
+SMTP_SERVER=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USERNAME=it.elias38@gmail.com
+SMTP_PASSWORD=your-app-password-here
+FROM_EMAIL=noreply@aimhsa.rw
+
+# SMS Configuration
+HDEV_SMS_API_ID=HDEV-23fb1b59-aec0-4aef-a351-bfc1c3aa3c52-ID
+HDEV_SMS_API_KEY=HDEV-6e36c286-19bb-4b45-838e-8b5cd0240857-KEY
+
+# Chat Model Configuration
+CHAT_MODEL=meta-llama/llama-3.1-8b-instruct
+EMBED_MODEL=nomic-embed-text
+SENT_EMBED_MODEL=nomic-embed-text
+OLLAMA_BASE_URL=https://openrouter.ai/api/v1
+OLLAMA_API_KEY=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
+
+# Security Note: Never commit this file with real credentials to version control

AIMHSA_Samples.postman_collection.json

@@ -0,0 +1,104 @@
+{
+  "info": {
+    "name": "AIMHSA RAG Chatbot - Sample Queries",
+    "_postman_id": "feza-aimhsa-rag-002",
+    "description": "Postman collection to test AIMHSA RAG chatbot with sample queries for Rwanda mental health.",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+  },
+  "item": [
+    {
+      "name": "Health Check",
+      "request": {
+        "method": "GET",
+        "header": [],
+        "url": {
+          "raw": "http://127.0.0.1:5057/healthz",
+          "protocol": "http",
+          "host": ["127.0.0.1"],
+          "port": "5057",
+          "path": ["healthz"]
+        }
+      }
+    },
+    {
+      "name": "Ask: PTSD Symptoms",
+      "request": {
+        "method": "POST",
+        "header": [
+          {"key": "Content-Type", "value": "application/json"}
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"query\": \"What are the common symptoms of PTSD in Rwanda?\"\n}"
+        },
+        "url": {
+          "raw": "http://127.0.0.1:5057/ask",
+          "protocol": "http",
+          "host": ["127.0.0.1"],
+          "port": "5057",
+          "path": ["ask"]
+        }
+      }
+    },
+    {
+      "name": "Ask: Coping with Anxiety",
+      "request": {
+        "method": "POST",
+        "header": [
+          {"key": "Content-Type", "value": "application/json"}
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"query\": \"How can someone in Rwanda cope with anxiety?\"\n}"
+        },
+        "url": {
+          "raw": "http://127.0.0.1:5057/ask",
+          "protocol": "http",
+          "host": ["127.0.0.1"],
+          "port": "5057",
+          "path": ["ask"]
+        }
+      }
+    },
+    {
+      "name": "Ask: Depression Support",
+      "request": {
+        "method": "POST",
+        "header": [
+          {"key": "Content-Type", "value": "application/json"}
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"query\": \"What support services exist for depression in Rwanda?\"\n}"
+        },
+        "url": {
+          "raw": "http://127.0.0.1:5057/ask",
+          "protocol": "http",
+          "host": ["127.0.0.1"],
+          "port": "5057",
+          "path": ["ask"]
+        }
+      }
+    },
+    {
+      "name": "Ask: Mental Health Policy",
+      "request": {
+        "method": "POST",
+        "header": [
+          {"key": "Content-Type", "value": "application/json"}
+        ],
+        "body": {
+          "mode": "raw",
+          "raw": "{\n  \"query\": \"Summarize Rwanda's National Mental Health Policy.\"\n}"
+        },
+        "url": {
+          "raw": "http://127.0.0.1:5057/ask",
+          "protocol": "http",
+          "host": ["127.0.0.1"],
+          "port": "5057",
+          "path": ["ask"]
+        }
+      }
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.11
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+COPY . .
+
+# Create writable directories
+RUN mkdir -p /app/instance && chmod -R 777 /app/instance
+ENV HF_HOME=/app/transformers_cache
+RUN mkdir -p /app/transformers_cache && chmod -R 777 /app/transformers_cache
+
+# Create ../data directory for vector store
+RUN mkdir -p /app/data && chmod -R 777 /app/data
+RUN mkdir -p /data && chmod -R 777 /data
+
+# Create uploads directory
+RUN mkdir -p /app/uploads && chmod -R 777 /app/uploads
+
+# Create logs directory
+RUN mkdir -p /app/logs && chmod -R 777 /app/logs
+RUN chmod -R 777 /data
+RUN chmod -R 777 /storage
+
+# Set NLTK data directory and download punkt
+ENV NLTK_DATA=/usr/local/nltk_data
+RUN mkdir -p $NLTK_DATA && python -m nltk.downloader -d $NLTK_DATA punkt
+
+# Pre-download sentence-transformers model
+RUN python -c "from sentence_transformers import SentenceTransformer; SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')"
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

add_sample_data.py

@@ -0,0 +1,225 @@
+#!/usr/bin/env python3
+"""
+Add sample data to the database for testing
+"""
+
+import sqlite3
+import time
+import hashlib
+import uuid
+
+# Database file path
+DB_FILE = "aimhsa.db"
+
+def hash_password(password):
+    """Hash a password using SHA-256"""
+    return hashlib.sha256(password.encode()).hexdigest()
+
+def add_sample_data():
+    """Add sample data to the database"""
+    
+    print("="*60)
+    print("ADDING SAMPLE DATA")
+    print("="*60)
+    
+    conn = sqlite3.connect(DB_FILE)
+    
+    try:
+        current_time = time.time()
+        
+        # Add sample user
+        print("Adding sample user...")
+        conn.execute("""
+            INSERT OR REPLACE INTO users (
+                username, password_hash, created_ts, email, fullname, 
+                telephone, province, district, created_at
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            'Mugisha',
+            hash_password('password123'),
+            current_time,
+            'mugisha@example.com',
+            'Mugisha DUKUZUMUREMYI',
+            '0785354935',
+            'Eastern',
+            'Kirehe',
+            current_time
+        ))
+        print("✅ Sample user 'Mugisha' added")
+        
+        # Add sample professional
+        print("Adding sample professional...")
+        conn.execute("""
+            INSERT OR REPLACE INTO professionals (
+                username, password_hash, first_name, last_name, email, phone,
+                license_number, specialization, expertise_areas, languages,
+                qualifications, availability_schedule, location_latitude,
+                location_longitude, location_address, district, max_patients_per_day,
+                consultation_fee, experience_years, bio, profile_picture,
+                is_active, created_ts, updated_ts
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            'jean.ntwari',
+            hash_password('password123'),
+            'Jean',
+            'Ntwari',
+            'jean.ntwari@example.com',
+            '+250788123456',
+            'LIC123456',
+            'Clinical Psychologist',
+            '["Depression", "Anxiety", "Trauma", "Stress Management"]',
+            '["English", "Kinyarwanda", "French"]',
+            '["PhD in Clinical Psychology", "Licensed Clinical Psychologist"]',
+            '{"monday": "09:00-17:00", "tuesday": "09:00-17:00", "wednesday": "09:00-17:00", "thursday": "09:00-17:00", "friday": "09:00-17:00"}',
+            -1.9441,
+            30.0619,
+            'Kigali, Rwanda',
+            'Kigali',
+            10,
+            50000.0,
+            8,
+            'Experienced clinical psychologist specializing in trauma therapy and cognitive behavioral therapy.',
+            None,
+            1,
+            current_time,
+            current_time
+        ))
+        print("✅ Sample professional 'Jean Ntwari' added")
+        
+        # Get professional ID
+        professional = conn.execute("SELECT id FROM professionals WHERE username = 'jean.ntwari'").fetchone()
+        professional_id = professional[0]
+        
+        # Add sample conversation
+        conv_id = str(uuid.uuid4())
+        print("Adding sample conversation...")
+        conn.execute("""
+            INSERT OR REPLACE INTO conversations (
+                conv_id, owner_key, preview, ts
+            ) VALUES (?, ?, ?, ?)
+        """, (
+            conv_id,
+            'Mugisha',
+            'User is feeling overwhelmed and struggling with low mood. Needs support and resources.',
+            current_time
+        ))
+        print("✅ Sample conversation added")
+        
+        # Add sample messages
+        print("Adding sample messages...")
+        messages = [
+            (conv_id, 'user', 'I am feeling overwhelmed and tired. I need help.', current_time - 3600),
+            (conv_id, 'assistant', 'I understand you\'re feeling overwhelmed and tired. That sounds really difficult. Can you tell me more about what\'s been going on?', current_time - 3500),
+            (conv_id, 'user', 'I have been struggling with low mood and lack of motivation. Everything feels too much.', current_time - 3400),
+            (conv_id, 'assistant', 'I hear that you\'re experiencing low mood and feeling like everything is too much. These feelings are valid and it\'s important that you\'re reaching out for support. Would you like me to help you connect with a mental health professional?', current_time - 3300),
+            (conv_id, 'user', 'Yes, I think I need professional help. I am in Rwanda and not sure where to find good mental health support.', current_time - 3200),
+            (conv_id, 'assistant', 'I can help you connect with a qualified mental health professional in Rwanda. Based on your needs, I\'ll create a booking for you with a professional who specializes in mood disorders and stress management.', current_time - 3100)
+        ]
+        
+        for msg in messages:
+            conn.execute("""
+                INSERT OR REPLACE INTO messages (
+                    conv_id, role, content, ts
+                ) VALUES (?, ?, ?, ?)
+            """, msg)
+        
+        print("✅ Sample messages added")
+        
+        # Add sample automated booking
+        booking_id = 'd63a7794-a89c-452c-80a6-24691e3cb848'
+        print("Adding sample automated booking...")
+        conn.execute("""
+            INSERT OR REPLACE INTO automated_bookings (
+                booking_id, conv_id, user_account, user_ip, professional_id,
+                risk_level, risk_score, detected_indicators, conversation_summary,
+                booking_status, scheduled_datetime, session_type, location_preference,
+                notes, created_ts, updated_ts
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            booking_id,
+            conv_id,
+            'Mugisha',
+            '127.0.0.1',
+            professional_id,
+            'medium',
+            0.5,
+            '["user_requested_booking"]',
+            '**Professional Summary:**\n\n**Client:** Female, Rwandan national\n\n**Presenting Concerns:** Feeling overwhelmed, tired, and struggling with low mood.\n\n**Emotional State:** The client is expressing emotional distress, feeling not good, and acknowledging the need for support. She appears to be experiencing significant stress and is open to exploring resources for mental health support in Rwanda.\n\n**Risk Factors:** None explicitly mentioned, but the context suggests a history of challenges faced by Rwanda, which may contribute to the client\'s current emotional state.\n\n**Key Issues:**\n\n* Feeling overwhelmed and tired\n* Low mood and lack of motivation\n* Difficulty in accessing mental health resources in Rwanda\n* Interest in exploring relaxation techniques, journaling, or grounding exercises as coping mechanisms\n\nThis conversation highlights the importance of acknowledging and addressing the client\'s emotional pain, while also providing her with information and support to access necessary resources. Further guidance on managing stress and improving mental well-being is warranted.\n\n**Recommendations:**\n\n* Schedule a follow-up appointment to assess the client\'s progress and provide ongoing support.\n* Explore additional coping mechanisms, such as cognitive-behavioral therapy (CBT) or mindfulness-based interventions.\n* Connect the client with local resources, such as mental health hotlines or counseling services, for continued support.\n\n**Next Steps:**\n\n* Coordinate follow-up appointments to ensure the client\'s ongoing progress and well-being.\n* Monitor the client\'s emotional state and adjust treatment plans as needed.',
+            'confirmed',
+            current_time + 86400,  # Tomorrow
+            'urgent',
+            'Kigali',
+            'Client needs immediate support for mood and stress management.',
+            current_time,
+            current_time + 200  # Updated 200 seconds later
+        ))
+        print("✅ Sample automated booking added")
+        
+        # Add sample conversation messages
+        print("Adding conversation messages...")
+        conv_messages = [
+            (conv_id, 'user', 'I am feeling overwhelmed and tired. I need help.', current_time - 3600),
+            (conv_id, 'assistant', 'I understand you\'re feeling overwhelmed and tired. That sounds really difficult. Can you tell me more about what\'s been going on?', current_time - 3500),
+            (conv_id, 'user', 'I have been struggling with low mood and lack of motivation. Everything feels too much.', current_time - 3400),
+            (conv_id, 'assistant', 'I hear that you\'re experiencing low mood and feeling like everything is too much. These feelings are valid and it\'s important that you\'re reaching out for support. Would you like me to help you connect with a mental health professional?', current_time - 3300),
+            (conv_id, 'user', 'Yes, I think I need professional help. I am in Rwanda and not sure where to find good mental health support.', current_time - 3200),
+            (conv_id, 'assistant', 'I can help you connect with a qualified mental health professional in Rwanda. Based on your needs, I\'ll create a booking for you with a professional who specializes in mood disorders and stress management.', current_time - 3100)
+        ]
+        
+        for msg in conv_messages:
+            conn.execute("""
+                INSERT OR REPLACE INTO conversation_messages (
+                    conv_id, sender, content, timestamp
+                ) VALUES (?, ?, ?, ?)
+            """, msg)
+        
+        print("✅ Conversation messages added")
+        
+        # Add sample professional notification
+        print("Adding sample professional notification...")
+        conn.execute("""
+            INSERT OR REPLACE INTO professional_notifications (
+                professional_id, booking_id, notification_type, title, message,
+                is_read, priority, created_ts
+            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+        """, (
+            professional_id,
+            booking_id,
+            'new_booking',
+            'URGENT: MEDIUM Risk Case - Mugisha DUKUZUMUREMYI',
+            'Automated booking created for medium risk case. Risk indicators: user_requested_booking\n\nUser Contact Information:\nName: Mugisha DUKUZUMUREMYI\nPhone: 0785354935\nEmail: mugisha@example.com\nLocation: Kirehe, Eastern',
+            0,
+            'high',
+            current_time
+        ))
+        print("✅ Sample professional notification added")
+        
+        # Commit all changes
+        conn.commit()
+        
+        print("\n" + "="*60)
+        print("SAMPLE DATA ADDITION COMPLETE!")
+        print("="*60)
+        
+        # Verify data was added
+        user_count = conn.execute("SELECT COUNT(*) FROM users").fetchone()[0]
+        professional_count = conn.execute("SELECT COUNT(*) FROM professionals").fetchone()[0]
+        booking_count = conn.execute("SELECT COUNT(*) FROM automated_bookings").fetchone()[0]
+        message_count = conn.execute("SELECT COUNT(*) FROM messages").fetchone()[0]
+        
+        print(f"\nData Summary:")
+        print(f"   Users: {user_count}")
+        print(f"   Professionals: {professional_count}")
+        print(f"   Bookings: {booking_count}")
+        print(f"   Messages: {message_count}")
+        
+        conn.close()
+        
+    except Exception as e:
+        print(f"❌ Error adding sample data: {e}")
+        conn.close()
+        raise
+
+if __name__ == "__main__":
+    add_sample_data()
+

chatbot/admin.css

@@ -0,0 +1,2280 @@
+/* Admin Dashboard Styles with AdminLTE 4 Integration */
+:root {
+    --primary: #7c3aed;
+    --primary-light: #a855f7;
+    --primary-dark: #5b21b6;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --card: #334155;
+    --text: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --border-light: #475569;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --critical: #dc2626;
+    --high: #ea580c;
+    --medium: #d97706;
+    --low: #059669;
+    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+/* AdminLTE 4 Compatibility Overrides */
+body {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* ========================================
+   EXPERTISE AREAS - ENHANCED DESIGN
+   ======================================== */
+
+.expertise-grid {
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
+    border: 1px solid var(--border-light);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-top: 0.5rem;
+}
+
+.expertise-category {
+    margin-bottom: 1.5rem;
+}
+
+.expertise-category:last-child {
+    margin-bottom: 0;
+}
+
+.category-title {
+    color: var(--text);
+    font-weight: 600;
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--border-light);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.category-title i {
+    font-size: 1.1rem;
+}
+
+.expertise-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.expertise-option {
+    position: relative;
+}
+
+.expertise-checkbox {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.expertise-label {
+    display: flex;
+    align-items: center;
+    padding: 0.875rem 1rem;
+    background: var(--surface);
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    color: var(--text-secondary);
+    position: relative;
+    overflow: hidden;
+}
+
+.expertise-label::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--primary);
+    transform: scaleY(0);
+    transition: transform 0.3s ease;
+}
+
+.expertise-label:hover {
+    background: rgba(124, 58, 237, 0.1);
+    border-color: var(--primary-light);
+    color: var(--text);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
+}
+
+.expertise-label i {
+    margin-right: 0.75rem;
+    font-size: 1.1rem;
+    color: var(--primary-light);
+    transition: color 0.3s ease;
+}
+
+.expertise-label span {
+    flex: 1;
+    font-size: 0.95rem;
+}
+
+/* Checked state */
+.expertise-checkbox:checked + .expertise-label {
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
+    border-color: var(--primary);
+    color: var(--text);
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
+}
+
+.expertise-checkbox:checked + .expertise-label::before {
+    transform: scaleY(1);
+}
+
+.expertise-checkbox:checked + .expertise-label i {
+    color: var(--primary);
+}
+
+/* Focus state for accessibility */
+.expertise-checkbox:focus + .expertise-label {
+    outline: 2px solid var(--primary-light);
+    outline-offset: 2px;
+}
+
+/* Select All Controls */
+.expertise-controls {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.expertise-controls .btn {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.expertise-controls .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.expertise-count {
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+#selectedCount {
+    color: var(--primary);
+    font-weight: 600;
+}
+
+/* Form validation states */
+.expertise-grid.is-invalid {
+    border-color: var(--danger);
+    background: rgba(239, 68, 68, 0.05);
+}
+
+.expertise-grid.is-valid {
+    border-color: var(--success);
+    background: rgba(16, 185, 129, 0.05);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .expertise-grid {
+        padding: 1rem;
+    }
+    
+    .expertise-label {
+        padding: 0.75rem 0.875rem;
+    }
+    
+    .expertise-label i {
+        margin-right: 0.5rem;
+        font-size: 1rem;
+    }
+    
+    .expertise-label span {
+        font-size: 0.9rem;
+    }
+    
+    .expertise-controls {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .expertise-controls .btn {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+    
+    .expertise-count {
+        margin-left: 0 !important;
+        margin-top: 0.5rem;
+    }
+}
+
+/* Animation for smooth interactions */
+@keyframes expertiseSelect {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.02);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.expertise-checkbox:checked + .expertise-label {
+    animation: expertiseSelect 0.3s ease;
+}
+
+/* Dark theme enhancements */
+@media (prefers-color-scheme: dark) {
+    .expertise-label {
+        background: rgba(30, 41, 59, 0.8);
+        border-color: rgba(71, 85, 105, 0.6);
+    }
+    
+    .expertise-label:hover {
+        background: rgba(124, 58, 237, 0.2);
+        border-color: var(--primary-light);
+    }
+    
+    .expertise-checkbox:checked + .expertise-label {
+        background: linear-gradient(135deg, rgba(124, 58, 237, 0.25) 0%, rgba(168, 85, 247, 0.25) 100%);
+    }
+}
+
+/* ========================================
+   BOOKINGS SECTION - ENHANCED DESIGN
+   ======================================== */
+
+.bookings-card {
+    border: none;
+    box-shadow: var(--shadow-lg);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.bookings-card .card-header {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+    border-bottom: none;
+    padding: 1.5rem;
+}
+
+.bookings-card .card-title {
+    color: white;
+    font-weight: 600;
+    font-size: 1.25rem;
+    margin: 0;
+}
+
+.bookings-card .card-title i {
+    margin-right: 0.5rem;
+}
+
+.bookings-filters {
+    background: rgba(124, 58, 237, 0.05);
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    padding: 1.5rem;
+}
+
+.bookings-filters .form-label {
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.bookings-filters .form-control {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface);
+    color: var(--text);
+    transition: all 0.3s ease;
+}
+
+.bookings-filters .form-control:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25);
+    background: var(--surface);
+    color: var(--text);
+}
+
+.bookings-filters .btn {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.bookings-filters .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Info Boxes */
+.info-box {
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
+    border: none;
+    overflow: hidden;
+}
+
+.info-box:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.info-box-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.info-box-content {
+    padding: 1rem;
+}
+
+.info-box-text {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.info-box-number {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: white;
+    margin-top: 0.25rem;
+}
+
+/* Gradient Backgrounds */
+.bg-gradient-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.bg-gradient-success {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.bg-gradient-warning {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.bg-gradient-danger {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+/* Enhanced Table Styling */
+#bookingsTable {
+    border: none;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+#bookingsTable thead th {
+    background: var(--surface);
+    color: var(--text);
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 0.5px;
+    border: none;
+    padding: 1rem 0.75rem;
+}
+
+#bookingsTable thead th i {
+    margin-right: 0.5rem;
+    color: var(--primary);
+}
+
+#bookingsTable tbody tr {
+    transition: all 0.3s ease;
+    border: none;
+}
+
+#bookingsTable tbody tr:hover {
+    background: rgba(124, 58, 237, 0.1);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
+}
+
+#bookingsTable tbody td {
+    border: none;
+    padding: 1rem 0.75rem;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--border-light);
+}
+
+/* User Details Styling */
+.user-details {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+    flex-shrink: 0;
+}
+
+.user-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.user-name {
+    font-weight: 600;
+    color: var(--text);
+    margin: 0;
+    font-size: 0.95rem;
+}
+
+.user-contact {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin: 0.25rem 0 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.user-contact a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.user-contact a:hover {
+    color: var(--primary-light);
+    text-decoration: underline;
+}
+
+.user-location {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin: 0.25rem 0 0 0;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.user-location i {
+    font-size: 0.7rem;
+}
+
+/* Professional Info Styling */
+.professional-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.professional-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    font-size: 0.8rem;
+    flex-shrink: 0;
+}
+
+.professional-name {
+    font-weight: 500;
+    color: var(--text);
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.professional-specialization {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin: 0.25rem 0 0 0;
+}
+
+/* Risk Level Badges */
+.risk-badge {
+    padding: 0.375rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.risk-badge i {
+    font-size: 0.7rem;
+}
+
+.risk-badge.critical {
+    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+    color: white;
+}
+
+.risk-badge.high {
+    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+    color: white;
+}
+
+.risk-badge.medium {
+    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+    color: white;
+}
+
+.risk-badge.low {
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+    color: white;
+}
+
+/* Status Badges */
+.status-badge {
+    padding: 0.375rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.status-badge i {
+    font-size: 0.7rem;
+}
+
+.status-badge.pending {
+    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+    color: white;
+}
+
+.status-badge.confirmed {
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+    color: white;
+}
+
+.status-badge.completed {
+    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+    color: white;
+}
+
+.status-badge.declined {
+    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+    color: white;
+}
+
+.status-badge.cancelled {
+    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
+    color: white;
+}
+
+/* Action Buttons */
+.action-buttons {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.action-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    font-size: 0.8rem;
+}
+
+.action-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.action-btn.btn-info {
+    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+    color: white;
+}
+
+.action-btn.btn-warning {
+    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+    color: white;
+}
+
+.action-btn.btn-danger {
+    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+    color: white;
+}
+
+.action-btn.btn-success {
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+    color: white;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .bookings-filters .row > div {
+        margin-bottom: 1rem;
+    }
+    
+    .user-details {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .user-avatar {
+        width: 32px;
+        height: 32px;
+        font-size: 0.8rem;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .action-btn {
+        width: 28px;
+        height: 28px;
+        font-size: 0.7rem;
+    }
+    
+    .info-box-content {
+        padding: 0.75rem;
+    }
+    
+    .info-box-number {
+        font-size: 1.25rem;
+    }
+}
+
+/* Loading States */
+.bookings-loading {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-secondary);
+}
+
+.bookings-loading i {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--primary);
+}
+
+/* Empty State */
+.bookings-empty {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-secondary);
+}
+
+.bookings-empty i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: var(--text-muted);
+}
+
+.bookings-empty h4 {
+    color: var(--text);
+    margin-bottom: 0.5rem;
+}
+
+.bookings-empty p {
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+}
+
+/* Large Avatar Styling for Modal */
+.user-avatar-large {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 700;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    box-shadow: var(--shadow);
+}
+
+.professional-avatar-large {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 700;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    box-shadow: var(--shadow);
+}
+
+/* Modal Enhancements */
+.modal-xl {
+    max-width: 1200px;
+}
+
+.modal-content {
+    border: none;
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+    border-bottom: 1px solid var(--border-light);
+    border-radius: 12px 12px 0 0;
+}
+
+.modal-body {
+    padding: 2rem;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    border-top: 1px solid var(--border-light);
+    border-radius: 0 0 12px 12px;
+}
+
+/* Booking Details Modal Styling */
+.booking-header {
+    border-bottom: 2px solid var(--border-light);
+    padding-bottom: 1rem;
+}
+
+.booking-header h4 {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.booking-header code {
+    background: var(--surface);
+    color: var(--primary);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+/* Card Styling in Modal */
+.modal-body .card {
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+
+.modal-body .card-header {
+    border-bottom: 1px solid var(--border-light);
+    font-weight: 600;
+}
+
+.modal-body .card-body {
+    background: var(--surface);
+}
+
+.modal-body .card-body p {
+    margin-bottom: 0.75rem;
+    color: var(--text);
+}
+
+.modal-body .card-body strong {
+    color: var(--text);
+    font-weight: 600;
+}
+
+.modal-body .card-body a {
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.modal-body .card-body a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Modal */
+@media (max-width: 768px) {
+    .modal-xl {
+        max-width: 95%;
+    }
+    
+    .modal-body {
+        padding: 1rem;
+    }
+    
+    .user-avatar-large,
+    .professional-avatar-large {
+        width: 60px;
+        height: 60px;
+        font-size: 1.2rem;
+    }
+    
+    .booking-header .row {
+        flex-direction: column;
+    }
+    
+    .booking-header .col-md-4 {
+        text-align: left !important;
+        margin-top: 1rem;
+    }
+}
+
+/* Ensure AdminLTE components work with our dark theme */
+.content-wrapper {
+    background-color: var(--background) !important;
+    color: var(--text) !important;
+}
+
+.main-header {
+    background-color: var(--surface) !important;
+    border-bottom: 1px solid var(--border) !important;
+}
+
+.navbar-nav .nav-link {
+    color: var(--text) !important;
+}
+
+.sidebar {
+    background-color: var(--surface) !important;
+}
+
+.sidebar .nav-link {
+    color: var(--text-secondary) !important;
+}
+
+.sidebar .nav-link:hover {
+    background-color: var(--card) !important;
+    color: var(--text) !important;
+}
+
+.card {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.card-header {
+    background-color: var(--surface) !important;
+    border-bottom: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.btn-primary {
+    background-color: var(--primary) !important;
+    border-color: var(--primary) !important;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark) !important;
+    border-color: var(--primary-dark) !important;
+}
+
+.btn-secondary {
+    background-color: var(--surface) !important;
+    border-color: var(--border) !important;
+    color: var(--text) !important;
+}
+
+.btn-secondary:hover {
+    background-color: var(--card) !important;
+    border-color: var(--border-light) !important;
+}
+
+.form-control {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.form-control:focus {
+    background-color: var(--card) !important;
+    border-color: var(--primary) !important;
+    color: var(--text) !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+}
+
+.table {
+    color: var(--text) !important;
+}
+
+.table th {
+    background-color: var(--surface) !important;
+    border-color: var(--border) !important;
+    color: var(--text) !important;
+}
+
+.table td {
+    border-color: var(--border) !important;
+}
+
+.modal-content {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.modal-header {
+    border-bottom: 1px solid var(--border) !important;
+}
+
+.modal-footer {
+    border-top: 1px solid var(--border) !important;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--background);
+    color: var(--text);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.admin-container {
+    display: flex;
+    height: 100vh;
+    background: var(--background);
+}
+
+/* Navigation */
+.admin-nav {
+    width: 280px;
+    background: linear-gradient(180deg, #111827 0%, #0f172a 60%);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.nav-header {
+    padding: 24px 20px;
+    border-bottom: 1px solid var(--border);
+}
+
+.nav-header h1 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary-light);
+    margin-bottom: 4px;
+}
+
+.nav-header p {
+    font-size: 14px;
+    color: var(--text-muted);
+}
+
+.nav-menu {
+    flex: 1;
+    list-style: none;
+    padding: 20px 0;
+}
+
+.nav-link {
+    display: block;
+    padding: 12px 20px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+}
+
+.nav-link:hover {
+    background: rgba(124, 58, 237, 0.1);
+    color: var(--primary-light);
+}
+
+.nav-link.active {
+    background: rgba(124, 58, 237, 0.15);
+    color: var(--primary-light);
+    border-left-color: var(--primary);
+}
+
+.nav-footer {
+    padding: 20px;
+    border-top: 1px solid var(--border);
+}
+
+.logout-btn {
+    width: 100%;
+    padding: 10px;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.logout-btn:hover {
+    background: var(--danger);
+    border-color: var(--danger);
+    color: white;
+}
+
+/* Main Content */
+.admin-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+}
+
+/* Toolbar */
+.admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
+.admin-toolbar input{ flex:1; padding:10px 12px; background: var(--surface); border:1px solid var(--border); border-radius:8px; color: var(--text); }
+.admin-toolbar select{ padding:10px 12px; background: var(--surface); border:1px solid var(--border); border-radius:8px; color: var(--text); }
+
+/* KPI cards */
+.kpi-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:24px; }
+.kpi-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow: var(--shadow); }
+.kpi-label{ color: var(--text-muted); font-size:12px; margin-bottom:8px; }
+.kpi-value{ font-size:28px; font-weight:700; color: var(--text); }
+.kpi-trend{ font-size:12px; color: var(--text-secondary); margin-top:6px; }
+
+/* Pager & FAB & Toast */
+.pager { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 0; color: var(--text-secondary); }
+.pager-btn { padding:6px 10px; background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:6px; cursor:pointer; }
+.pager-btn:disabled { opacity:.5; cursor:not-allowed; }
+.pager-info { font-size:12px; }
+
+.fab { position:fixed; right:20px; bottom:20px; background: var(--primary); color:#fff; border:none; border-radius:9999px; padding:12px 16px; box-shadow: var(--shadow-lg); cursor:pointer; font-weight:600; }
+.fab:hover { background: var(--primary-dark); }
+
+.toast { background: rgba(30,41,59,.95); color:#e5e7eb; padding:10px 14px; border:1px solid var(--border); border-radius:8px; box-shadow: var(--shadow); transform: translateY(0); transition: opacity .2s ease, transform .2s ease; }
+.toast-success { border-color: rgba(16,185,129,.4); color:#10b981; }
+.toast-error { border-color: rgba(239,68,68,.4); color:#ef4444; }
+
+.admin-section {
+    display: none;
+}
+
+.admin-section.active {
+    display: block;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.section-header h2 {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text);
+}
+
+.section-controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.search-box input {
+    padding: 8px 12px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    width: 200px;
+}
+
+.search-box input::placeholder {
+    color: var(--text-muted);
+}
+
+/* Buttons */
+.btn-primary {
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 10px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.btn-primary:hover {
+    background: var(--primary-dark);
+}
+
+.btn-secondary {
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 10px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.btn-secondary:hover {
+    background: var(--card);
+}
+
+/* Professional Grid */
+.professionals-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 20px;
+}
+
+.professional-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+    transition: all 0.2s ease;
+}
+
+.professional-card:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow-lg);
+}
+
+.professional-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+}
+
+.professional-name {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 4px;
+}
+
+.professional-specialization {
+    font-size: 14px;
+    color: var(--primary-light);
+    font-weight: 500;
+}
+
+.professional-status {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.status-active {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+
+.status-inactive {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+}
+
+.professional-details {
+    margin-bottom: 16px;
+}
+
+.professional-detail {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.professional-detail span:first-child {
+    color: var(--text-muted);
+}
+
+.professional-detail span:last-child {
+    color: var(--text-secondary);
+}
+
+.professional-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.btn-small {
+    padding: 6px 12px;
+    font-size: 12px;
+    border-radius: 4px;
+}
+
+.btn-danger {
+    background: var(--danger);
+    color: white;
+    border: 1px solid var(--danger);
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+    border-color: #dc2626;
+}
+
+/* Bookings Table */
+.bookings-table {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.bookings-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.bookings-table th {
+    background: var(--card);
+    padding: 16px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text);
+    border-bottom: 1px solid var(--border);
+}
+
+.bookings-table td {
+    padding: 16px;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
+}
+
+.bookings-table tr:hover {
+    background: rgba(124, 58, 237, 0.05);
+}
+
+.risk-badge {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.risk-critical {
+    background: rgba(220, 38, 38, 0.2);
+    color: var(--critical);
+}
+
+.risk-high {
+    background: rgba(234, 88, 12, 0.2);
+    color: var(--high);
+}
+
+.risk-medium {
+    background: rgba(217, 119, 6, 0.2);
+    color: var(--medium);
+}
+
+.risk-low {
+    background: rgba(5, 150, 105, 0.2);
+    color: var(--low);
+}
+
+.status-badge {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.status-pending {
+    background: rgba(245, 158, 11, 0.2);
+    color: var(--warning);
+}
+
+.status-confirmed {
+    background: rgba(16, 185, 129, 0.2);
+    color: var(--success);
+}
+
+.status-completed {
+    background: rgba(59, 130, 246, 0.2);
+    color: #3b82f6;
+}
+
+.status-declined {
+    background: rgba(239, 68, 68, 0.2);
+    color: var(--danger);
+}
+
+/* Risk Dashboard */
+.risk-dashboard {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+}
+
+.risk-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+.stat-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.stat-card h3 {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.stat-number {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--text);
+}
+
+.stat-card.critical {
+    border-color: var(--critical);
+}
+
+.stat-card.critical .stat-number {
+    color: var(--critical);
+}
+
+.stat-card.high {
+    border-color: var(--high);
+}
+
+.stat-card.high .stat-number {
+    color: var(--high);
+}
+
+.stat-card.medium {
+    border-color: var(--medium);
+}
+
+.stat-card.medium .stat-number {
+    color: var(--medium);
+}
+
+.stat-card.low {
+    border-color: var(--low);
+}
+
+.stat-card.low .stat-number {
+    color: var(--low);
+}
+
+.recent-assessments {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.recent-assessments h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 16px;
+}
+
+.assessment-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.assessment-item:last-child {
+    border-bottom: none;
+}
+
+.assessment-info {
+    flex: 1;
+}
+
+.assessment-query {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+}
+
+.assessment-time {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+/* Analytics */
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.analytics-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    text-align: center;
+}
+
+.analytics-card h3 {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+    font-weight: 500;
+}
+
+.analytics-number {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--primary-light);
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background: var(--surface);
+    margin: 5% auto;
+    padding: 24px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.modal-content.large {
+    max-width: 800px;
+}
+
+.close {
+    color: var(--text-muted);
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.close:hover {
+    color: var(--text);
+}
+
+/* Form Styles */
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: var(--text);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 14px;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+}
+
+.checkbox-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 8px;
+}
+
+.checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: normal;
+    margin-bottom: 0;
+}
+
+.checkbox-group input[type="checkbox"] {
+    width: auto;
+    margin: 0;
+}
+
+.form-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .admin-nav {
+        width: 240px;
+    }
+    
+    .admin-content {
+        padding: 16px;
+    }
+    
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+    }
+    
+    .section-controls {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .risk-dashboard {
+        grid-template-columns: 1fr;
+    }
+    
+    .risk-stats {
+        grid-template-columns: 1fr;
+    }
+    
+    .modal-content {
+        margin: 10% auto;
+        width: 95%;
+    }
+}
+
+/* RAG Status Styles */
+.rag-status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.rag-card {
+    background: var(--card);
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid var(--border);
+}
+
+.rag-card h3 {
+    color: var(--text);
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 8px;
+}
+
+.rag-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.rag-label {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+.rag-value {
+    color: var(--text);
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.rag-status-indicator {
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.rag-status-indicator.active {
+    background: var(--success);
+    color: white;
+}
+
+.rag-status-indicator.inactive {
+    background: var(--danger);
+    color: white;
+}
+
+.rag-data-sources {
+    background: var(--card);
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid var(--border);
+}
+
+.rag-data-sources h3 {
+    color: var(--text);
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.data-sources-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 12px;
+}
+
+.data-source-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    background: var(--surface);
+    border-radius: 8px;
+    border: 1px solid var(--border-light);
+}
+
+.source-name {
+    color: var(--text);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.source-status {
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.source-status.active {
+    background: var(--success);
+    color: white;
+}
+
+.source-status.inactive {
+    background: var(--danger);
+    color: white;
+}
+
+/* AdminLTE 4 Additional Enhancements */
+/* Toast Notifications */
+.toast {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.toast-header {
+    background-color: var(--surface) !important;
+    border-bottom: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+/* DataTables Integration */
+.dataTables_wrapper {
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_filter input {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_length select {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+    background-color: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    background-color: var(--card) !important;
+    color: var(--text) !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.current {
+    background-color: var(--primary) !important;
+    color: white !important;
+}
+
+/* Select2 Integration */
+.select2-container--default .select2-selection--single {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: var(--text) !important;
+}
+
+.select2-container--default .select2-dropdown {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+}
+
+.select2-container--default .select2-results__option {
+    color: var(--text) !important;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--primary) !important;
+    color: white !important;
+}
+
+/* Chart.js Integration */
+.chart-container {
+    background-color: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 8px;
+    padding: 20px;
+}
+
+/* SweetAlert2 Integration */
+.swal2-popup {
+    background-color: var(--card) !important;
+    color: var(--text) !important;
+}
+
+.swal2-title {
+    color: var(--text) !important;
+}
+
+.swal2-content {
+    color: var(--text-secondary) !important;
+}
+
+.swal2-confirm {
+    background-color: var(--primary) !important;
+}
+
+.swal2-cancel {
+    background-color: var(--surface) !important;
+    color: var(--text) !important;
+}
+
+/* Loading States */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.spinner-border {
+    color: var(--primary) !important;
+}
+
+/* Enhanced Animations */
+.fade-in {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+/* Responsive Enhancements */
+@media (max-width: 768px) {
+    .admin-nav {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .admin-nav.mobile-open {
+        transform: translateX(0);
+    }
+    
+    .admin-content {
+        margin-left: 0;
+    }
+    
+    .mobile-menu-toggle {
+        display: block;
+    }
+}
+
+.mobile-menu-toggle {
+    display: none;
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1000;
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+/* Print Styles */
+@media print {
+    .admin-nav,
+    .admin-toolbar,
+    .btn,
+    .modal {
+        display: none !important;
+    }
+    
+    .admin-content {
+        margin-left: 0 !important;
+        width: 100% !important;
+    }
+    
+    .card {
+        border: 1px solid #000 !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Form Validation Styles */
+.form-control.is-invalid {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+.form-control.is-valid {
+    border-color: #28a745;
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+}
+
+/* Modal Improvements */
+.modal {
+    z-index: 1050;
+}
+
+.modal-backdrop {
+    z-index: 1040;
+}
+
+/* Professional Form Styles */
+#professionalForm .form-group {
+    margin-bottom: 1rem;
+}
+
+#professionalForm .form-check {
+    margin-bottom: 0.5rem;
+}
+
+#professionalForm .form-check-input {
+    margin-top: 0.25rem;
+}
+
+/* Button States */
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Professional Card Improvements */
+.professional-card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.professional-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.professional-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.btn-small {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border-radius: 0.25rem;
+}
+
+/* Form Input Focus States */
+.form-control:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25);
+}
+
+/* Professional Form Specific Styles */
+#professionalForm {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+/* Force input functionality */
+#professionalForm input,
+#professionalForm select,
+#professionalForm textarea {
+    background-color: #fff !important;
+    color: #495057 !important;
+    border: 1px solid #ced4da !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    border-radius: 0.25rem !important;
+    width: 100% !important;
+    display: block !important;
+    pointer-events: auto !important;
+    user-select: text !important;
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+}
+
+#professionalForm input:focus,
+#professionalForm select:focus,
+#professionalForm textarea:focus {
+    border-color: #7c3aed !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+    outline: 0 !important;
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+#professionalForm input:not(:disabled):not([readonly]) {
+    background-color: #fff !important;
+    color: #495057 !important;
+    cursor: text !important;
+}
+
+/* Ensure form controls work */
+#professionalForm .form-control {
+    background-color: #fff !important;
+    color: #495057 !important;
+    border: 1px solid #ced4da !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    border-radius: 0.25rem !important;
+    pointer-events: auto !important;
+    user-select: text !important;
+}
+
+#professionalForm .form-control:focus {
+    border-color: #7c3aed !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+    outline: 0 !important;
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+/* Modal input fixes */
+#professionalModal input,
+#professionalModal select,
+#professionalModal textarea {
+    background-color: #fff !important;
+    color: #495057 !important;
+    border: 1px solid #ced4da !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    border-radius: 0.25rem !important;
+    width: 100% !important;
+    display: block !important;
+    pointer-events: auto !important;
+    user-select: text !important;
+}
+
+#professionalModal input:focus,
+#professionalModal select:focus,
+#professionalModal textarea:focus {
+    border-color: #7c3aed !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+    outline: 0 !important;
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+#professionalForm .form-control {
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    background-color: #fff !important;
+    color: #495057 !important;
+    border: 1px solid #ced4da !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    border-radius: 0.25rem !important;
+}
+
+#professionalForm .form-control:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+    outline: 0 !important;
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+#professionalForm .form-control:not(:disabled):not([readonly]) {
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+#professionalForm input[type="text"],
+#professionalForm input[type="email"],
+#professionalForm input[type="tel"],
+#professionalForm input[type="password"],
+#professionalForm input[type="number"],
+#professionalForm select,
+#professionalForm textarea {
+    background-color: #fff !important;
+    color: #495057 !important;
+    border: 1px solid #ced4da !important;
+    padding: 0.375rem 0.75rem !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    border-radius: 0.25rem !important;
+    width: 100% !important;
+    display: block !important;
+}
+
+#professionalForm input:focus,
+#professionalForm select:focus,
+#professionalForm textarea:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25) !important;
+    outline: 0 !important;
+    background-color: #fff !important;
+    color: #495057 !important;
+}
+
+#professionalForm .form-control:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25);
+}
+
+#professionalForm .form-control.is-valid {
+    border-color: #28a745;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.94-.94 1.44 1.44 3.16-3.16.94.94-4.1 4.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+#professionalForm .form-control.is-invalid {
+    border-color: #dc3545;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+/* Expertise Areas Styling */
+#professionalForm .form-check {
+    margin-bottom: 0.5rem;
+    padding-left: 1.5rem;
+}
+
+#professionalForm .form-check-input {
+    margin-top: 0.25rem;
+    margin-left: -1.5rem;
+}
+
+#professionalForm .form-check-label {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Modal Improvements */
+.modal-dialog {
+    margin: 1.75rem auto;
+}
+
+.modal-content {
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    border-bottom: 1px solid #dee2e6;
+    padding: 1rem 1.5rem;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.modal-footer {
+    border-top: 1px solid #dee2e6;
+    padding: 1rem 1.5rem;
+}
+
+/* Button Improvements */
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-primary:disabled {
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+/* Loading State */
+.btn.loading {
+    position: relative;
+    color: transparent;
+}
+
+.btn.loading::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 50%;
+    left: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+    border: 2px solid transparent;
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Loading States */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1060;
+}
+
+.toast {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+}
+
+.toast-success {
+    border-left: 4px solid var(--success);
+}
+
+.toast-error {
+    border-left: 4px solid var(--danger);
+}

chatbot/admin.js

@@ -0,0 +1,1281 @@
+(() => {
+    // Get API URL from configuration
+    const getAPIRoot = () => {
+        if (window.AIMHSA && window.AIMHSA.Config) {
+            return window.AIMHSA.Config.getApiBaseUrl();
+        }
+        
+        // Fallback to intelligent detection
+        try {
+            const loc = window.location;
+            if (loc.port === '8000') {
+                return `${loc.protocol}//${loc.hostname}:5057`;
+            } else if (loc.port === '5057' || loc.port === '') {
+                return loc.origin;
+            } else {
+                return 'http://localhost:5057';
+            }
+        } catch (_) {
+            return 'http://localhost:5057';
+        }
+    };
+    
+    const API_ROOT = getAPIRoot();
+    const API_BASE_URL = API_ROOT; // For compatibility
+    
+    // Simple inline message helper
+    function showMessage(text, type = 'error') {
+        const existing = document.querySelector('.inline-message');
+        if (existing) existing.remove();
+        const message = document.createElement('div');
+        message.className = `inline-message ${type}`;
+        message.textContent = text;
+        message.style.cssText = `
+            position: fixed; left: 50%; transform: translateX(-50%);
+            top: 12px; z-index: 10000; padding: 10px 14px; border-radius: 8px;
+            font-size: 14px; font-weight: 500;
+            ${type === 'success'
+                ? 'background: rgba(16,185,129,0.12); color:#047857; border:1px solid rgba(16,185,129,0.3);'
+                : 'background: rgba(239,68,68,0.12); color:#991b1b; border:1px solid rgba(239,68,68,0.3);'}
+        `;
+        document.body.appendChild(message);
+        setTimeout(() => message.remove(), 3500);
+    }
+
+    // Check admin authentication
+    const adminData = localStorage.getItem('aimhsa_admin');
+    if (!adminData) {
+        // Check if they're logged in as a different type of user
+        const userData = localStorage.getItem('aimhsa_account');
+        const professionalData = localStorage.getItem('aimhsa_professional');
+        
+        if (userData && userData !== 'null') {
+            alert('You are logged in as a regular user. Please logout and login as an admin.');
+            window.location.href = '/';
+            return;
+        }
+        
+        if (professionalData) {
+            alert('You are logged in as a professional. Please logout and login as an admin.');
+            window.location.href = '/professional_dashboard.html';
+            return;
+        }
+        
+        window.location.href = '/login';
+        return;
+    }
+    
+    // Elements
+    const navLinks = document.querySelectorAll('.nav-link');
+    const adminSections = document.querySelectorAll('.admin-section');
+    const addProfessionalBtn = document.getElementById('addProfessionalBtn');
+    const professionalModal = document.getElementById('professionalModal');
+    const professionalForm = document.getElementById('professionalForm');
+    const professionalsGrid = document.getElementById('professionalsGrid');
+    const bookingsTableBody = document.getElementById('bookingsTableBody');
+    const statusFilter = document.getElementById('statusFilter');
+    const riskLevelFilter = document.getElementById('riskLevelFilter');
+    const refreshStatsBtn = document.getElementById('refreshStatsBtn');
+    const recentAssessments = document.getElementById('recentAssessments');
+    const logoutBtn = document.getElementById('logoutBtn');
+    
+    // State
+    let professionals = [];
+    let filteredProfessionals = [];
+    let professionalsPage = 1;
+    const PRO_PAGE_SIZE = 8;
+
+    let bookings = [];
+    let filteredBookings = [];
+    let bookingsPage = 1;
+    const BOOK_PAGE_SIZE = 10;
+
+    let assessments = [];
+    
+    // API Helper
+    async function api(path, opts = {}) {
+        const url = API_ROOT + path;
+        const res = await fetch(url, {
+            headers: {
+                'Content-Type': 'application/json',
+                ...opts.headers
+            },
+            ...opts
+        });
+        
+        if (!res.ok) {
+            const txt = await res.text();
+            throw new Error(txt || res.statusText);
+        }
+        
+        return res.json();
+    }
+    
+    // Navigation
+    navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const target = link.getAttribute('href').substring(1);
+            
+            // Update active nav link
+            navLinks.forEach(l => l.classList.remove('active'));
+            link.classList.add('active');
+            
+            // Show target section
+            adminSections.forEach(section => {
+                section.classList.remove('active');
+                if (section.id === target) {
+                    section.classList.add('active');
+                    
+                    // Load section data
+                    switch(target) {
+                        case 'professionals':
+                            loadProfessionals();
+                            break;
+                        case 'bookings':
+                            loadBookings();
+                            break;
+                        case 'risk-monitor':
+                            loadRiskStats();
+                            loadRecentAssessments();
+                            break;
+                        case 'analytics':
+                            loadAnalytics();
+                            break;
+                    }
+                }
+            });
+        });
+    });
+
+    // Toolbar actions (global search and refresh)
+    const globalSearch = document.getElementById('globalSearch');
+    const timeRange = document.getElementById('timeRange');
+    const refreshAllBtn = document.getElementById('refreshAllBtn');
+    if (globalSearch) {
+        globalSearch.addEventListener('input', debounce(() => {
+            const q = globalSearch.value.toLowerCase().trim();
+            if (document.getElementById('professionals').classList.contains('active')) {
+                filteredProfessionals = professionals.filter(p => (
+                    `${p.first_name} ${p.last_name}`.toLowerCase().includes(q) ||
+                    (p.specialization || '').toLowerCase().includes(q) ||
+                    (p.email || '').toLowerCase().includes(q)
+                ));
+                professionalsPage = 1; renderProfessionals();
+            } else if (document.getElementById('bookings').classList.contains('active')) {
+                filteredBookings = bookings.filter(b => (
+                    (b.user_account || '').toLowerCase().includes(q) ||
+                    `${b.first_name} ${b.last_name}`.toLowerCase().includes(q) ||
+                    (b.risk_level || '').toLowerCase().includes(q)
+                ));
+                bookingsPage = 1; renderBookings();
+            }
+        }, 250));
+    }
+    if (refreshAllBtn) {
+        refreshAllBtn.addEventListener('click', () => {
+            loadProfessionals();
+            loadBookings();
+            loadRiskStats();
+            loadRecentAssessments();
+            loadAnalytics();
+            showToast('Data refreshed', 'success');
+        });
+    }
+    
+    // Utility: Toast notifications
+    function showToast(message, type = 'info') {
+        const host = document.body;
+        let container = document.getElementById('toastContainer');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'toastContainer';
+            container.style.cssText = 'position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:9999';
+            host.appendChild(container);
+        }
+        const el = document.createElement('div');
+        el.className = `toast toast-${type}`;
+        el.textContent = message;
+        container.appendChild(el);
+        setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(10px)'; }, 10);
+        setTimeout(() => container.removeChild(el), 3000);
+    }
+
+    // Debounce helper
+    function debounce(fn, wait = 300) {
+        let t;
+        return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), wait); };
+    }
+
+    // Load Professionals
+    async function loadProfessionals() {
+        try {
+            const response = await api('/admin/professionals');
+            professionals = response.professionals || [];
+            filteredProfessionals = professionals.slice();
+            professionalsPage = 1;
+            renderProfessionals();
+        } catch (error) {
+            console.error('Failed to load professionals:', error);
+            showMessage('Failed to load professionals', 'error');
+            showToast('Failed to load professionals', 'error');
+        }
+    }
+    
+    function renderProfessionals() {
+        professionalsGrid.innerHTML = '';
+        
+        if (filteredProfessionals.length === 0) {
+            professionalsGrid.innerHTML = '<p class="no-data">No professionals found</p>';
+            return;
+        }
+        
+        // Paging
+        const start = (professionalsPage - 1) * PRO_PAGE_SIZE;
+        const end = start + PRO_PAGE_SIZE;
+        const pageItems = filteredProfessionals.slice(start, end);
+
+        pageItems.forEach(prof => {
+            const card = document.createElement('div');
+            card.className = 'professional-card';
+            
+            const expertiseAreas = prof.expertise_areas.join(', ');
+            const languages = prof.languages.join(', ');
+            
+            card.innerHTML = `
+                <div class="professional-header">
+                    <div>
+                        <div class="professional-name">${prof.first_name} ${prof.last_name}</div>
+                        <div class="professional-specialization">${prof.specialization}</div>
+                    </div>
+                    <div class="professional-status ${prof.is_active ? 'status-active' : 'status-inactive'}">
+                        ${prof.is_active ? 'Active' : 'Inactive'}
+                    </div>
+                </div>
+                
+                <div class="professional-details">
+                    <div class="professional-detail">
+                        <span>Email:</span>
+                        <span>${prof.email}</span>
+                    </div>
+                    <div class="professional-detail">
+                        <span>Phone:</span>
+                        <span>${prof.phone || 'Not provided'}</span>
+                    </div>
+                    <div class="professional-detail">
+                        <span>Experience:</span>
+                        <span>${prof.experience_years} years</span>
+                    </div>
+                    <div class="professional-detail">
+                        <span>District:</span>
+                        <span>${prof.district || 'Not specified'}</span>
+                    </div>
+                    <div class="professional-detail">
+                        <span>Expertise:</span>
+                        <span>${expertiseAreas || 'Not specified'}</span>
+                    </div>
+                    <div class="professional-detail">
+                        <span>Languages:</span>
+                        <span>${languages}</span>
+                    </div>
+                </div>
+                
+                <div class="professional-actions">
+                    <button class="btn-small btn-secondary" onclick="editProfessional(${prof.id})">Edit</button>
+                    <button class="btn-small btn-secondary" onclick="toggleProfessionalStatus(${prof.id}, ${prof.is_active})">
+                        ${prof.is_active ? 'Deactivate' : 'Activate'}
+                    </button>
+                    <button class="btn-small btn-danger" onclick="deleteProfessional(${prof.id}, '${prof.first_name} ${prof.last_name}')">Delete</button>
+                </div>
+            `;
+            
+            professionalsGrid.appendChild(card);
+        });
+
+        // Pagination controls
+        renderProPagination();
+    }
+
+    function renderProPagination() {
+        const totalPages = Math.max(1, Math.ceil(filteredProfessionals.length / PRO_PAGE_SIZE));
+        let pager = document.getElementById('proPager');
+        if (!pager) {
+            pager = document.createElement('div');
+            pager.id = 'proPager';
+            pager.className = 'pager';
+            professionalsGrid.parentElement.appendChild(pager);
+        }
+        pager.innerHTML = '';
+        const prev = document.createElement('button'); prev.textContent = 'Prev'; prev.className = 'pager-btn'; prev.disabled = professionalsPage <= 1;
+        const next = document.createElement('button'); next.textContent = 'Next'; next.className = 'pager-btn'; next.disabled = professionalsPage >= totalPages;
+        const info = document.createElement('span'); info.className = 'pager-info'; info.textContent = `Page ${professionalsPage} of ${totalPages}`;
+        prev.onclick = () => { professionalsPage = Math.max(1, professionalsPage - 1); renderProfessionals(); };
+        next.onclick = () => { professionalsPage = Math.min(totalPages, professionalsPage + 1); renderProfessionals(); };
+        pager.appendChild(prev); pager.appendChild(info); pager.appendChild(next);
+    }
+    
+    // Load Bookings
+    async function loadBookings() {
+        try {
+            const params = new URLSearchParams();
+            if (statusFilter.value) params.append('status', statusFilter.value);
+            if (riskLevelFilter.value) params.append('risk_level', riskLevelFilter.value);
+            
+            const response = await api(`/admin/bookings?${params}`);
+            bookings = response.bookings || [];
+            filteredBookings = bookings.slice();
+            bookingsPage = 1;
+            renderBookings();
+        } catch (error) {
+            console.error('Failed to load bookings:', error);
+            showMessage('Failed to load bookings', 'error');
+            showToast('Failed to load bookings', 'error');
+        }
+    }
+    
+    function renderBookings() {
+        bookingsTableBody.innerHTML = '';
+        
+        if (filteredBookings.length === 0) {
+            bookingsTableBody.innerHTML = '<tr><td colspan="7" class="no-data">No bookings found</td></tr>';
+            return;
+        }
+        
+        const start = (bookingsPage - 1) * BOOK_PAGE_SIZE;
+        const end = start + BOOK_PAGE_SIZE;
+        const pageItems = filteredBookings.slice(start, end);
+
+        pageItems.forEach(booking => {
+            const row = document.createElement('tr');
+            
+            const scheduledTime = new Date(booking.scheduled_datetime * 1000).toLocaleString();
+            const userInfo = booking.user_account || `IP: ${booking.user_ip}`;
+            
+            row.innerHTML = `
+                <td>${booking.booking_id.substring(0, 8)}...</td>
+                <td>${userInfo}</td>
+                <td>${booking.first_name} ${booking.last_name}</td>
+                <td><span class="risk-badge risk-${booking.risk_level}">${booking.risk_level.toUpperCase()}</span></td>
+                <td>${scheduledTime}</td>
+                <td><span class="status-badge status-${booking.booking_status}">${booking.booking_status.toUpperCase()}</span></td>
+                <td>
+                    <button class="btn-small btn-secondary" onclick="viewBookingDetails('${booking.booking_id}')">View</button>
+                </td>
+            `;
+            
+            bookingsTableBody.appendChild(row);
+        });
+
+        renderBookingsPagination();
+        ensureExportButton();
+    }
+
+    function renderBookingsPagination() {
+        const totalPages = Math.max(1, Math.ceil(filteredBookings.length / BOOK_PAGE_SIZE));
+        let pager = document.getElementById('bookPager');
+        if (!pager) {
+            pager = document.createElement('div');
+            pager.id = 'bookPager';
+            pager.className = 'pager';
+            const table = document.getElementById('bookingsTable');
+            table.parentElement.appendChild(pager);
+        }
+        pager.innerHTML = '';
+        const prev = document.createElement('button'); prev.textContent = 'Prev'; prev.className = 'pager-btn'; prev.disabled = bookingsPage <= 1;
+        const next = document.createElement('button'); next.textContent = 'Next'; next.className = 'pager-btn'; next.disabled = bookingsPage >= totalPages;
+        const info = document.createElement('span'); info.className = 'pager-info'; info.textContent = `Page ${bookingsPage} of ${totalPages}`;
+        prev.onclick = () => { bookingsPage = Math.max(1, bookingsPage - 1); renderBookings(); };
+        next.onclick = () => { bookingsPage = Math.min(totalPages, bookingsPage + 1); renderBookings(); };
+        pager.appendChild(prev); pager.appendChild(info); pager.appendChild(next);
+    }
+
+    // Export CSV for current bookings view
+    function ensureExportButton() {
+        let btn = document.getElementById('exportBookingsBtn');
+        if (!btn) {
+            btn = document.createElement('button');
+            btn.id = 'exportBookingsBtn';
+            btn.className = 'fab';
+            btn.title = 'Export current bookings to CSV';
+            btn.textContent = '⇩ CSV';
+            document.body.appendChild(btn);
+            btn.addEventListener('click', exportBookingsCsv);
+        }
+    }
+
+    function exportBookingsCsv() {
+        const headers = ['Booking ID','User','Professional','Risk Level','Scheduled Time','Status'];
+        const rows = filteredBookings.map(b => [
+            b.booking_id,
+            b.user_account || `IP: ${b.user_ip}`,
+            `${b.first_name} ${b.last_name}`,
+            b.risk_level,
+            new Date(b.scheduled_datetime * 1000).toISOString(),
+            b.booking_status
+        ]);
+        const csv = [headers, ...rows].map(r => r.map(x => `"${String(x).replace(/"/g,'""')}"`).join(',')).join('\n');
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = `bookings_${Date.now()}.csv`; a.click();
+        URL.revokeObjectURL(url);
+        showToast('Bookings exported');
+    }
+    
+    // Load Risk Stats
+    async function loadRiskStats() {
+        try {
+            const response = await api('/monitor/risk-stats');
+            const stats = response.risk_stats || {};
+            
+            document.getElementById('criticalCount').textContent = stats.critical || 0;
+            document.getElementById('highCount').textContent = stats.high || 0;
+            document.getElementById('mediumCount').textContent = stats.medium || 0;
+            document.getElementById('lowCount').textContent = stats.low || 0;
+        } catch (error) {
+            console.error('Failed to load risk stats:', error);
+        }
+    }
+    
+    // Load Recent Assessments
+    async function loadRecentAssessments() {
+        try {
+            const response = await api('/monitor/recent-assessments?limit=10');
+            assessments = response.recent_assessments || [];
+            renderRecentAssessments();
+        } catch (error) {
+            console.error('Failed to load recent assessments:', error);
+        }
+    }
+    
+    function renderRecentAssessments() {
+        recentAssessments.innerHTML = '';
+        
+        if (assessments.length === 0) {
+            recentAssessments.innerHTML = '<p class="no-data">No recent assessments</p>';
+            return;
+        }
+        
+        assessments.forEach(assessment => {
+            const item = document.createElement('div');
+            item.className = 'assessment-item';
+            
+            const time = new Date(assessment.assessment_timestamp * 1000).toLocaleString();
+            const query = assessment.user_query.length > 60 ? 
+                assessment.user_query.substring(0, 60) + '...' : 
+                assessment.user_query;
+            
+            item.innerHTML = `
+                <div class="assessment-info">
+                    <div class="assessment-query">${query}</div>
+                    <div class="assessment-time">${time}</div>
+                </div>
+                <div>
+                    <span class="risk-badge risk-${assessment.risk_level}">${assessment.risk_level.toUpperCase()}</span>
+                </div>
+            `;
+            
+            recentAssessments.appendChild(item);
+        });
+    }
+    
+    // Load Analytics
+    async function loadAnalytics() {
+        try {
+            // Load professionals count
+            const profResponse = await api('/admin/professionals');
+            document.getElementById('totalProfessionals').textContent = profResponse.professionals?.length || 0;
+            
+            // Load active bookings count
+            const bookingsResponse = await api('/admin/bookings');
+            const activeBookings = bookingsResponse.bookings?.filter(b => 
+                ['pending', 'confirmed'].includes(b.booking_status)
+            ).length || 0;
+            document.getElementById('activeBookings').textContent = activeBookings;
+            
+            // Load completed sessions count
+            const completedSessions = bookingsResponse.bookings?.filter(b => 
+                b.booking_status === 'completed'
+            ).length || 0;
+            document.getElementById('completedSessions').textContent = completedSessions;
+            
+            // Load assessments today count
+            const assessmentsResponse = await api('/admin/risk-assessments?limit=1000');
+            const today = new Date().toDateString();
+            const assessmentsToday = assessmentsResponse.assessments?.filter(a => 
+                new Date(a.assessment_timestamp * 1000).toDateString() === today
+            ).length || 0;
+            document.getElementById('assessmentsToday').textContent = assessmentsToday;
+
+            // Update KPI header cards
+            const activeBookingsKpi = activeBookings;
+            const riskStats = await api('/monitor/risk-stats');
+            document.getElementById('kpiActiveBookings')?.replaceChildren(document.createTextNode(activeBookingsKpi));
+            document.getElementById('kpiCritical')?.replaceChildren(document.createTextNode(riskStats.risk_stats?.critical || 0));
+            document.getElementById('kpiProfessionals')?.replaceChildren(document.createTextNode(profResponse.professionals?.length || 0));
+            document.getElementById('kpiAssessments')?.replaceChildren(document.createTextNode(assessmentsToday));
+
+        } catch (error) {
+            console.error('Failed to load analytics:', error);
+        }
+    }
+    
+    // Professional Management
+    addProfessionalBtn.addEventListener('click', () => {
+        openProfessionalModal();
+    });
+    
+    function openProfessionalModal(professional = null) {
+        const modal = document.getElementById('professionalModal');
+        const form = document.getElementById('professionalForm');
+        const title = document.getElementById('modalTitle');
+        const passwordField = document.getElementById('password');
+        const passwordRequired = document.getElementById('passwordRequired');
+        const passwordHelp = document.getElementById('passwordHelp');
+        
+        // Clear any previous validation states
+        clearFormValidation();
+        
+        if (professional) {
+            title.textContent = 'Edit Professional';
+            form.dataset.professionalId = professional.id;
+            
+            // Make password optional for edit mode
+            passwordField.required = false;
+            passwordRequired.textContent = '';
+            passwordHelp.style.display = 'block';
+        } else {
+            title.textContent = 'Add New Professional';
+            delete form.dataset.professionalId;
+            
+            // Make password required for create mode
+            passwordField.required = true;
+            passwordRequired.textContent = '*';
+            passwordHelp.style.display = 'none';
+        }
+        
+        // Use Bootstrap modal show method
+        $(modal).modal('show');
+        
+        // Handle modal events properly
+        $(modal).off('shown.bs.modal').on('shown.bs.modal', function() {
+            // Reset form first
+            form.reset();
+            
+            // Ensure all inputs are working
+            ensureInputsWorking();
+            
+            if (professional) {
+                // Populate form for edit mode
+                populateForm(professional);
+            } else {
+                // Set default values for add mode
+                document.getElementById('experience_years').value = '0';
+                document.getElementById('consultation_fee').value = '';
+            }
+            
+            // Re-setup form event listeners
+            setupFormEventListeners();
+            
+            // Focus on first input
+            setTimeout(() => {
+                const firstInput = modal.querySelector('input[required]');
+                if (firstInput) {
+                    firstInput.focus();
+                    firstInput.select();
+                }
+            }, 300);
+        });
+    }
+    
+    function populateForm(professional) {
+        // Clear all fields first
+        const form = document.getElementById('professionalForm');
+        form.reset();
+        
+        // Populate text fields
+        document.getElementById('username').value = professional.username || '';
+        document.getElementById('first_name').value = professional.first_name || '';
+        document.getElementById('last_name').value = professional.last_name || '';
+        document.getElementById('email').value = professional.email || '';
+        document.getElementById('phone').value = professional.phone || '';
+        document.getElementById('specialization').value = professional.specialization || '';
+        document.getElementById('experience_years').value = professional.experience_years || 0;
+        document.getElementById('district').value = professional.district || '';
+        document.getElementById('consultation_fee').value = professional.consultation_fee || '';
+        document.getElementById('bio').value = professional.bio || '';
+        
+        // Clear and check expertise areas
+        const expertiseCheckboxes = document.querySelectorAll('input[name="expertise"]');
+        expertiseCheckboxes.forEach(checkbox => {
+            checkbox.checked = false;
+        });
+        
+        if (professional.expertise_areas && Array.isArray(professional.expertise_areas)) {
+            professional.expertise_areas.forEach(area => {
+                const checkbox = document.querySelector(`input[name="expertise"][value="${area}"]`);
+                if (checkbox) {
+                    checkbox.checked = true;
+                }
+            });
+        }
+        
+        // Trigger validation
+        validateForm();
+    }
+    
+    function clearFormValidation() {
+        const form = document.getElementById('professionalForm');
+        const inputs = form.querySelectorAll('.form-control');
+        inputs.forEach(input => {
+            input.classList.remove('is-valid', 'is-invalid');
+            // Ensure input is enabled and working
+            input.disabled = false;
+            input.readOnly = false;
+        });
+    }
+    
+    function ensureInputsWorking() {
+        const form = document.getElementById('professionalForm');
+        const inputs = form.querySelectorAll('input, select, textarea');
+        
+        inputs.forEach(input => {
+            // Ensure all inputs are enabled
+            input.disabled = false;
+            input.readOnly = false;
+            
+            // Add click handler to ensure focus
+            input.addEventListener('click', function() {
+                this.focus();
+            });
+            
+            // Add keydown handler to ensure typing works
+            input.addEventListener('keydown', function(e) {
+                // Allow all normal typing
+                if (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                    return true;
+                }
+            });
+        });
+    }
+    
+    function validateForm() {
+        const form = document.getElementById('professionalForm');
+        const requiredFields = form.querySelectorAll('[required]');
+        let isValid = true;
+        
+        requiredFields.forEach(field => {
+            const value = field.value.trim();
+            if (!value) {
+                field.classList.add('is-invalid');
+                field.classList.remove('is-valid');
+                isValid = false;
+            } else {
+                field.classList.remove('is-invalid');
+                field.classList.add('is-valid');
+            }
+        });
+        
+        // Check if at least one expertise area is selected
+        const expertiseCheckboxes = form.querySelectorAll('input[name="expertise"]');
+        const expertiseSelected = Array.from(expertiseCheckboxes).some(cb => cb.checked);
+        
+        if (!expertiseSelected) {
+            // Add visual indicator for expertise requirement
+            const expertiseContainer = form.querySelector('label[for="expertise_areas"]');
+            if (expertiseContainer) {
+                expertiseContainer.style.color = '#dc3545';
+            }
+            isValid = false;
+        } else {
+            const expertiseContainer = form.querySelector('label[for="expertise_areas"]');
+            if (expertiseContainer) {
+                expertiseContainer.style.color = '';
+            }
+        }
+        
+        // Enable/disable submit button
+        const submitBtn = form.querySelector('button[type="submit"]');
+        if (submitBtn) {
+            submitBtn.disabled = !isValid;
+        }
+        
+        return isValid;
+    }
+    
+    professionalForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        // Validate form before submission
+        if (!validateForm()) {
+            showMessage('Please fill in all required fields', 'error');
+            return;
+        }
+        
+        // Show loading state
+        const submitBtn = professionalForm.querySelector('button[type="submit"]');
+        const originalText = submitBtn.textContent;
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Saving...';
+        
+        try {
+            const formData = new FormData(professionalForm);
+            const data = Object.fromEntries(formData.entries());
+            
+            // Get expertise areas
+            const expertiseAreas = Array.from(document.querySelectorAll('input[name="expertise"]:checked'))
+                .map(cb => cb.value);
+            
+            const professionalData = {
+                ...data,
+                expertise_areas: expertiseAreas,
+                languages: ['english'], // Default for now
+                qualifications: [], // Default for now
+                availability_schedule: {} // Default for now
+            };
+            
+            // Remove empty password for updates
+            if (professionalForm.dataset.professionalId && !professionalData.password) {
+                delete professionalData.password;
+            }
+            
+            const professionalId = professionalForm.dataset.professionalId;
+            let response;
+            
+            if (professionalId) {
+                // Update existing professional
+                response = await api(`/admin/professionals/${professionalId}`, {
+                    method: 'PUT',
+                    body: JSON.stringify(professionalData)
+                });
+                
+                if (response && response.success) {
+                    showMessage('Professional updated successfully', 'success');
+                    showToast('Professional updated', 'success');
+                    closeModal();
+                    loadProfessionals();
+                } else {
+                    showMessage(response?.error || 'Failed to update professional', 'error');
+                }
+            } else {
+                // Create new professional
+                response = await api('/admin/professionals', {
+                    method: 'POST',
+                    body: JSON.stringify(professionalData)
+                });
+                
+                if (response && response.success) {
+                    showMessage('Professional created successfully', 'success');
+                    showToast('Professional created', 'success');
+                    closeModal();
+                    loadProfessionals();
+                } else {
+                    showMessage(response?.error || 'Failed to create professional', 'error');
+                }
+            }
+        } catch (error) {
+            console.error('Failed to save professional:', error);
+            const errorMessage = professionalForm.dataset.professionalId ? 
+                'Failed to update professional' : 'Failed to create professional';
+            showMessage(errorMessage, 'error');
+            showToast(errorMessage, 'error');
+        } finally {
+            // Reset button state
+            submitBtn.disabled = false;
+            submitBtn.textContent = originalText;
+        }
+    });
+    
+    // Modal Management
+    function closeModal() {
+        // Close all Bootstrap modals properly
+        $('.modal').modal('hide');
+        
+        // Clear form validation states
+        setTimeout(() => {
+            clearFormValidation();
+        }, 300);
+    }
+    
+    // Enhanced modal event handlers
+    document.querySelectorAll('.close').forEach(closeBtn => {
+        closeBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            closeModal();
+        });
+    });
+    
+    // Handle cancel button
+    document.querySelectorAll('[data-dismiss="modal"]').forEach(cancelBtn => {
+        cancelBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            closeModal();
+        });
+    });
+    
+    // Handle modal backdrop clicks
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+    });
+    
+    // Handle modal close on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            const openModal = document.querySelector('.modal.show');
+            if (openModal) {
+                closeModal();
+            }
+        }
+    });
+    
+    // Handle modal hidden event to reset form
+    document.getElementById('professionalModal').addEventListener('hidden.bs.modal', function() {
+        const form = document.getElementById('professionalForm');
+        form.reset();
+        clearFormValidation();
+        delete form.dataset.professionalId;
+    });
+    
+    // Add comprehensive form event listeners
+    function setupFormEventListeners() {
+        const form = document.getElementById('professionalForm');
+        
+        // Remove existing listeners to prevent duplicates
+        form.removeEventListener('input', handleFormInput);
+        form.removeEventListener('blur', handleFormBlur);
+        form.removeEventListener('change', handleFormChange);
+        
+        // Add new listeners
+        form.addEventListener('input', handleFormInput);
+        form.addEventListener('blur', handleFormBlur, true);
+        form.addEventListener('change', handleFormChange);
+    }
+    
+    function handleFormInput(e) {
+        // Real-time validation on input
+        validateForm();
+        
+        // Ensure input is working
+        if (e.target.type === 'text' || e.target.type === 'email' || e.target.type === 'tel' || e.target.type === 'password') {
+            e.target.classList.remove('is-invalid');
+            if (e.target.value.trim()) {
+                e.target.classList.add('is-valid');
+            }
+        }
+    }
+    
+    function handleFormBlur(e) {
+        // Validation on blur for better UX
+        if (e.target.classList.contains('form-control')) {
+            validateForm();
+        }
+    }
+    
+    function handleFormChange(e) {
+        // Handle expertise area changes
+        if (e.target.name === 'expertise') {
+            validateForm();
+        }
+        
+        // Handle specialization changes
+        if (e.target.name === 'specialization') {
+            validateForm();
+        }
+    }
+    
+    // Initialize form event listeners
+    setupFormEventListeners();
+    
+    // Debug function to check input functionality
+    function debugInputs() {
+        const form = document.getElementById('professionalForm');
+        const inputs = form.querySelectorAll('input, select, textarea');
+        
+        console.log('Debugging form inputs:');
+        inputs.forEach((input, index) => {
+            console.log(`Input ${index}:`, {
+                type: input.type,
+                name: input.name,
+                id: input.id,
+                disabled: input.disabled,
+                readOnly: input.readOnly,
+                value: input.value,
+                style: input.style.cssText
+            });
+        });
+    }
+    
+    // Add global debug function
+    window.debugFormInputs = debugInputs;
+    
+    // Event Listeners
+    statusFilter.addEventListener('change', loadBookings);
+    riskLevelFilter.addEventListener('change', loadBookings);
+    // Professional search with debounce
+    const professionalSearch = document.getElementById('professionalSearch');
+    if (professionalSearch) {
+        professionalSearch.addEventListener('input', debounce(() => {
+            const q = professionalSearch.value.toLowerCase().trim();
+            filteredProfessionals = professionals.filter(p => (
+                `${p.first_name} ${p.last_name}`.toLowerCase().includes(q) ||
+                (p.specialization || '').toLowerCase().includes(q) ||
+                (p.email || '').toLowerCase().includes(q)
+            ));
+            professionalsPage = 1;
+            renderProfessionals();
+        }, 250));
+    }
+    refreshStatsBtn.addEventListener('click', () => {
+        loadRiskStats();
+        loadRecentAssessments();
+    });
+    
+    logoutBtn.addEventListener('click', () => {
+        if (confirm('Are you sure you want to logout?')) {
+            localStorage.removeItem('aimhsa_admin');
+            localStorage.removeItem('aimhsa_account');
+            localStorage.removeItem('aimhsa_professional');
+            window.location.href = '/login';
+        }
+    });
+    
+    refreshStatsBtn.addEventListener('click', () => {
+        loadRiskStats();
+        loadRecentAssessments();
+    });
+    
+    // Global Functions (for onclick handlers)
+    window.editProfessional = (id) => {
+        const professional = professionals.find(p => p.id === id);
+        if (professional) {
+            openProfessionalModal(professional);
+        }
+    };
+    
+    window.toggleProfessionalStatus = async (id, currentStatus) => {
+        try {
+            const res = await api(`/admin/professionals/${id}/status`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ is_active: !currentStatus })
+            });
+            
+            if (res && res.success) {
+                showToast(`Professional ${!currentStatus ? 'activated' : 'deactivated'}`, 'success');
+                await loadProfessionals();
+            } else {
+                showMessage(res?.error || 'Could not update status', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to toggle status:', error);
+            showMessage('Failed to toggle status', 'error');
+        }
+    };
+    
+    window.deleteProfessional = async (id, name) => {
+        if (!confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) {
+            return;
+        }
+        
+        try {
+            const res = await api(`/admin/professionals/${id}`, {
+                method: 'DELETE'
+            });
+            
+            if (res && res.success) {
+                showToast(`Professional "${name}" deleted successfully`, 'success');
+                await loadProfessionals();
+            } else {
+                showMessage(res?.error || 'Failed to delete professional', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to delete professional:', error);
+            const errorText = await error.text?.() || error.message || 'Failed to delete professional';
+            showMessage(errorText, 'error');
+        }
+    };
+    
+    window.viewBookingDetails = (bookingId) => {
+        const booking = bookings.find(b => b.booking_id === bookingId);
+        if (booking) {
+            const modal = document.getElementById('bookingModal');
+            const details = document.getElementById('bookingDetails');
+            
+            const scheduledTime = new Date(booking.scheduled_datetime * 1000).toLocaleString();
+            const userInfo = booking.user_account || `IP: ${booking.user_ip}`;
+            const indicators = booking.detected_indicators.join(', ');
+            
+            details.innerHTML = `
+                <div class="booking-detail">
+                    <h3>Booking Information</h3>
+                    <p><strong>Booking ID:</strong> ${booking.booking_id}</p>
+                    <p><strong>User:</strong> ${userInfo}</p>
+                    <p><strong>Professional:</strong> ${booking.first_name} ${booking.last_name}</p>
+                    <p><strong>Specialization:</strong> ${booking.specialization}</p>
+                    <p><strong>Risk Level:</strong> <span class="risk-badge risk-${booking.risk_level}">${booking.risk_level.toUpperCase()}</span></p>
+                    <p><strong>Risk Score:</strong> ${(booking.risk_score * 100).toFixed(1)}%</p>
+                    <p><strong>Scheduled Time:</strong> ${scheduledTime}</p>
+                    <p><strong>Session Type:</strong> ${booking.session_type}</p>
+                    <p><strong>Status:</strong> <span class="status-badge status-${booking.booking_status}">${booking.booking_status.toUpperCase()}</span></p>
+                </div>
+                
+                <div class="booking-detail">
+                    <h3>Risk Indicators</h3>
+                    <p>${indicators}</p>
+                </div>
+                
+                <div class="booking-detail">
+                    <h3>Conversation Summary</h3>
+                    <p>${booking.conversation_summary || 'No summary available'}</p>
+                </div>
+            `;
+            
+            modal.style.display = 'block';
+        }
+    };
+    
+    // Initialize
+    loadProfessionals();
+    
+    // Auto-refresh risk stats every 30 seconds
+    setInterval(() => {
+        if (document.querySelector('#risk-monitor').classList.contains('active')) {
+            loadRiskStats();
+            loadRecentAssessments();
+        }
+    }, 30000);
+    
+    // AdminLTE 4 Enhancements
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize AdminLTE components
+        if (typeof $ !== 'undefined' && $.fn.DataTable) {
+            // Initialize DataTables if available
+            initializeDataTables();
+        }
+        
+        // Initialize mobile menu toggle
+        initializeMobileMenu();
+        
+        // Initialize tooltips
+        initializeTooltips();
+        
+        // Initialize loading states
+        initializeLoadingStates();
+        
+        // Initialize animations
+        initializeAnimations();
+    });
+    
+    function initializeDataTables() {
+        // Enhanced table functionality with AdminLTE styling
+        const tables = document.querySelectorAll('table');
+        tables.forEach(table => {
+            if (table.id === 'bookingsTable') {
+                // Add DataTables to bookings table if jQuery and DataTables are available
+                if (typeof $ !== 'undefined' && $.fn.DataTable) {
+                    $(table).DataTable({
+                        responsive: true,
+                        pageLength: 25,
+                        order: [[4, 'desc']], // Sort by scheduled time
+                        columnDefs: [
+                            { targets: [6], orderable: false } // Actions column
+                        ],
+                        language: {
+                            search: "Search bookings:",
+                            lengthMenu: "Show _MENU_ bookings per page",
+                            info: "Showing _START_ to _END_ of _TOTAL_ bookings",
+                            paginate: {
+                                first: "First",
+                                last: "Last",
+                                next: "Next",
+                                previous: "Previous"
+                            }
+                        }
+                    });
+                }
+            }
+        });
+    }
+    
+    function initializeMobileMenu() {
+        const mobileToggle = document.getElementById('mobileMenuToggle');
+        const adminNav = document.querySelector('.admin-nav');
+        
+        if (mobileToggle && adminNav) {
+            mobileToggle.addEventListener('click', function() {
+                adminNav.classList.toggle('mobile-open');
+            });
+            
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', function(e) {
+                if (!adminNav.contains(e.target) && !mobileToggle.contains(e.target)) {
+                    adminNav.classList.remove('mobile-open');
+                }
+            });
+        }
+    }
+    
+    function initializeTooltips() {
+        // Initialize Bootstrap tooltips if available
+        if (typeof $ !== 'undefined' && $.fn.tooltip) {
+            $('[data-toggle="tooltip"]').tooltip();
+        }
+    }
+    
+    function initializeLoadingStates() {
+        // Add loading states to buttons and forms
+        const forms = document.querySelectorAll('form');
+        forms.forEach(form => {
+            form.addEventListener('submit', function() {
+                const submitBtn = form.querySelector('button[type="submit"]');
+                if (submitBtn) {
+                    submitBtn.classList.add('loading');
+                    submitBtn.disabled = true;
+                    
+                    // Remove loading state after 3 seconds (adjust as needed)
+                    setTimeout(() => {
+                        submitBtn.classList.remove('loading');
+                        submitBtn.disabled = false;
+                    }, 3000);
+                }
+            });
+        });
+    }
+    
+    function initializeAnimations() {
+        // Add fade-in animation to cards
+        const cards = document.querySelectorAll('.kpi-card, .stat-card, .analytics-card, .rag-card');
+        cards.forEach((card, index) => {
+            card.classList.add('fade-in');
+            card.style.animationDelay = `${index * 0.1}s`;
+        });
+        
+        // Add slide-in animation to sections
+        const sections = document.querySelectorAll('.admin-section');
+        sections.forEach((section, index) => {
+            section.classList.add('slide-in');
+            section.style.animationDelay = `${index * 0.2}s`;
+        });
+    }
+    
+    // Enhanced notification system using AdminLTE toast
+    function showAdminLTEMessage(text, type = 'error') {
+        if (typeof $ !== 'undefined' && $.fn.toast) {
+            // Use AdminLTE toast if available
+            const toastHtml = `
+                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header">
+                        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} 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">&times;</span>
+                        </button>
+                    </div>
+                    <div class="toast-body">
+                        ${text}
+                    </div>
+                </div>
+            `;
+            
+            // Create toast container if it doesn't exist
+            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);
+            }
+            
+            // Add toast to container
+            toastContainer.insertAdjacentHTML('beforeend', toastHtml);
+            
+            // Initialize and show toast
+            const toastElement = toastContainer.lastElementChild;
+            $(toastElement).toast({
+                autohide: true,
+                delay: 5000
+            });
+            $(toastElement).toast('show');
+            
+            // Remove toast after it's hidden
+            $(toastElement).on('hidden.bs.toast', function() {
+                $(this).remove();
+            });
+        } else {
+            // Fallback to original message system
+            showMessage(text, type);
+        }
+    }
+    
+    // Override the original showMessage function with AdminLTE version
+    window.showMessage = showAdminLTEMessage;
+    
+    // Enhanced refresh functionality
+    function refreshAllData() {
+        const refreshBtn = document.getElementById('refreshAllBtn');
+        if (refreshBtn) {
+            refreshBtn.classList.add('loading');
+            refreshBtn.disabled = true;
+            
+            // Refresh all data
+            Promise.all([
+                loadProfessionals(),
+                loadBookings(),
+                loadRiskStats(),
+                loadRecentAssessments()
+            ]).finally(() => {
+                refreshBtn.classList.remove('loading');
+                refreshBtn.disabled = false;
+                showAdminLTEMessage('All data refreshed successfully', 'success');
+            });
+        }
+    }
+    
+    // Add refresh button event listener
+    document.addEventListener('DOMContentLoaded', function() {
+        const refreshBtn = document.getElementById('refreshAllBtn');
+        if (refreshBtn) {
+            refreshBtn.addEventListener('click', refreshAllData);
+        }
+    });
+    
+    // Update all admin API calls
+    async function getAdminStats() {
+        const response = await fetch(`${API_BASE_URL}/admin/dashboard-stats`);
+        return await response.json();
+    }
+
+    async function listProfessionals() {
+        const response = await fetch(`${API_BASE_URL}/admin/professionals`);
+        return await response.json();
+    }
+
+    async function listBookings() {
+        const response = await fetch(`${API_BASE_URL}/admin/bookings`);
+        return await response.json();
+    }
+
+    async function listUsers() {
+        const response = await fetch(`${API_BASE_URL}/admin/users`);
+        return await response.json();
+    }
+
+    async function testSMSService(phone, message) {
+        const response = await fetch(`${API_BASE_URL}/admin/sms/test`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ phone, message })
+        });
+        return await response.json();
+    }
+
+    async function getSMSStatus() {
+        const response = await fetch(`${API_BASE_URL}/admin/sms/status`);
+        return await response.json();
+    }
+    
+})();

chatbot/admin_dashboard.html

@@ -0,0 +1,1138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIMHSA Advanced Admin Dashboard</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">
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css">
+    <!-- Select2 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <!-- SweetAlert2 CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <!-- FullCalendar CSS removed - not needed for admin dashboard -->
+    
+    <!-- Custom CSS (preserves existing styles) -->
+    <link rel="stylesheet" href="admin.css">
+    
+    <!-- Additional CSS for fixes -->
+    <style>
+        .brand-image, .user-panel .image > div {
+            border-radius: 50%;
+        }
+        
+        .collapsed-card .card-body {
+            display: none;
+        }
+        
+        .card.collapsed-card .card-header::after {
+            content: " (Collapsed)";
+            font-size: 0.8em;
+            color: #6c757d;
+        }
+        
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 9999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .loading-spinner {
+            text-align: center;
+            color: white;
+        }
+        
+        .loading-spinner i {
+            margin-bottom: 10px;
+        }
+        
+        /* Form input fixes */
+        .form-control {
+            background-color: #fff !important;
+            border: 1px solid #ced4da !important;
+            color: #495057 !important;
+        }
+        .form-control:focus {
+            border-color: #80bdff !important;
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+        }
+        .form-control.is-invalid {
+            border-color: #dc3545 !important;
+        }
+        .form-check-input {
+            margin-top: 0.25rem !important;
+        }
+        .modal-body .form-control {
+            background-color: #fff !important;
+            color: #495057 !important;
+        }
+        .modal-body .form-control:disabled {
+            background-color: #e9ecef !important;
+            color: #6c757d !important;
+        }
+    </style>
+    
+    <!-- Configuration Management -->
+    <script src="config.js"></script>
+    <script src="config-ui.js"></script>
+</head>
+<body class="hold-transition sidebar-mini layout-fixed">
+    <div class="wrapper">
+        <!-- Navbar -->
+        <nav class="main-header navbar navbar-expand navbar-dark navbar-primary">
+            <!-- Left navbar links -->
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" data-widget="pushmenu" href="#" role="button">
+                        <i class="fas fa-bars"></i>
+                    </a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link">Dashboard</a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link">Reports</a>
+                </li>
+            </ul>
+
+            <!-- Right navbar links -->
+            <ul class="navbar-nav ml-auto">
+                <!-- Refresh Button -->
+                <li class="nav-item">
+                    <a class="nav-link" href="#" id="refreshAllBtn" title="Refresh All Data">
+                        <i class="fas fa-sync-alt"></i>
+                    </a>
+                </li>
+                <!-- Notifications Dropdown Menu -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-bell"></i>
+                        <span class="badge badge-warning navbar-badge" id="notificationBadge">15</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right notifications-menu">
+                        <span class="dropdown-item dropdown-header">15 Notifications</span>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-envelope mr-2"></i> 4 new messages
+                            <span class="float-right text-muted text-sm">3 mins</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-users mr-2"></i> 8 friend requests
+                            <span class="float-right text-muted text-sm">12 hours</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-file mr-2"></i> 3 new reports
+                            <span class="float-right text-muted text-sm">2 days</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+                    </div>
+                </li>
+                
+                <!-- User Account Dropdown -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-user"></i>
+                        <span class="ml-2">Admin User</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-user mr-2"></i> Profile
+                        </a>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-cog mr-2"></i> Settings
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item" id="logoutBtn">
+                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                        </a>
+            </div>
+                </li>
+            </ul>
+        </nav>
+        
+        <!-- Main Sidebar Container -->
+        <aside class="main-sidebar sidebar-dark-primary elevation-4">
+            <!-- Brand Logo -->
+            <a href="#" class="brand-link">
+                <div class="brand-image img-circle elevation-3" style="opacity: .8; width: 33px; height: 33px; background: #007bff; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px;">AI</div>
+                <span class="brand-text font-weight-light">AIMHSA Admin</span>
+            </a>
+
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <!-- Sidebar user panel -->
+                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+                    <div class="image">
+                        <div class="img-circle elevation-2" style="width: 40px; height: 40px; background: #007bff; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 16px;">AD</div>
+                    </div>
+                    <div class="info">
+                        <a href="#" class="d-block">Admin User</a>
+                        <small class="text-muted">System Administrator</small>
+                    </div>
+                </div>
+
+                <!-- Sidebar Menu -->
+                <nav class="mt-2">
+                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+                        <li class="nav-item">
+                            <a href="#dashboard" class="nav-link active" data-section="dashboard">
+                                <i class="nav-icon fas fa-tachometer-alt"></i>
+                                <p>Dashboard</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#professionals" class="nav-link" data-section="professionals">
+                                <i class="nav-icon fas fa-user-md"></i>
+                                <p>Professionals</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#bookings" class="nav-link" data-section="bookings">
+                                <i class="nav-icon fas fa-calendar-check"></i>
+                                <p>Bookings</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#risk-monitor" class="nav-link" data-section="risk-monitor">
+                                <i class="nav-icon fas fa-exclamation-triangle"></i>
+                                <p>Risk Monitor</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#analytics" class="nav-link" data-section="analytics">
+                                <i class="nav-icon fas fa-chart-bar"></i>
+                                <p>Analytics</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#rag-status" class="nav-link" data-section="rag-status">
+                                <i class="nav-icon fas fa-brain"></i>
+                                <p>RAG Status</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                        </li>
+                        <li class="nav-item">
+                            <a href="#reports" class="nav-link" data-section="reports">
+                                <i class="nav-icon fas fa-file-alt"></i>
+                                <p>Reports</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#settings" class="nav-link" data-section="settings">
+                                <i class="nav-icon fas fa-cog"></i>
+                                <p>Settings</p>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </aside>
+
+        <!-- Content Wrapper -->
+        <div class="content-wrapper">
+            <!-- Content Header -->
+            <div class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1 class="m-0" id="pageTitle">Dashboard</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
+                                <li class="breadcrumb-item active" id="breadcrumbActive">Dashboard</li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+
+                    <!-- Dashboard Section -->
+                    <div id="dashboard-section" class="content-section">
+                        <!-- Info boxes -->
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-info">
+                                    <div class="inner">
+                                        <h3 id="kpiActiveBookings">0</h3>
+                                        <p>Active Bookings</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-calendar-check"></i>
+                                    </div>
+                                    <a href="#bookings" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-danger">
+                                    <div class="inner">
+                                        <h3 id="kpiCritical">0</h3>
+                                        <p>Critical Risks</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-exclamation-triangle"></i>
+                                    </div>
+                                    <a href="#risk-monitor" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-success">
+                                    <div class="inner">
+                                        <h3 id="kpiProfessionals">0</h3>
+                                        <p>Professionals</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-user-md"></i>
+                                    </div>
+                                    <a href="#professionals" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-warning">
+                                    <div class="inner">
+                                        <h3 id="kpiAssessments">0</h3>
+                                        <p>Assessments Today</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-chart-line"></i>
+                                    </div>
+                                    <a href="#analytics" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Charts Row -->
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Risk Assessment Trends</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                                <i class="fas fa-minus"></i>
+                                            </button>
+                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                                <i class="fas fa-times"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="riskTrendChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Risk Distribution</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="riskDistributionChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recent Activity -->
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Recent Bookings</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="table-responsive">
+                                            <table class="table table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>ID</th>
+                                                        <th>User</th>
+                                                        <th>Risk Level</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="recentBookingsTable">
+                                                    <!-- Data will be loaded here -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">System Status</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-6">
+                                                <div class="info-box">
+                                                    <span class="info-box-icon bg-success"><i class="fas fa-server"></i></span>
+                                                    <div class="info-box-content">
+                                                        <span class="info-box-text">API Status</span>
+                                                        <span class="info-box-number">Online</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-6">
+                                                <div class="info-box">
+                                                    <span class="info-box-icon bg-info"><i class="fas fa-database"></i></span>
+                                                    <div class="info-box-content">
+                                                        <span class="info-box-text">Database</span>
+                                                        <span class="info-box-number">Healthy</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col-6">
+                                                <div class="info-box">
+                                                    <span class="info-box-icon bg-warning"><i class="fas fa-brain"></i></span>
+                                                    <div class="info-box-content">
+                                                        <span class="info-box-text">AI Model</span>
+                                                        <span class="info-box-number">Active</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-6">
+                                                <div class="info-box">
+                                                    <span class="info-box-icon bg-primary"><i class="fas fa-sms"></i></span>
+                                                    <div class="info-box-content">
+                                                        <span class="info-box-text">SMS Service</span>
+                                                        <span class="info-box-number">Ready</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                </div>
+                </div>
+                </div>
+                </div>
+                        </div>
+                    </div>
+                    <!-- Professionals Section -->
+                    <div id="professionals-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Management</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-primary" id="addProfessionalBtn">
+                                                <i class="fas fa-plus"></i> Add Professional
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row mb-3">
+                                            <div class="col-md-6">
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" id="professionalSearch" placeholder="Search professionals...">
+                                                    <div class="input-group-append">
+                                                        <button class="btn btn-outline-secondary" type="button">
+                                                            <i class="fas fa-search"></i>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-6">
+                                                <select class="form-control select2" id="professionalSpecializationFilter">
+                                                    <option value="">All Specializations</option>
+                                                    <option value="psychiatrist">Psychiatrist</option>
+                                                    <option value="psychologist">Psychologist</option>
+                                                    <option value="counselor">Counselor</option>
+                                                    <option value="social_worker">Social Worker</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="table-responsive">
+                                            <table id="professionalsTable" class="table table-bordered table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>ID</th>
+                                                        <th>Name</th>
+                                                        <th>Specialization</th>
+                                                        <th>Email</th>
+                                                        <th>Phone</th>
+                                                        <th>Experience</th>
+                                                        <th>Status</th>
+                                                        <th>Actions</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="professionalsTableBody">
+                                                    <!-- Data will be loaded here -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                        </div>
+                    </div>
+                </div>
+                </div>
+            
+                    <!-- Bookings Section -->
+                    <div id="bookings-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Automated Bookings</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success" id="exportBookingsBtn">
+                                                <i class="fas fa-download"></i> Export
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row mb-3">
+                                            <div class="col-md-3">
+                                                <select class="form-control" id="statusFilter">
+                            <option value="">All Status</option>
+                            <option value="pending">Pending</option>
+                            <option value="confirmed">Confirmed</option>
+                            <option value="completed">Completed</option>
+                            <option value="declined">Declined</option>
+                        </select>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <select class="form-control" id="riskLevelFilter">
+                            <option value="">All Risk Levels</option>
+                            <option value="critical">Critical</option>
+                            <option value="high">High</option>
+                            <option value="medium">Medium</option>
+                            <option value="low">Low</option>
+                        </select>
+                    </div>
+                                            <div class="col-md-3">
+                                                <input type="date" class="form-control" id="dateFilter" placeholder="Filter by date">
+                                            </div>
+                                            <div class="col-md-3">
+                                                <button class="btn btn-primary" id="refreshBookingsBtn">
+                                                    <i class="fas fa-sync"></i> Refresh
+                                                </button>
+                                            </div>
+                </div>
+                                        <div class="table-responsive">
+                                            <table id="bookingsTable" class="table table-bordered table-striped">
+                        <thead>
+                            <tr>
+                                <th>Booking ID</th>
+                                <th>User</th>
+                                <th>Professional</th>
+                                <th>Risk Level</th>
+                                <th>Scheduled Time</th>
+                                <th>Status</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="bookingsTableBody">
+                                                    <!-- Data will be loaded here -->
+                        </tbody>
+                    </table>
+                </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            
+                    <!-- Risk Monitor Section -->
+                    <div id="risk-monitor-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-danger">
+                                    <div class="inner">
+                                        <h3 id="criticalCount">0</h3>
+                                        <p>Critical Risk</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-exclamation-triangle"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-warning">
+                                    <div class="inner">
+                                        <h3 id="highCount">0</h3>
+                                        <p>High Risk</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-exclamation-circle"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-info">
+                                    <div class="inner">
+                                        <h3 id="mediumCount">0</h3>
+                                        <p>Medium Risk</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-info-circle"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-success">
+                                    <div class="inner">
+                                        <h3 id="lowCount">0</h3>
+                                        <p>Low Risk</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-check-circle"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Risk Assessment Timeline</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                                <i class="fas fa-minus"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="riskTimelineChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Recent Assessments</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-tool" id="refreshStatsBtn">
+                                                <i class="fas fa-sync"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div id="recentAssessments">
+                                            <!-- Recent assessments will be loaded here -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            
+                    <!-- Analytics Section -->
+                    <div id="analytics-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-info"><i class="fas fa-user-md"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Total Professionals</span>
+                                        <span class="info-box-number" id="totalProfessionals">0</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-success"><i class="fas fa-calendar-check"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Active Bookings</span>
+                                        <span class="info-box-number" id="activeBookings">0</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-warning"><i class="fas fa-check-circle"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Completed Sessions</span>
+                                        <span class="info-box-number" id="completedSessions">0</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-primary"><i class="fas fa-chart-line"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Assessments Today</span>
+                                        <span class="info-box-number" id="assessmentsToday">0</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Monthly Trends</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="monthlyTrendsChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Performance</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="professionalPerformanceChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            
+                    <!-- RAG Status Section -->
+                    <div id="rag-status-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-info"><i class="fas fa-database"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Knowledge Chunks</span>
+                                        <span class="info-box-number" id="totalChunks">15</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-success"><i class="fas fa-brain"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">AI Model</span>
+                                        <span class="info-box-number">Online</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-warning"><i class="fas fa-language"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Languages</span>
+                                        <span class="info-box-number">4</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="info-box">
+                                    <span class="info-box-icon bg-primary"><i class="fas fa-tachometer-alt"></i></span>
+                                    <div class="info-box-content">
+                                        <span class="info-box-text">Response Time</span>
+                                        <span class="info-box-number" id="avgResponseTime">~2s</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">System Performance</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-6">
+                                                <div class="description-block border-right">
+                                                    <span class="description-percentage text-success">
+                                                        <i class="fas fa-caret-up"></i> 98%
+                                                    </span>
+                                                    <h5 class="description-header">Success Rate</h5>
+                                                    <span class="description-text">AI Response Accuracy</span>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-6">
+                                                <div class="description-block">
+                                                    <span class="description-percentage text-info">
+                                                        <i class="fas fa-clock"></i> 2.1s
+                                                    </span>
+                                                    <h5 class="description-header">Avg Response Time</h5>
+                                                    <span class="description-text">Query Processing</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Knowledge Sources</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="list-group list-group-flush">
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                Mental Health Overview
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                Youth Mental Health
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                Rwanda Helplines
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                Self-Help Coping
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                PTSD Trauma Guide
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                            <div class="list-group-item d-flex justify-content-between align-items-center">
+                                                Mental Health Policy
+                                                <span class="badge badge-success badge-pill">Loaded</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <!-- Reports Section -->
+                    <div id="reports-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">System Reports</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success">
+                                                <i class="fas fa-download"></i> Generate Report
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <div class="card card-primary">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Monthly Summary</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Generate comprehensive monthly reports</p>
+                                                        <button class="btn btn-primary">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-success">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Risk Analysis</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Detailed risk assessment reports</p>
+                                                        <button class="btn btn-success">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-warning">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Professional Performance</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Professional workload and performance</p>
+                                                        <button class="btn btn-warning">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Settings Section -->
+                    <div id="settings-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">System Settings</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <form>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>System Name</label>
+                                                        <input type="text" class="form-control" value="AIMHSA Admin">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Admin Email</label>
+                                                        <input type="email" class="form-control" value="admin@aimhsa.rw">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Risk Threshold</label>
+                                                        <select class="form-control">
+                                                            <option>Low</option>
+                                                            <option selected>Medium</option>
+                                                            <option>High</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Auto-Refresh Interval</label>
+                                                        <select class="form-control">
+                                                            <option>30 seconds</option>
+                                                            <option selected>1 minute</option>
+                                                            <option>5 minutes</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button type="submit" class="btn btn-primary">Save Settings</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+    
+    <!-- Professional Modal -->
+    <div class="modal fade" id="professionalModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title" id="modalTitle">Add New Professional</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="professionalForm">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="username">Username *</label>
+                                    <input type="text" class="form-control" id="username" name="username" required>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="password">Password <span id="passwordRequired">*</span></label>
+                                    <input type="password" class="form-control" id="password" name="password" required>
+                                    <small id="passwordHelp" class="form-text text-muted" style="display: none;">Leave blank to keep current password</small>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="first_name">First Name *</label>
+                                    <input type="text" class="form-control" id="first_name" name="first_name" required>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="last_name">Last Name *</label>
+                                    <input type="text" class="form-control" id="last_name" name="last_name" required>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="email">Email *</label>
+                                    <input type="email" class="form-control" id="email" name="email" required>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="phone">Phone</label>
+                                    <input type="tel" class="form-control" id="phone" name="phone">
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="specialization">Specialization *</label>
+                                    <select class="form-control" id="specialization" name="specialization" required>
+                                        <option value="">Select Specialization</option>
+                                        <option value="psychiatrist">Psychiatrist</option>
+                                        <option value="psychologist">Psychologist</option>
+                                        <option value="counselor">Counselor</option>
+                                        <option value="social_worker">Social Worker</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="experience_years">Experience (Years)</label>
+                                    <input type="number" class="form-control" id="experience_years" name="experience_years" min="0" value="0">
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="expertise_areas">Expertise Areas *</label>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="depression" id="expertise_depression">
+                                        <label class="form-check-label" for="expertise_depression">Depression</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="anxiety" id="expertise_anxiety">
+                                        <label class="form-check-label" for="expertise_anxiety">Anxiety</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="ptsd" id="expertise_ptsd">
+                                        <label class="form-check-label" for="expertise_ptsd">PTSD</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="trauma" id="expertise_trauma">
+                                        <label class="form-check-label" for="expertise_trauma">Trauma</label>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="suicide" id="expertise_suicide">
+                                        <label class="form-check-label" for="expertise_suicide">Suicide Prevention</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="crisis" id="expertise_crisis">
+                                        <label class="form-check-label" for="expertise_crisis">Crisis Intervention</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="youth" id="expertise_youth">
+                                        <label class="form-check-label" for="expertise_youth">Youth Mental Health</label>
+                                    </div>
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="expertise" value="family" id="expertise_family">
+                                        <label class="form-check-label" for="expertise_family">Family Therapy</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="district">District</label>
+                                    <input type="text" class="form-control" id="district" name="district" placeholder="e.g., Gasabo, Kigali">
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="consultation_fee">Consultation Fee (RWF)</label>
+                                    <input type="number" class="form-control" id="consultation_fee" name="consultation_fee" min="0">
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="bio">Bio</label>
+                            <textarea class="form-control" id="bio" name="bio" rows="3" placeholder="Brief professional background..."></textarea>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                    <button type="submit" form="professionalForm" class="btn btn-primary">Save Professional</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Booking Details Modal -->
+    <div class="modal fade" id="bookingModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Booking Details</h4>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div id="bookingDetails">
+                        <!-- Booking details will be loaded here -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </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>
+    <!-- DataTables -->
+    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap4.min.js"></script>
+    <!-- Select2 -->
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- FullCalendar removed - not needed for admin dashboard -->
+    
+    <!-- Loading Overlay -->
+    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
+        <div class="loading-spinner">
+            <i class="fas fa-spinner fa-spin fa-3x"></i>
+            <p>Loading...</p>
+        </div>
+    </div>
+
+    <!-- Custom JavaScript (preserves existing functionality) -->
+    <script src="admin_advanced.js"></script>
+</body>
+</html>

chatbot/app.js

@@ -0,0 +1,958 @@
+(() => {
+  // Get API URL from configuration
+  const getAPIBaseUrl = () => {
+    if (window.AIMHSA && window.AIMHSA.Config) {
+      return window.AIMHSA.Config.getApiBaseUrl();
+    }
+    // Fallback to auto-detection
+    return `http://${window.location.hostname}:${window.location.port || '5057'}`;
+  };
+  
+  const API_BASE_URL = getAPIBaseUrl();
+  
+  // Check authentication
+  const account = localStorage.getItem("aimhsa_account");
+  const professionalData = localStorage.getItem("aimhsa_professional");
+  const adminData = localStorage.getItem("aimhsa_admin");
+  
+  if (professionalData) {
+      alert('You are logged in as a professional. Please logout and login as a regular user to use the chat.');
+      window.location.href = '/professional_dashboard.html';
+      return;
+  }
+  
+  if (adminData) {
+      alert('You are logged in as an admin. Please logout and login as a regular user to use the chat.');
+      window.location.href = '/admin_dashboard.html';
+      return;
+  }
+  
+  if (!account) {
+      window.location.href = '/login';
+      return;
+  }
+  
+  // Elements
+  const messagesEl = document.getElementById("messages");
+  const form = document.getElementById("form");
+  const queryInput = document.getElementById("query");
+  const sendBtn = document.getElementById("send");
+  const fileInput = document.getElementById("file");
+  const composer = form; // composer container (used for inserting preview)
+  const historyList = document.getElementById("historyList");
+  const newChatBtn = document.getElementById("newChatBtn");
+  const clearChatBtn = document.getElementById("clearChatBtn");
+  const clearHistoryBtn = document.getElementById("clearHistoryBtn");
+  const logoutBtn = document.getElementById("logoutBtn");
+  const usernameEl = document.getElementById("username");
+  const archivedList = document.getElementById("archivedList");
+  
+  let convId = localStorage.getItem("aimhsa_conv") || null;
+  let typingEl = null;
+  let currentPreview = null;
+  const archivedPwById = new Map();
+  // Model selection: via URL (?model=xyz) or localStorage (aimhsa_model)
+  const urlParams = new URLSearchParams(window.location.search || "");
+  const urlModel = (urlParams.get('model') || '').trim();
+  if (urlModel) {
+    try { localStorage.setItem('aimhsa_model', urlModel); } catch (_) {}
+  }
+  function getSelectedModel() {
+    try { return (localStorage.getItem('aimhsa_model') || '').trim() || null; } catch (_) { return null; }
+  }
+  
+  // Set username
+  usernameEl.textContent = account === 'null' ? 'Guest' : account;
+  
+  // Inject runtime CSS for animations & preview (keeps frontend simple)
+  (function injectStyles(){
+    const css = `
+      @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity:1; transform:none; } }
+      .fade-in { animation: fadeIn 280ms ease both; }
+      .typing { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; width:fit-content; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); }
+      .dots { display:inline-block; width:36px; text-align:center; }
+      .dot { display:inline-block; width:6px; height:6px; margin:0 2px; background:var(--muted); border-radius:50%; opacity:0.25; animation: blink 1s infinite; }
+      .dot:nth-child(2){ animation-delay: .2s; } .dot:nth-child(3){ animation-delay: .4s; }
+      @keyframes blink { 0%{opacity:.25} 50%{opacity:1} 100%{opacity:.25} }
+      .upload-preview { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); margin-right:auto; max-width:420px; }
+      .upload-meta { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
+      .upload-filename { font-weight:600; color:var(--text); }
+      .upload-actions { display:flex; gap:8px; align-items:center; }
+      .progress-bar { width:160px; height:8px; background:rgba(255,255,255,0.03); border-radius:6px; overflow:hidden; }
+      .progress-inner { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #5b21b6); transition:width .2s ease; }
+      .btn-small { padding:6px 8px; border-radius:8px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted); cursor:pointer; font-size:12px; }
+      .sending { opacity:0.7; transform:scale(.98); transition:transform .12s ease, opacity .12s ease; }
+      .msg.fade-in { transform-origin: left top; }
+    `;
+    const s = document.createElement("style");
+    s.textContent = css;
+    document.head.appendChild(s);
+  })();
+
+  // helper: ensure messages container scrolls to bottom after layout updates
+  function ensureScroll() {
+    const doScroll = () => {
+      try {
+        const last = messagesEl.lastElementChild;
+        if (last && typeof last.scrollIntoView === "function") {
+          last.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+        } else {
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        }
+      } catch (e) {
+        try { messagesEl.scrollTop = messagesEl.scrollHeight; } catch (_) {}
+      }
+    };
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setTimeout(doScroll, 40);
+      });
+    });
+  }
+
+  // Logout handler
+  logoutBtn.addEventListener("click", () => {
+    localStorage.removeItem("aimhsa_account");
+    localStorage.removeItem("aimhsa_conv");
+    localStorage.removeItem("aimhsa_professional");
+    localStorage.removeItem("aimhsa_admin");
+    window.location.href = '/login';
+  });
+  
+  // Modern message display
+  function appendMessage(role, text) {
+      const msgDiv = document.createElement("div");
+      msgDiv.className = `msg ${role === "user" ? "user" : "bot"}`;
+      
+      const contentDiv = document.createElement("div");
+      contentDiv.className = "msg-content";
+      
+      const metaDiv = document.createElement("div");
+      metaDiv.className = "msg-meta";
+      metaDiv.textContent = role === "user" ? "You" : "AIMHSA";
+      
+      const textDiv = document.createElement("div");
+      textDiv.className = "msg-text";
+      textDiv.textContent = text;
+      
+      contentDiv.appendChild(metaDiv);
+      contentDiv.appendChild(textDiv);
+      msgDiv.appendChild(contentDiv);
+      
+      messagesEl.appendChild(msgDiv);
+      ensureScroll();
+      return msgDiv;
+  }
+  
+  function createTypingIndicator() {
+      if (typingEl) return;
+      typingEl = document.createElement("div");
+      typingEl.className = "msg bot";
+      
+      const contentDiv = document.createElement("div");
+      contentDiv.className = "typing";
+      
+      const dotsDiv = document.createElement("div");
+      dotsDiv.className = "typing-dots";
+      dotsDiv.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
+      
+      contentDiv.appendChild(dotsDiv);
+      typingEl.appendChild(contentDiv);
+      messagesEl.appendChild(typingEl);
+      ensureScroll();
+  }
+  
+  function removeTypingIndicator() {
+      if (!typingEl) return;
+      typingEl.remove();
+      typingEl = null;
+  }
+  
+  async function api(path, opts) {
+    const url = API_BASE_URL + path;
+    const res = await fetch(url, opts);
+    if (!res.ok) {
+      const txt = await res.text();
+      throw new Error(txt || res.statusText);
+    }
+    return res.json();
+  }
+
+  async function initSession(useAccount = false) {
+    const payload = {};
+    if (useAccount && account) payload.account = account;
+    try {
+      const resp = await api("/session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      convId = resp.id;
+      localStorage.setItem("aimhsa_conv", convId);
+      await loadHistory();
+      await updateHistoryList();
+    } catch (err) {
+      console.error("session error", err);
+      appendMessage("bot", "Could not start session. Try again.");
+    }
+  }
+
+  // helper to generate a client-side conv id when needed (fallback)
+  function newConvId() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID();
+    return "conv-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2,8);
+  }
+
+  async function loadHistory() {
+    if (!convId) return;
+    try {
+      const pw = archivedPwById.get(convId);
+      const url = "/history?id=" + encodeURIComponent(convId) + (pw ? ("&password=" + encodeURIComponent(pw)) : "");
+      const resp = await api(url);
+      messagesEl.innerHTML = "";
+      const hist = resp.history || [];
+      for (const m of hist) {
+        appendMessage(m.role, m.content);
+      }
+      if (resp.attachments && resp.attachments.length) {
+        resp.attachments.forEach(a => {
+          appendMessage("bot", `Attachment (${a.filename}):\n` + (a.text.slice(0,400) + (a.text.length>400?"...[truncated]":"")));
+        });
+      }
+      ensureScroll();
+    } catch (err) {
+      console.error("history load error", err);
+    }
+  }
+
+  // Auto-resize textarea
+  function autoResizeTextarea() {
+    queryInput.style.height = 'auto';
+    const scrollHeight = queryInput.scrollHeight;
+    const maxHeight = 120; // Match CSS max-height
+    queryInput.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+  }
+
+  // Add textarea auto-resize listener
+  queryInput.addEventListener('input', autoResizeTextarea);
+  queryInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      form.dispatchEvent(new Event('submit'));
+    }
+  });
+
+  async function sendMessage(query) {
+    if (!query) return;
+    disableComposer(true);
+    appendMessage("user", query);
+    createTypingIndicator();
+    queryInput.value = "";
+    autoResizeTextarea(); // Reset textarea height
+    
+    try {
+      // include account so server can bind new convs to the logged-in user
+      const payload = { id: convId, query, history: [] };
+      if (account) payload.account = account;
+      const model = getSelectedModel();
+      if (model) payload.model = model;
+      const resp = await api("/ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      removeTypingIndicator();
+      appendMessage("assistant", resp.answer || "(no answer)");
+      
+      // Silent language detection: backend already replies in user's language
+      
+      // Risk assessment is handled in backend only (no display)
+      // But show booking confirmation to user
+      if (resp.emergency_booking) {
+        displayEmergencyBooking(resp.emergency_booking);
+      }
+      
+      // Handle booking question from backend
+      if (resp.ask_booking) {
+        displayBookingQuestion(resp.ask_booking);
+      }
+      
+      if (resp.id && resp.id !== convId) {
+        convId = resp.id;
+        localStorage.setItem("aimhsa_conv", convId);
+      }
+      // refresh server-side conversation list for signed-in users
+      if (account) await updateHistoryList();
+    } catch (err) {
+      console.error("ask error", err);
+      removeTypingIndicator();
+      appendMessage("bot", "Error contacting server. Try again.");
+    } finally {
+      disableComposer(false);
+    }
+  }
+
+  // show upload preview block when a file is selected
+  function showUploadPreview(file) {
+    clearUploadPreview();
+    const preview = document.createElement("div");
+    preview.className = "upload-preview fade-in";
+    preview.dataset.name = file.name;
+
+    const icon = document.createElement("div");
+    icon.style.fontSize = "20px";
+    icon.textContent = "📄";
+
+    const meta = document.createElement("div");
+    meta.className = "upload-meta";
+    const fname = document.createElement("div");
+    fname.className = "upload-filename";
+    fname.textContent = file.name;
+    const fsize = document.createElement("div");
+    fsize.className = "small";
+    fsize.textContent = `${(file.size/1024).toFixed(1)} KB`;
+
+    meta.appendChild(fname);
+    meta.appendChild(fsize);
+
+    const actions = document.createElement("div");
+    actions.className = "upload-actions";
+    const progress = document.createElement("div");
+    progress.className = "progress-bar";
+    const inner = document.createElement("div");
+    inner.className = "progress-inner";
+    progress.appendChild(inner);
+
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "btn-small";
+    removeBtn.type = "button";
+    removeBtn.textContent = "Remove";
+    removeBtn.addEventListener("click", () => {
+      fileInput.value = "";
+      clearUploadPreview();
+    });
+
+    actions.appendChild(progress);
+    actions.appendChild(removeBtn);
+
+    preview.appendChild(icon);
+    preview.appendChild(meta);
+    preview.appendChild(actions);
+
+    // insert preview at left of composer (before send button)
+    composer.insertBefore(preview, composer.firstChild);
+    currentPreview = { el: preview, inner };
+  }
+
+  function updateUploadProgress(pct) {
+    if (!currentPreview) return;
+    currentPreview.inner.style.width = Math.max(0, Math.min(100, pct)) + "%";
+  }
+
+  function clearUploadPreview() {
+    if (currentPreview && currentPreview.el) currentPreview.el.remove();
+    currentPreview = null;
+  }
+
+  // Use XHR for upload to track progress
+  function uploadPdf(file) {
+    if (!file) return;
+    disableComposer(true);
+    showUploadPreview(file);
+
+    const url = API_BASE_URL + "/upload_pdf";
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+
+    xhr.upload.onprogress = function(e) {
+      if (e.lengthComputable) {
+        const pct = Math.round((e.loaded / e.total) * 100);
+        updateUploadProgress(pct);
+      }
+    };
+
+    xhr.onload = function() {
+      disableComposer(false);
+      try {
+        const resText = xhr.responseText || "{}";
+        const data = JSON.parse(resText);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          convId = data.id;
+          localStorage.setItem("aimhsa_conv", convId);
+          appendMessage("bot", `Uploaded ${data.filename}. What would you like to know about this document?`);
+          clearUploadPreview();
+          if (account) updateHistoryList();
+        } else {
+          appendMessage("bot", "PDF upload failed: " + (data.error || xhr.statusText));
+        }
+      } catch (err) {
+        appendMessage("bot", "Upload parsing error");
+      }
+    };
+
+    xhr.onerror = function() {
+      disableComposer(false);
+      appendMessage("bot", "PDF upload error");
+    };
+
+    const fd = new FormData();
+    fd.append("file", file, file.name);
+    if (convId) fd.append("id", convId);
+    if (account) fd.append("account", account);
+    const model = getSelectedModel();
+    if (model) fd.append("model", model);
+    xhr.send(fd);
+  }
+
+  function disableComposer(disabled) {
+    if (disabled) {
+      sendBtn.disabled = true;
+      sendBtn.classList.add("sending");
+      fileInput.disabled = true;
+      queryInput.disabled = true;
+    } else {
+      sendBtn.disabled = false;
+      sendBtn.classList.remove("sending");
+      fileInput.disabled = false;
+      queryInput.disabled = false;
+    }
+  }
+
+  // New chat: require account (server enforces too)
+  newChatBtn.addEventListener('click', async () => {
+    if (!account) {
+      appendMessage("bot", "Please sign in to create and view saved conversations.");
+      return;
+    }
+    try {
+      const payload = { account };
+      const resp = await api("/conversations", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (resp && resp.id) {
+        convId = resp.id;
+        localStorage.setItem("aimhsa_conv", convId);
+        messagesEl.innerHTML = '';
+        await updateHistoryList();
+      }
+    } catch (e) {
+      console.error("failed to create conversation", e);
+      appendMessage("bot", "Could not start new conversation. Try again.");
+    }
+  });
+
+  // Clear only visual messages
+  clearChatBtn.addEventListener("click", () => {
+    if (!convId) return;
+    
+    if (confirm("Clear current messages? This will only clear the visible chat.")) {
+      messagesEl.innerHTML = "";
+      appendMessage("bot", "Messages cleared. How can I help you?");
+    }
+  });
+
+  // Clear server-side history
+  clearHistoryBtn.addEventListener("click", async () => {
+    if (!convId) return;
+    
+    if (confirm("Are you sure? This will permanently clear all saved messages and attachments.")) {
+      try {
+        await api("/clear_chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id: convId })
+        });
+        
+        // Clear both messages and conversation history
+        messagesEl.innerHTML = "";
+        historyList.innerHTML = "";
+        
+        // Add default "no conversations" message
+        const note = document.createElement('div');
+        note.className = 'small';
+        note.style.padding = '12px';
+        note.style.color = 'var(--muted)';
+        note.textContent = 'No conversations yet. Start a new chat!';
+        historyList.appendChild(note);
+        
+        appendMessage("bot", "Chat history cleared. How can I help you?");
+        
+        // Start a new conversation
+        const payload = { account };
+        const resp = await api("/conversations", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+        
+        if (resp && resp.id) {
+          convId = resp.id;
+          localStorage.setItem("aimhsa_conv", convId);
+          await updateHistoryList();
+        }
+      } catch (err) {
+        console.error("Failed to clear chat history", err);
+        appendMessage("bot", "Failed to clear chat history on server. Try again.");
+      }
+    }
+  });
+
+  // show preview when file selected
+  fileInput.addEventListener("change", (e) => {
+    const f = fileInput.files[0];
+    if (f) showUploadPreview(f);
+    else clearUploadPreview();
+  });
+
+  const app = document.querySelector('.app');
+  
+  // Replace existing drag/drop handlers with:
+  document.addEventListener('dragenter', (e) => {
+    e.preventDefault();
+    if (!e.dataTransfer.types.includes('Files')) return;
+    app.classList.add('dragging');
+  });
+
+  document.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    // Only remove if actually leaving the app
+    if (e.target === document || e.target === app) {
+      app.classList.remove('dragging');
+    }
+  });
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+  });
+
+  document.addEventListener('drop', (e) => {
+    e.preventDefault();
+    app.classList.remove('dragging');
+    
+    const files = Array.from(e.dataTransfer.files);
+    const pdfFile = files.find(f => f.type === 'application/pdf');
+    
+    if (pdfFile) {
+      fileInput.files = e.dataTransfer.files;
+      const event = new Event('change');
+      fileInput.dispatchEvent(event);
+      uploadPdf(pdfFile);
+    } else {
+      appendMessage('bot', 'Please drop a PDF file.');
+    }
+  });
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const q = queryInput.value.trim();
+    if (!q && !fileInput.files[0]) return;
+    
+    const file = fileInput.files[0];
+    if (file) {
+      uploadPdf(file);
+      fileInput.value = "";
+    } else {
+      // ensure a convId exists for anonymous users too
+      if (!convId) {
+        convId = newConvId();
+        localStorage.setItem("aimhsa_conv", convId);
+      }
+      sendMessage(q);
+    }
+  });
+
+  // require signed-in account for server-backed conversations; otherwise show prompt
+  async function updateHistoryList() {
+    historyList.innerHTML = '';
+    if (archivedList) archivedList.innerHTML = '';
+    if (!account || account === 'null') {
+      const note = document.createElement('div');
+      note.className = 'small';
+      note.style.padding = '12px';
+      note.style.color = 'var(--text-muted)';
+      note.textContent = 'Sign in to view and manage your conversation history.';
+      historyList.appendChild(note);
+      newChatBtn.disabled = true;
+      newChatBtn.title = "Sign in to create server-backed conversations";
+      return;
+    }
+    newChatBtn.disabled = false;
+    newChatBtn.title = "";
+
+    try {
+      const q = "?account=" + encodeURIComponent(account);
+      const resp = await api("/conversations" + q, { method: "GET" });
+      const entries = resp.conversations || [];
+      for (const historyData of entries) {
+        const item = document.createElement('div');
+        item.className = 'history-item' + (historyData.id === convId ? ' active' : '');
+
+        const preview = document.createElement('div');
+        preview.className = 'history-preview';
+        preview.textContent = historyData.preview || 'New chat';
+        preview.title = historyData.preview || 'New chat';
+
+        // three-dot menu button
+        const menuBtn = document.createElement('button');
+        menuBtn.className = 'history-menu-btn';
+        menuBtn.setAttribute('aria-label', 'Conversation actions');
+        menuBtn.title = 'More';
+        menuBtn.textContent = '...';
+
+        // dropdown menu
+        const menu = document.createElement('div');
+        menu.className = 'history-menu';
+        const renameBtn = document.createElement('button');
+        renameBtn.textContent = 'Rename';
+        const archiveBtn = document.createElement('button');
+        archiveBtn.textContent = 'Archive';
+        const deleteBtn = document.createElement('button');
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.className = 'danger';
+        menu.appendChild(renameBtn);
+        menu.appendChild(archiveBtn);
+        menu.appendChild(deleteBtn);
+        // rename
+        renameBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const title = prompt('Rename conversation to:');
+          if (title == null || title.trim() === '') return;
+          try {
+            await api('/conversations/rename', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ account, id: historyData.id, preview: title })
+            });
+            await updateHistoryList();
+          } catch (err) {
+            appendMessage('bot', 'Failed to rename conversation.');
+          }
+        });
+
+        // selection
+        item.addEventListener('click', () => switchConversation(historyData.id));
+
+        // open/close menu
+        menuBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const isOpen = menu.classList.contains('open');
+          document.querySelectorAll('.history-menu.open').forEach(m => m.classList.remove('open'));
+          if (!isOpen) menu.classList.add('open');
+        });
+
+        document.addEventListener('click', () => {
+          menu.classList.remove('open');
+        });
+
+        // archive (password required)
+        archiveBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          let pw = prompt('Set a password to archive this conversation (required).');
+          if (pw == null || pw.trim() === '') { appendMessage('bot', 'Archive cancelled: password required.'); return; }
+          try {
+            await api('/conversations/archive', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ account, id: historyData.id, archived: true, password: pw || '' })
+            });
+            if (historyData.id === convId) {
+              messagesEl.innerHTML = '';
+              convId = null;
+              localStorage.removeItem('aimhsa_conv');
+            }
+            await updateHistoryList();
+          } catch (err) {
+            console.error('archive conversation failed', err);
+            appendMessage('bot', 'Failed to archive conversation.');
+          }
+        });
+
+        // delete
+        deleteBtn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          if (!confirm('Delete this conversation? This cannot be undone.')) return;
+          try {
+            await api('/conversations/delete', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ account, id: historyData.id })
+            });
+            if (historyData.id === convId) {
+              messagesEl.innerHTML = '';
+              convId = null;
+              localStorage.removeItem('aimhsa_conv');
+            }
+            await updateHistoryList();
+          } catch (err) {
+            console.error('delete conversation failed', err);
+            appendMessage('bot', 'Failed to delete conversation.');
+          }
+        });
+
+        item.appendChild(preview);
+        item.appendChild(menuBtn);
+        item.appendChild(menu);
+        historyList.appendChild(item);
+      }
+      // load archived
+      try {
+        const ar = await api('/conversations/archived' + q, { method: 'GET' });
+        const archivedEntries = ar.conversations || [];
+        for (const h of archivedEntries) {
+          const item = document.createElement('div');
+          item.className = 'history-item';
+          const preview = document.createElement('div');
+          preview.className = 'history-preview';
+          preview.textContent = h.preview || 'New chat';
+          preview.title = h.preview || 'New chat';
+
+          const menuBtn = document.createElement('button');
+          menuBtn.className = 'history-menu-btn';
+          menuBtn.textContent = '...';
+          const menu = document.createElement('div');
+          menu.className = 'history-menu';
+          const unarchiveBtn = document.createElement('button');
+          unarchiveBtn.textContent = 'Unarchive';
+          const deleteBtn = document.createElement('button');
+          deleteBtn.textContent = 'Delete';
+          deleteBtn.className = 'danger';
+          // do not allow rename for archived
+          menu.appendChild(unarchiveBtn);
+          menu.appendChild(deleteBtn);
+
+          item.addEventListener('click', async () => {
+            try {
+              await api('/history?id=' + encodeURIComponent(h.id));
+              archivedPwById.delete(h.id);
+              await switchConversation(h.id);
+            } catch (e) {
+              try {
+                const pw = prompt('Enter password to open this archived conversation:');
+                if (pw == null) return;
+                await api('/history?id=' + encodeURIComponent(h.id) + '&password=' + encodeURIComponent(pw));
+                archivedPwById.set(h.id, pw);
+                await switchConversation(h.id);
+              } catch (e2) {
+                appendMessage('bot', 'Incorrect or missing password.');
+              }
+            }
+          });
+          menuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = menu.classList.contains('open');
+            document.querySelectorAll('.history-menu.open').forEach(m => m.classList.remove('open'));
+            if (!isOpen) menu.classList.add('open');
+          });
+          document.addEventListener('click', () => { menu.classList.remove('open'); });
+
+          unarchiveBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            const pw = prompt('Enter archive password to unarchive:');
+            if (pw == null || pw.trim() === '') { appendMessage('bot', 'Unarchive cancelled: password required.'); return; }
+            try {
+              await api('/conversations/archive', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ account, id: h.id, archived: false, password: pw })
+              });
+              await updateHistoryList();
+            } catch (err) {
+              appendMessage('bot', 'Failed to unarchive conversation.');
+            }
+          });
+          deleteBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            if (!confirm('Delete this conversation? This cannot be undone.')) return;
+            const pw = prompt('Enter archive password to delete:');
+            if (pw == null || pw.trim() === '') { appendMessage('bot', 'Delete cancelled: password required.'); return; }
+            try {
+              await api('/conversations/delete', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ account, id: h.id, password: pw })
+              });
+              await updateHistoryList();
+            } catch (err) {
+              appendMessage('bot', 'Failed to delete conversation.');
+            }
+          });
+
+          item.appendChild(preview);
+          item.appendChild(menuBtn);
+          item.appendChild(menu);
+          if (archivedList) archivedList.appendChild(item);
+        }
+      } catch (e2) {
+        // ignore archived load errors, show main list anyway
+      }
+    } catch (e) {
+      console.warn("failed to load conversations", e);
+      const errNote = document.createElement('div');
+      errNote.className = 'small';
+      errNote.style.padding = '12px';
+      errNote.style.color = 'var(--muted)';
+      errNote.textContent = 'Unable to load conversations.';
+      historyList.appendChild(errNote);
+    }
+  }
+
+  // switch conversation -> set convId, persist selection and load history
+  async function switchConversation(newConvId) {
+    if (!newConvId || newConvId === convId) return;
+    convId = newConvId;
+    localStorage.setItem("aimhsa_conv", convId);
+    await loadHistory();
+    await updateHistoryList();
+  }
+
+  // Risk assessment is handled in backend only (no display)
+  // But show booking confirmation to user
+  function displayBookingQuestion(bookingQuestion) {
+    // Create booking question card
+    const questionCard = document.createElement('div');
+    questionCard.className = 'booking-question-card';
+    questionCard.style.cssText = `
+      margin: 12px 0;
+      padding: 20px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+      color: white;
+      border: 2px solid #2563eb;
+      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    `;
+    
+    questionCard.innerHTML = `
+      <div style="display: flex; align-items: center; margin-bottom: 12px;">
+        <div style="font-size: 24px; margin-right: 12px;">💬</div>
+        <h3 style="margin: 0; font-size: 18px; font-weight: 700;">Professional Support Available</h3>
+      </div>
+      <p style="margin: 0 0 16px 0; font-size: 16px; opacity: 0.9;">
+        ${bookingQuestion.message}
+      </p>
+      <div style="display: flex; gap: 12px;">
+        <button id="booking-yes" style="
+          padding: 12px 24px;
+          border: none;
+          border-radius: 6px;
+          background: white;
+          color: #3b82f6;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+        ">${bookingQuestion.options[0]}</button>
+        <button id="booking-no" style="
+          padding: 12px 24px;
+          border: 2px solid white;
+          border-radius: 6px;
+          background: transparent;
+          color: white;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+        ">${bookingQuestion.options[1]}</button>
+      </div>
+    `;
+    
+    // Insert after the last message
+    const lastMessage = messagesEl.lastElementChild;
+    if (lastMessage) {
+      lastMessage.parentNode.insertBefore(questionCard, lastMessage.nextSibling);
+    }
+    
+    // Add event listeners
+    document.getElementById('booking-yes').addEventListener('click', () => {
+      handleBookingResponse('yes');
+      questionCard.remove();
+    });
+    
+    document.getElementById('booking-no').addEventListener('click', () => {
+      handleBookingResponse('no');
+      questionCard.remove();
+    });
+    
+    // Scroll to show the question
+    questionCard.scrollIntoView({ behavior: 'smooth' });
+  }
+  
+  async function handleBookingResponse(response) {
+    try {
+      const res = await fetch(API_ROOT + '/booking_response', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          conversation_id: convId,
+          response: response,
+          account: localStorage.getItem('aimhsa_account')
+        })
+      });
+      
+      const data = await res.json();
+      
+      if (response === 'yes' && data.booking) {
+        // Show booking confirmation
+        displayEmergencyBooking(data.booking);
+      } else {
+        // Show acknowledgment message
+        appendMessage("assistant", data.message || "No problem! I'm here whenever you need support.");
+      }
+    } catch (error) {
+      console.error('Booking response error:', error);
+      appendMessage("assistant", "Sorry, there was an error processing your response. Please try again.");
+    }
+  }
+  
+  // Removed language indicator UI for a cleaner experience
+  
+  function displayEmergencyBooking(booking) {
+    const scheduledTime = new Date(booking.scheduled_time * 1000).toLocaleString();
+    
+    // Create emergency booking notification
+    const bookingCard = document.createElement('div');
+    bookingCard.className = 'emergency-booking-card';
+    bookingCard.style.cssText = `
+      margin: 12px 0;
+      padding: 20px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, #dc2626, #b91c1c);
+      color: white;
+      border: 2px solid #ef4444;
+      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+    `;
+    
+    bookingCard.innerHTML = `
+      <div style="display: flex; align-items: center; margin-bottom: 12px;">
+        <div style="font-size: 24px; margin-right: 12px;">🚨</div>
+        <h3 style="margin: 0; font-size: 18px; font-weight: 700;">Emergency Session Scheduled</h3>
+      </div>
+      <div style="background: rgba(255, 255, 255, 0.1); padding: 12px; border-radius: 6px; margin-bottom: 12px;">
+        <p style="margin: 0 0 8px 0; font-size: 14px;"><strong>Professional:</strong> ${booking.professional_name}</p>
+        <p style="margin: 0 0 8px 0; font-size: 14px;"><strong>Specialization:</strong> ${booking.specialization}</p>
+        <p style="margin: 0 0 8px 0; font-size: 14px;"><strong>Scheduled:</strong> ${scheduledTime}</p>
+        <p style="margin: 0; font-size: 14px;"><strong>Session Type:</strong> ${booking.session_type}</p>
+      </div>
+      <p style="margin: 0; font-size: 14px; opacity: 0.9;">
+        A mental health professional has been automatically assigned to provide immediate support. 
+        They will contact you shortly to confirm the session details.
+      </p>
+    `;
+    
+    // Insert after the last message
+    const lastMessage = messagesEl.lastElementChild;
+    if (lastMessage) {
+      lastMessage.parentNode.insertBefore(bookingCard, lastMessage.nextSibling);
+    }
+    
+    // Scroll to show the notification
+    bookingCard.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  // initial load: start session (account-bound when available) and refresh history list
+  (async () => {
+    if (account) {
+      await initSession(true);
+    } else {
+      await initSession(false);
+    }
+    await updateHistoryList();
+  })();
+})();

chatbot/auth.css

@@ -0,0 +1,585 @@
+:root {
+    --primary: #7c3aed;
+    --primary-dark: #5b21b6;
+    --primary-light: #a855f7;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --card: #334155;
+    --text: #f8fafc;
+    --text-light: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --success: #10b981;
+    --error: #ef4444;
+    --gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--gradient);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.auth-container {
+    width: 100%;
+    max-width: 400px;
+}
+
+.auth-card {
+    background: var(--surface);
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border);
+}
+
+.auth-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.brand {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 8px;
+}
+
+.subtitle {
+    color: var(--text-light);
+    font-size: 16px;
+}
+
+.auth-tabs {
+    display: flex;
+    background: var(--card);
+    border-radius: 12px;
+    padding: 4px;
+    margin-bottom: 30px;
+}
+
+.tab-btn {
+    flex: 1;
+    padding: 12px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    font-weight: 500;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.tab-btn.active {
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.tab-content {
+    display: block;
+}
+
+.tab-content.hidden {
+    display: none;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--text);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid var(--border);
+    border-radius: 10px;
+    font-size: 16px;
+    transition: all 0.2s ease;
+    background: var(--background);
+    color: var(--text);
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
+}
+
+/* Inline hints and rows */
+.input-hint {
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.input-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 8px;
+}
+
+/* Password field with toggle */
+.password-field {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-field input {
+    padding-right: 44px;
+}
+
+.toggle-password {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-muted);
+}
+
+.toggle-password:hover {
+    color: var(--text);
+    background: rgba(255,255,255,0.05);
+}
+
+.caps-lock {
+    color: var(--error);
+    font-size: 12px;
+}
+
+/* Password strength meter */
+.password-meter {
+    flex: 1;
+    height: 8px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 9999px;
+    overflow: hidden;
+}
+
+.password-meter-bar {
+    height: 100%;
+    width: 0%;
+    background: var(--error);
+    transition: width 0.2s ease, background 0.2s ease;
+}
+
+/* Form row */
+.form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px 0 20px;
+}
+
+.remember-me {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    color: var(--text-light);
+    user-select: none;
+}
+
+.forgot-link {
+    color: var(--primary);
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.forgot-link:hover {
+    color: var(--primary-light);
+    text-decoration: underline;
+}
+
+/* Secondary button */
+.secondary-btn {
+    padding: 12px 16px;
+    background: transparent;
+    border: 2px solid var(--border);
+    color: var(--text);
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.secondary-btn:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+}
+
+.modal.open { display: block; }
+
+.modal-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+}
+
+.modal-content {
+    position: relative;
+    width: 100%;
+    max-width: 420px;
+    margin: 10vh auto;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.modal-close {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.modal-body p {
+    color: var(--text-light);
+    margin-bottom: 10px;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.modal-message {
+    margin-top: 10px;
+    font-size: 14px;
+    padding: 10px;
+    border-radius: 6px;
+    text-align: center;
+}
+
+.modal-message.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+    border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.modal-message.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* Forgot password steps */
+.fp-step.hidden { display: none; }
+
+.auth-btn {
+    width: 100%;
+    padding: 14px;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.auth-btn:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+}
+
+.auth-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.auth-divider {
+    text-align: center;
+    margin: 30px 0;
+    position: relative;
+}
+
+.auth-divider::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--border);
+}
+
+.auth-divider span {
+    background: var(--surface);
+    padding: 0 20px;
+    color: var(--text-muted);
+    font-size: 14px;
+}
+
+.anonymous-btn {
+    width: 100%;
+    padding: 14px;
+    background: transparent;
+    color: var(--text);
+    border: 2px solid var(--border);
+    border-radius: 10px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.anonymous-btn:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.auth-footer {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.auth-footer p {
+    font-size: 12px;
+    color: var(--text-muted);
+    line-height: 1.5;
+}
+
+.error-message {
+    background: #fef2f2;
+    color: var(--error);
+    padding: 12px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    text-align: center;
+    border: 1px solid var(--error);
+}
+
+.success-message {
+    background: #f0fdf4;
+    color: var(--success);
+    padding: 12px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    text-align: center;
+    border: 1px solid var(--success);
+}
+
+/* Validation Styles */
+.field-error {
+    font-size: 12px;
+    color: var(--error);
+    margin-top: 4px;
+    display: none;
+    line-height: 1.4;
+}
+
+.field-error.show {
+    display: block;
+}
+
+.field-help {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    line-height: 1.4;
+}
+
+.form-group.error input,
+.form-group.error select {
+    border-color: var(--error);
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.form-group.success input,
+.form-group.success select {
+    border-color: var(--success);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-light);
+}
+
+.checkbox-label input[type="checkbox"] {
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.checkbox-label a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+.checkbox-label a:hover {
+    text-decoration: underline;
+}
+
+.validation-summary {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 20px;
+    display: none;
+}
+
+.validation-summary.show {
+    display: block;
+}
+
+.validation-summary h4 {
+    color: var(--error);
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.validation-summary ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.validation-summary li {
+    color: var(--error);
+    font-size: 13px;
+    margin-bottom: 4px;
+    padding-left: 16px;
+    position: relative;
+}
+
+.validation-summary li:before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: var(--error);
+}
+
+.password-strength {
+    margin-top: 4px;
+    font-size: 12px;
+}
+
+.password-strength.weak {
+    color: var(--error);
+}
+
+.password-strength.medium {
+    color: #f59e0b;
+}
+
+.password-strength.strong {
+    color: var(--success);
+}
+
+.password-strength-indicator {
+    height: 4px;
+    background: var(--card);
+    border-radius: 2px;
+    margin-top: 4px;
+    overflow: hidden;
+}
+
+.password-strength-bar {
+    height: 100%;
+    width: 0%;
+    transition: width 0.3s ease, background-color 0.3s ease;
+    border-radius: 2px;
+}
+
+.password-strength-bar.weak {
+    background: var(--error);
+    width: 33%;
+}
+
+.password-strength-bar.medium {
+    background: #f59e0b;
+    width: 66%;
+}
+
+.password-strength-bar.strong {
+    background: var(--success);
+    width: 100%;
+}
+
+.auth-links {
+    text-align: center;
+    margin-top: 20px;
+    color: var(--text-light);
+    font-size: 14px;
+}
+
+.auth-links a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s;
+}
+
+.auth-links a:hover {
+    color: var(--primary-light);
+    text-decoration: underline;
+}
+
+@media (max-width: 480px) {
+    .auth-card {
+        padding: 30px 20px;
+    }
+    
+    .brand {
+        font-size: 28px;
+    }
+}

chatbot/auth.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AIMHSA - Sign In</title>
+    <link rel="stylesheet" href="auth.css" />
+</head>
+<body>
+    <div class="auth-container">
+        <div class="auth-card">
+            <div class="auth-header">
+                <h1 class="brand">AIMHSA</h1>
+                <p class="subtitle">Mental Health Companion for Rwanda</p>
+            </div>
+            
+            <div class="auth-tabs">
+                <button class="tab-btn active" data-tab="signin">Sign In</button>
+                <button class="tab-btn" data-tab="register">Register</button>
+            </div>
+            
+            <form class="auth-form" id="authForm">
+                <div class="tab-content" id="signin">
+                    <div class="form-group">
+                        <label for="loginUsername">Username</label>
+                        <input type="text" id="loginUsername" name="loginUsername" required />
+                    </div>
+                    <div class="form-group">
+                        <label for="loginPassword">Password</label>
+                        <input type="password" id="loginPassword" name="loginPassword" required />
+                    </div>
+                    <button type="submit" class="auth-btn" id="signInBtn">Sign In</button>
+                </div>
+                
+                <div class="tab-content hidden" id="register">
+                    <div class="form-group">
+                        <label for="regUsername">Username</label>
+                        <input type="text" id="regUsername" name="regUsername" required />
+                    </div>
+                    <div class="form-group">
+                        <label for="regPassword">Password</label>
+                        <input type="password" id="regPassword" name="regPassword" required />
+                    </div>
+                    <div class="form-group">
+                        <label for="regConfirmPassword">Confirm Password</label>
+                        <input type="password" id="regConfirmPassword" name="regConfirmPassword" required />
+                    </div>
+                    <button type="submit" class="auth-btn" id="registerBtn">Create Account</button>
+                </div>
+            </form>
+            
+            <div class="auth-divider">
+                <span>or</span>
+            </div>
+            
+            <button class="anonymous-btn" id="anonBtn">Continue as Guest</button>
+            
+            <div class="auth-footer">
+                <p>By continuing, you agree to our Terms of Service and Privacy Policy</p>
+            </div>
+        </div>
+    </div>
+    
+    <script src="auth.js"></script>
+</body>
+</html>

chatbot/auth.js

@@ -0,0 +1,162 @@
+(() => {
+    'use strict';
+
+    // Get API URL from configuration
+    const getAPIBaseUrl = () => {
+        if (window.AIMHSA && window.AIMHSA.Config) {
+            return window.AIMHSA.Config.getApiBaseUrl();
+        }
+        
+        // Fallback to auto-detection
+        return `http://${window.location.hostname}:${window.location.port || '5057'}`;
+    };
+    
+    const API_BASE_URL = getAPIBaseUrl();
+
+    // Elements
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    const authForm = document.getElementById('authForm');
+    const signInBtn = document.getElementById('signInBtn');
+    const registerBtn = document.getElementById('registerBtn');
+    const anonBtn = document.getElementById('anonBtn');
+    
+    // Tab switching
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const targetTab = btn.dataset.tab;
+            
+            // Update active tab
+            tabBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            // Show target content
+            tabContents.forEach(content => {
+                if (content.id === targetTab) {
+                    content.classList.remove('hidden');
+                } else {
+                    content.classList.add('hidden');
+                }
+            });
+        });
+    });
+    
+    // API helper
+    async function api(path, opts) {
+        const url = API_BASE_URL + path;
+        const res = await fetch(url, opts);
+        if (!res.ok) {
+            const txt = await res.text();
+            throw new Error(txt || res.statusText);
+        }
+        return res.json();
+    }
+    
+    // Show message
+    function showMessage(text, type = 'error') {
+        const existing = document.querySelector('.error-message, .success-message');
+        if (existing) existing.remove();
+        
+        const message = document.createElement('div');
+        message.className = type === 'error' ? 'error-message' : 'success-message';
+        message.textContent = text;
+        
+        authForm.insertBefore(message, authForm.firstChild);
+        
+        setTimeout(() => message.remove(), 5000);
+    }
+    
+    // Redirect to main app
+    function redirectToApp(account = null) {
+        if (account) {
+            localStorage.setItem('aimhsa_account', account);
+        }
+        window.location.href = 'index.html';
+    }
+    
+    // Form submission
+    authForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const activeTab = document.querySelector('.tab-content:not(.hidden)').id;
+        
+        if (activeTab === 'signin') {
+            const username = document.getElementById('loginUsername').value.trim();
+            const password = document.getElementById('loginPassword').value;
+            
+            if (!username || !password) {
+                showMessage('Please enter both username and password');
+                return;
+            }
+            
+            signInBtn.disabled = true;
+            signInBtn.textContent = 'Signing in...';
+            
+            try {
+                const res = await api('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+                
+                showMessage('Successfully signed in!', 'success');
+                setTimeout(() => redirectToApp(res.account || username), 1000);
+            } catch (err) {
+                showMessage('Invalid username or password');
+            } finally {
+                signInBtn.disabled = false;
+                signInBtn.textContent = 'Sign In';
+            }
+        } else {
+            const username = document.getElementById('regUsername').value.trim();
+            const password = document.getElementById('regPassword').value;
+            const confirmPassword = document.getElementById('regConfirmPassword').value;
+            
+            if (!username || !password || !confirmPassword) {
+                showMessage('Please fill in all fields');
+                return;
+            }
+            
+            if (password !== confirmPassword) {
+                showMessage('Passwords do not match');
+                return;
+            }
+            
+            if (password.length < 6) {
+                showMessage('Password must be at least 6 characters');
+                return;
+            }
+            
+            registerBtn.disabled = true;
+            registerBtn.textContent = 'Creating account...';
+            
+            try {
+                await api('/api/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+                
+                showMessage('Account created successfully!', 'success');
+                setTimeout(() => redirectToApp(username), 1000);
+            } catch (err) {
+                showMessage('Username already exists or registration failed');
+            } finally {
+                registerBtn.disabled = false;
+                registerBtn.textContent = 'Create Account';
+            }
+        }
+    });
+    
+    // Anonymous access
+    anonBtn.addEventListener('click', () => {
+        localStorage.removeItem('aimhsa_account');
+        redirectToApp();
+    });
+    
+    // Check if already logged in
+    const account = localStorage.getItem('aimhsa_account');
+    if (account) {
+        redirectToApp(account);
+    }
+})();

chatbot/config-ui.js

@@ -0,0 +1,419 @@
+/**
+ * Configuration UI Management
+ * Provides UI components for managing frontend configuration
+ */
+
+(() => {
+    'use strict';
+
+    class ConfigUI {
+        constructor() {
+            this.config = window.AIMHSA?.Config;
+            this.init();
+        }
+
+        init() {
+            this.createConfigPanel();
+            this.bindEvents();
+            console.log('⚙️ Configuration UI initialized');
+        }
+
+        /**
+         * Create configuration panel
+         */
+        createConfigPanel() {
+            const configPanel = document.createElement('div');
+            configPanel.id = 'configPanel';
+            configPanel.className = 'config-panel';
+            configPanel.innerHTML = `
+                <div class="config-header">
+                    <h3><i class="fas fa-cog"></i> Configuration</h3>
+                    <button class="btn btn-sm btn-outline-secondary" id="toggleConfigPanel">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="config-content">
+                    <div class="config-section">
+                        <h4>API Configuration</h4>
+                        <div class="form-group">
+                            <label>API Base URL</label>
+                            <input type="url" id="apiBaseUrl" class="form-control" 
+                                   value="${this.config?.getApiBaseUrl() || ''}" 
+                                   placeholder="http://localhost:5057">
+                            <small class="form-text text-muted">
+                                Base URL for the backend API server
+                            </small>
+                        </div>
+                        <div class="form-group">
+                            <label>Environment</label>
+                            <select id="environment" class="form-control">
+                                <option value="development">Development</option>
+                                <option value="staging">Staging</option>
+                                <option value="production">Production</option>
+                            </select>
+                        </div>
+                        <button class="btn btn-primary btn-sm" id="testConnection">
+                            <i class="fas fa-plug"></i> Test Connection
+                        </button>
+                    </div>
+                    
+                    <div class="config-section">
+                        <h4>UI Configuration</h4>
+                        <div class="form-group">
+                            <label>Theme</label>
+                            <select id="theme" class="form-control">
+                                <option value="dark">Dark</option>
+                                <option value="light">Light</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Auto-refresh Interval (seconds)</label>
+                            <input type="number" id="autoRefresh" class="form-control" 
+                                   value="${this.config?.get('ui.autoRefreshInterval', 30000) / 1000}" 
+                                   min="5" max="300">
+                        </div>
+                    </div>
+                    
+                    <div class="config-actions">
+                        <button class="btn btn-success btn-sm" id="saveConfig">
+                            <i class="fas fa-save"></i> Save Configuration
+                        </button>
+                        <button class="btn btn-warning btn-sm" id="resetConfig">
+                            <i class="fas fa-undo"></i> Reset to Defaults
+                        </button>
+                    </div>
+                    
+                    <div class="config-info">
+                        <h4>Environment Information</h4>
+                        <pre id="envInfo"></pre>
+                    </div>
+                </div>
+            `;
+
+            // Add styles
+            const style = document.createElement('style');
+            style.textContent = `
+                .config-panel {
+                    position: fixed;
+                    top: 20px;
+                    right: -400px;
+                    width: 380px;
+                    height: calc(100vh - 40px);
+                    background: var(--surface, #1e293b);
+                    border: 1px solid var(--border, #334155);
+                    border-radius: 12px;
+                    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+                    z-index: 10000;
+                    transition: right 0.3s ease;
+                    overflow-y: auto;
+                }
+                
+                .config-panel.open {
+                    right: 20px;
+                }
+                
+                .config-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem;
+                    border-bottom: 1px solid var(--border, #334155);
+                    background: var(--primary, #7c3aed);
+                    color: white;
+                    border-radius: 12px 12px 0 0;
+                }
+                
+                .config-header h3 {
+                    margin: 0;
+                    font-size: 1.1rem;
+                }
+                
+                .config-content {
+                    padding: 1rem;
+                }
+                
+                .config-section {
+                    margin-bottom: 1.5rem;
+                    padding-bottom: 1rem;
+                    border-bottom: 1px solid var(--border-light, #475569);
+                }
+                
+                .config-section:last-child {
+                    border-bottom: none;
+                }
+                
+                .config-section h4 {
+                    color: var(--text, #f8fafc);
+                    font-size: 1rem;
+                    margin-bottom: 1rem;
+                }
+                
+                .config-actions {
+                    display: flex;
+                    gap: 0.5rem;
+                    margin-bottom: 1rem;
+                }
+                
+                .config-info pre {
+                    background: var(--background, #0f172a);
+                    padding: 0.5rem;
+                    border-radius: 4px;
+                    font-size: 0.8rem;
+                    color: var(--text-secondary, #cbd5e1);
+                    border: 1px solid var(--border, #334155);
+                    max-height: 200px;
+                    overflow-y: auto;
+                }
+                
+                .config-toggle {
+                    position: fixed;
+                    top: 20px;
+                    right: 20px;
+                    z-index: 9999;
+                    background: var(--primary, #7c3aed);
+                    color: white;
+                    border: none;
+                    border-radius: 50%;
+                    width: 50px;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.2rem;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+                }
+                
+                .config-toggle:hover {
+                    background: var(--primary-dark, #5b21b6);
+                    transform: scale(1.1);
+                }
+            `;
+            
+            document.head.appendChild(style);
+            document.body.appendChild(configPanel);
+
+            // Create toggle button
+            const toggleBtn = document.createElement('button');
+            toggleBtn.id = 'configToggle';
+            toggleBtn.className = 'config-toggle';
+            toggleBtn.innerHTML = '<i class="fas fa-cog"></i>';
+            toggleBtn.title = 'Configuration Settings';
+            document.body.appendChild(toggleBtn);
+
+            this.updateEnvironmentInfo();
+        }
+
+        /**
+         * Bind event handlers
+         */
+        bindEvents() {
+            // Toggle panel
+            document.getElementById('configToggle').addEventListener('click', () => {
+                this.togglePanel();
+            });
+
+            document.getElementById('toggleConfigPanel').addEventListener('click', () => {
+                this.togglePanel();
+            });
+
+            // Save configuration
+            document.getElementById('saveConfig').addEventListener('click', () => {
+                this.saveConfiguration();
+            });
+
+            // Reset configuration
+            document.getElementById('resetConfig').addEventListener('click', () => {
+                this.resetConfiguration();
+            });
+
+            // Test connection
+            document.getElementById('testConnection').addEventListener('click', () => {
+                this.testConnection();
+            });
+
+            // Real-time updates
+            document.getElementById('apiBaseUrl').addEventListener('input', (e) => {
+                if (this.config) {
+                    this.config.setApiBaseUrl(e.target.value);
+                }
+            });
+
+            // Close panel on Escape key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    this.closePanel();
+                }
+            });
+        }
+
+        /**
+         * Toggle configuration panel
+         */
+        togglePanel() {
+            const panel = document.getElementById('configPanel');
+            panel.classList.toggle('open');
+            
+            if (panel.classList.contains('open')) {
+                this.loadCurrentSettings();
+                this.updateEnvironmentInfo();
+            }
+        }
+
+        /**
+         * Close configuration panel
+         */
+        closePanel() {
+            const panel = document.getElementById('configPanel');
+            panel.classList.remove('open');
+        }
+
+        /**
+         * Load current settings into UI
+         */
+        loadCurrentSettings() {
+            if (!this.config) return;
+
+            document.getElementById('apiBaseUrl').value = this.config.getApiBaseUrl();
+            document.getElementById('environment').value = this.config.environment;
+            document.getElementById('theme').value = this.config.get('ui.theme', 'dark');
+            document.getElementById('autoRefresh').value = this.config.get('ui.autoRefreshInterval', 30000) / 1000;
+        }
+
+        /**
+         * Save configuration
+         */
+        saveConfiguration() {
+            if (!this.config) return;
+
+            const apiBaseUrl = document.getElementById('apiBaseUrl').value;
+            const environment = document.getElementById('environment').value;
+            const theme = document.getElementById('theme').value;
+            const autoRefresh = parseInt(document.getElementById('autoRefresh').value) * 1000;
+
+            // Update configuration
+            this.config.setApiBaseUrl(apiBaseUrl);
+            this.config.set('ui.theme', theme);
+            this.config.set('ui.autoRefreshInterval', autoRefresh);
+
+            // Show success message
+            this.showToast('Configuration saved successfully!', 'success');
+
+            // Optionally reload the page to apply changes
+            if (confirm('Configuration saved. Reload the page to apply changes?')) {
+                window.location.reload();
+            }
+        }
+
+        /**
+         * Reset configuration to defaults
+         */
+        resetConfiguration() {
+            if (!this.config) return;
+
+            if (confirm('Are you sure you want to reset all configuration to defaults?')) {
+                this.config.reset();
+                this.loadCurrentSettings();
+                this.updateEnvironmentInfo();
+                this.showToast('Configuration reset to defaults', 'info');
+            }
+        }
+
+        /**
+         * Test API connection
+         */
+        async testConnection() {
+            if (!this.config) return;
+
+            const button = document.getElementById('testConnection');
+            const originalText = button.innerHTML;
+            
+            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
+            button.disabled = true;
+
+            try {
+                const isConnected = await this.config.validateApiConnection();
+                
+                if (isConnected) {
+                    this.showToast('API connection successful!', 'success');
+                } else {
+                    this.showToast('API connection failed', 'error');
+                }
+            } catch (error) {
+                this.showToast('Connection test failed: ' + error.message, 'error');
+            } finally {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }
+        }
+
+        /**
+         * Update environment information display
+         */
+        updateEnvironmentInfo() {
+            if (!this.config) return;
+
+            const envInfo = this.config.getEnvironmentInfo();
+            const formattedInfo = JSON.stringify(envInfo, null, 2);
+            document.getElementById('envInfo').textContent = formattedInfo;
+        }
+
+        /**
+         * Show toast notification
+         */
+        showToast(message, type = 'info') {
+            // Use SweetAlert2 if available
+            if (typeof Swal !== 'undefined') {
+                Swal.fire({
+                    toast: true,
+                    position: 'top-end',
+                    showConfirmButton: false,
+                    timer: 3000,
+                    icon: type === 'error' ? 'error' : type === 'success' ? 'success' : 'info',
+                    title: message
+                });
+                return;
+            }
+
+            // Fallback to simple alert
+            const alertClass = type === 'error' ? 'alert-danger' : 
+                             type === 'success' ? 'alert-success' : 'alert-info';
+            
+            const toast = document.createElement('div');
+            toast.className = `alert ${alertClass} alert-dismissible fade show`;
+            toast.style.cssText = `
+                position: fixed;
+                top: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: 10001;
+                min-width: 300px;
+            `;
+            toast.innerHTML = `
+                ${message}
+                <button type="button" class="close" onclick="this.parentElement.remove()">
+                    <span>&times;</span>
+                </button>
+            `;
+            
+            document.body.appendChild(toast);
+            
+            setTimeout(() => {
+                if (toast.parentElement) {
+                    toast.remove();
+                }
+            }, 3000);
+        }
+    }
+
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            new ConfigUI();
+        });
+    } else {
+        new ConfigUI();
+    }
+
+})();

chatbot/config.js

@@ -0,0 +1,369 @@
+/**
+ * Frontend Configuration Management
+ * Centralized configuration for the AIMHSA chatbot frontend
+ */
+
+(() => {
+    'use strict';
+
+    // Default configuration
+    const DEFAULT_CONFIG = {
+        // API Configuration
+        api: {
+            baseUrl: 'http://localhost:5057',
+            timeout: 10000,
+            retryAttempts: 3,
+            retryDelay: 1000
+        },
+        
+        // UI Configuration
+        ui: {
+            theme: 'dark',
+            language: 'en',
+            autoRefreshInterval: 30000,
+            animationDuration: 300
+        },
+        
+        // Chat Configuration
+        chat: {
+            maxMessageLength: 5000,
+            typingIndicatorDelay: 1000,
+            autoScroll: true,
+            saveConversations: true
+        },
+        
+        // Professional Dashboard Configuration
+        professional: {
+            defaultPageSize: 25,
+            autoRefreshBookings: true,
+            notificationSound: true
+        },
+        
+        // Admin Dashboard Configuration
+        admin: {
+            defaultPageSize: 50,
+            enableDataExport: true,
+            showAdvancedStats: true
+        }
+    };
+
+    // Environment-specific configurations
+    const ENVIRONMENT_CONFIGS = {
+        development: {
+            api: {
+                baseUrl: 'http://localhost:5057'
+            }
+        },
+        production: {
+            api: {
+                baseUrl: 'https://api.aimhsa.rw'
+            }
+        },
+        staging: {
+            api: {
+                baseUrl: 'https://staging-api.aimhsa.rw'
+            }
+        }
+    };
+
+    class ConfigManager {
+        constructor() {
+            this.config = { ...DEFAULT_CONFIG };
+            this.environment = this.detectEnvironment();
+            this.loadConfiguration();
+        }
+
+        /**
+         * Detect current environment
+         */
+        detectEnvironment() {
+            const hostname = window.location.hostname;
+            const port = window.location.port;
+            
+            if (hostname === 'localhost' || hostname === '127.0.0.1') {
+                return 'development';
+            } else if (hostname.includes('staging')) {
+                return 'staging';
+            } else {
+                return 'production';
+            }
+        }
+
+        /**
+         * Load configuration from multiple sources
+         */
+        loadConfiguration() {
+            try {
+                // 1. Apply environment-specific config
+                this.applyEnvironmentConfig();
+                
+                // 2. Load from localStorage (user preferences)
+                this.loadFromLocalStorage();
+                
+                // 3. Load from URL parameters
+                this.loadFromUrlParams();
+                
+                // 4. Auto-detect API URL based on current location
+                this.autoDetectApiUrl();
+                
+                console.log('🔧 Configuration loaded:', this.config);
+                
+            } catch (error) {
+                console.error('❌ Error loading configuration:', error);
+                // Fallback to default config
+                this.config = { ...DEFAULT_CONFIG };
+            }
+        }
+
+        /**
+         * Apply environment-specific configuration
+         */
+        applyEnvironmentConfig() {
+            const envConfig = ENVIRONMENT_CONFIGS[this.environment];
+            if (envConfig) {
+                this.config = this.deepMerge(this.config, envConfig);
+                console.log(`🌍 Applied ${this.environment} environment config`);
+            }
+        }
+
+        /**
+         * Load configuration from localStorage
+         */
+        loadFromLocalStorage() {
+            try {
+                const savedConfig = localStorage.getItem('aimhsa_config');
+                if (savedConfig) {
+                    const parsedConfig = JSON.parse(savedConfig);
+                    this.config = this.deepMerge(this.config, parsedConfig);
+                    console.log('💾 Loaded config from localStorage');
+                }
+            } catch (error) {
+                console.warn('⚠️ Failed to load config from localStorage:', error);
+            }
+        }
+
+        /**
+         * Load configuration from URL parameters
+         */
+        loadFromUrlParams() {
+            const urlParams = new URLSearchParams(window.location.search);
+            
+            // API Base URL override
+            const apiUrl = urlParams.get('api_url') || urlParams.get('baseUrl');
+            if (apiUrl) {
+                this.config.api.baseUrl = apiUrl;
+                console.log('🔗 API URL overridden from URL params:', apiUrl);
+            }
+            
+            // Environment override
+            const env = urlParams.get('env') || urlParams.get('environment');
+            if (env && ENVIRONMENT_CONFIGS[env]) {
+                this.environment = env;
+                this.applyEnvironmentConfig();
+                console.log('🌍 Environment overridden from URL params:', env);
+            }
+            
+            // Theme override
+            const theme = urlParams.get('theme');
+            if (theme) {
+                this.config.ui.theme = theme;
+                console.log('🎨 Theme overridden from URL params:', theme);
+            }
+        }
+
+        /**
+         * Auto-detect API URL based on current page location
+         */
+        autoDetectApiUrl() {
+            const currentLocation = window.location;
+            
+            // Smart API URL detection
+            if (currentLocation.port === '8000') {
+                // Development server (likely Python/Django)
+                this.config.api.baseUrl = `${currentLocation.protocol}//${currentLocation.hostname}:5057`;
+            } else if (currentLocation.port === '3000') {
+                // React development server
+                this.config.api.baseUrl = `${currentLocation.protocol}//${currentLocation.hostname}:5057`;
+            } else if (currentLocation.port === '5057') {
+                // Running on API port
+                this.config.api.baseUrl = currentLocation.origin;
+            } else if (currentLocation.port === '80' || currentLocation.port === '443' || !currentLocation.port) {
+                // Production environment
+                this.config.api.baseUrl = currentLocation.origin;
+            }
+            
+            console.log('🔍 Auto-detected API URL:', this.config.api.baseUrl);
+        }
+
+        /**
+         * Get configuration value
+         */
+        get(path, defaultValue = null) {
+            return this.getNestedValue(this.config, path, defaultValue);
+        }
+
+        /**
+         * Set configuration value
+         */
+        set(path, value) {
+            this.setNestedValue(this.config, path, value);
+            this.saveToLocalStorage();
+        }
+
+        /**
+         * Get API base URL
+         */
+        getApiBaseUrl() {
+            return this.config.api.baseUrl;
+        }
+
+        /**
+         * Set API base URL
+         */
+        setApiBaseUrl(url) {
+            this.config.api.baseUrl = url;
+            this.saveToLocalStorage();
+            console.log('🔗 API Base URL updated:', url);
+        }
+
+        /**
+         * Get full API URL for an endpoint
+         */
+        getApiUrl(endpoint = '') {
+            const baseUrl = this.config.api.baseUrl;
+            const cleanEndpoint = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+            return `${baseUrl}${cleanEndpoint}`;
+        }
+
+        /**
+         * Save current configuration to localStorage
+         */
+        saveToLocalStorage() {
+            try {
+                localStorage.setItem('aimhsa_config', JSON.stringify(this.config));
+                console.log('💾 Configuration saved to localStorage');
+            } catch (error) {
+                console.warn('⚠️ Failed to save config to localStorage:', error);
+            }
+        }
+
+        /**
+         * Reset configuration to defaults
+         */
+        reset() {
+            this.config = { ...DEFAULT_CONFIG };
+            localStorage.removeItem('aimhsa_config');
+            this.loadConfiguration();
+            console.log('🔄 Configuration reset to defaults');
+        }
+
+        /**
+         * Deep merge objects
+         */
+        deepMerge(target, source) {
+            const result = { ...target };
+            
+            for (const key in source) {
+                if (source.hasOwnProperty(key)) {
+                    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                        result[key] = this.deepMerge(result[key] || {}, source[key]);
+                    } else {
+                        result[key] = source[key];
+                    }
+                }
+            }
+            
+            return result;
+        }
+
+        /**
+         * Get nested object value by path
+         */
+        getNestedValue(obj, path, defaultValue = null) {
+            const keys = path.split('.');
+            let current = obj;
+            
+            for (const key of keys) {
+                if (current && current.hasOwnProperty(key)) {
+                    current = current[key];
+                } else {
+                    return defaultValue;
+                }
+            }
+            
+            return current;
+        }
+
+        /**
+         * Set nested object value by path
+         */
+        setNestedValue(obj, path, value) {
+            const keys = path.split('.');
+            let current = obj;
+            
+            for (let i = 0; i < keys.length - 1; i++) {
+                const key = keys[i];
+                if (!current[key] || typeof current[key] !== 'object') {
+                    current[key] = {};
+                }
+                current = current[key];
+            }
+            
+            current[keys[keys.length - 1]] = value;
+        }
+
+        /**
+         * Validate API connection
+         */
+        async validateApiConnection() {
+            try {
+                const response = await fetch(`${this.config.api.baseUrl}/health`, {
+                    method: 'GET',
+                    timeout: this.config.api.timeout
+                });
+                
+                if (response.ok) {
+                    console.log('✅ API connection validated');
+                    return true;
+                } else {
+                    console.warn('⚠️ API responded but not healthy:', response.status);
+                    return false;
+                }
+            } catch (error) {
+                console.error('❌ API connection failed:', error);
+                return false;
+            }
+        }
+
+        /**
+         * Get environment info
+         */
+        getEnvironmentInfo() {
+            return {
+                environment: this.environment,
+                hostname: window.location.hostname,
+                port: window.location.port,
+                protocol: window.location.protocol,
+                apiBaseUrl: this.config.api.baseUrl,
+                userAgent: navigator.userAgent,
+                timestamp: new Date().toISOString()
+            };
+        }
+    }
+
+    // Create global configuration manager instance
+    const configManager = new ConfigManager();
+
+    // Export to global scope
+    window.AIMHSA = window.AIMHSA || {};
+    window.AIMHSA.Config = configManager;
+    
+    // Legacy support
+    window.getApiBaseUrl = () => configManager.getApiBaseUrl();
+    window.getApiUrl = (endpoint) => configManager.getApiUrl(endpoint);
+    
+    console.log('⚙️ AIMHSA Configuration Manager initialized');
+    console.log('🌍 Environment:', configManager.environment);
+    console.log('🔗 API Base URL:', configManager.getApiBaseUrl());
+
+})();

chatbot/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AIMHSA Chat</title>
+    <link rel="stylesheet" href="style.css?hnb" />
+    
+    <!-- Configuration Management -->
+    <script src="config.js"></script>
+    <script src="config-ui.js"></script>
+</head>
+<body>
+    <div class="app">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="user-info">
+                    <div class="avatar">👤</div>
+                    <div class="user-details">
+                        <div class="username" id="username">Guest</div>
+                        <div class="status">Online</div>
+                    </div>
+                </div>
+                <button id="newChatBtn" class="new-chat-btn">
+                    <span>+</span> New Chat
+                </button>
+            </div>
+            
+            <div class="history-section">
+                <h3>Recent Conversations</h3>
+                <div class="history-list" id="historyList">
+                    <!-- Chat history items will be dynamically added here -->
+                </div>
+                <h3 style="margin-top:16px">Archived</h3>
+                <div class="history-list" id="archivedList">
+                    <!-- Archived items -->
+                </div>
+            </div>
+            
+            <div class="sidebar-footer">
+                <button id="logoutBtn" class="logout-btn">Sign Out</button>
+            </div>
+        </aside>
+
+        <main class="chat-area">
+            <header class="chat-header">
+                <div class="chat-title">
+                    <h2>AIMHSA</h2>
+                    <span class="chat-subtitle">Mental Health Companion</span>
+                </div>
+                <div class="chat-actions">
+                    <button id="clearChatBtn" class="action-btn clear">Clear Messages</button>
+                    <button id="clearHistoryBtn" class="action-btn danger">Clear History</button>
+                </div>
+            </header>
+
+            <div class="messages-container">
+                <div id="messages" class="messages"></div>
+            </div>
+
+            <form id="form" class="message-composer">
+                <div class="composer-input">
+                    <textarea id="query" autocomplete="off" placeholder="Type your message..." rows="1"></textarea>
+                    <label class="file-upload-btn" title="Upload PDF">
+                        <input id="file" type="file" accept="application/pdf" />
+                        📎
+                    </label>
+                    <button type="submit" id="send" class="send-btn">
+                        <span>→</span>
+                    </button>
+                </div>
+            </form>
+        </main>
+    </div>
+
+    <!-- Configuration Scripts (load first) -->
+    <script src="js/config.js"></script>
+    <script src="js/api.js"></script>
+    
+    <!-- Main Application Script -->
+    <script src="app.js"></script>
+</body>
+</html>

chatbot/js/api.js

@@ -0,0 +1,165 @@
+/**
+ * AIMHSA API Client
+ * Centralized API communication with automatic configuration
+ */
+
+class ApiClient {
+    constructor() {
+        this.config = window.AppConfig;
+        this.defaultHeaders = {
+            'Content-Type': 'application/json'
+        };
+    }
+    
+    async request(endpoint, options = {}) {
+        const url = this.config.getFullUrl(endpoint);
+        
+        const defaultOptions = {
+            method: 'GET',
+            headers: { ...this.defaultHeaders },
+            timeout: this.config.settings.defaultTimeout
+        };
+        
+        const mergedOptions = { ...defaultOptions, ...options };
+        
+        // Add custom headers if provided
+        if (options.headers) {
+            mergedOptions.headers = { ...mergedOptions.headers, ...options.headers };
+        }
+        
+        try {
+            const response = await fetch(url, mergedOptions);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                return await response.json();
+            } else {
+                return await response.text();
+            }
+        } catch (error) {
+            console.error('API Request failed:', error);
+            throw error;
+        }
+    }
+    
+    // GET request
+    async get(endpoint, params = {}) {
+        const url = new URL(this.config.getFullUrl(endpoint), window.location.origin);
+        Object.keys(params).forEach(key => {
+            if (params[key] !== null && params[key] !== undefined) {
+                url.searchParams.append(key, params[key]);
+            }
+        });
+        
+        return await fetch(url.toString(), {
+            method: 'GET',
+            headers: this.defaultHeaders
+        }).then(res => res.json());
+    }
+    
+    // POST request
+    async post(endpoint, data = {}, options = {}) {
+        return await this.request(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(data),
+            ...options
+        });
+    }
+    
+    // PUT request
+    async put(endpoint, data = {}, options = {}) {
+        return await this.request(endpoint, {
+            method: 'PUT',
+            body: JSON.stringify(data),
+            ...options
+        });
+    }
+    
+    // DELETE request
+    async delete(endpoint, options = {}) {
+        return await this.request(endpoint, {
+            method: 'DELETE',
+            ...options
+        });
+    }
+    
+    // Chat-specific methods
+    async sendMessage(query, conversationId = null, account = null) {
+        return await this.post('ask', {
+            query,
+            id: conversationId,
+            account
+        });
+    }
+    
+    async getSession(account = null) {
+        return await this.post('session', { account });
+    }
+    
+    async getHistory(conversationId, password = null) {
+        const params = { id: conversationId };
+        if (password) params.password = password;
+        return await this.get('history', params);
+    }
+    
+    // Auth methods
+    async login(email, password) {
+        return await this.post('login', { email, password });
+    }
+    
+    async register(userData) {
+        return await this.post('register', userData);
+    }
+    
+    async professionalLogin(credentials) {
+        return await this.post('professionalLogin', credentials);
+    }
+    
+    async adminLogin(credentials) {
+        return await this.post('adminLogin', credentials);
+    }
+    
+    // Professional methods
+    async getProfessionalProfile(professionalId) {
+        return await this.get('professionalProfile', {}, {
+            headers: { 'X-Professional-ID': professionalId }
+        });
+    }
+    
+    async getProfessionalSessions(professionalId, limit = 50) {
+        return await this.get('professionalSessions', { limit }, {
+            headers: { 'X-Professional-ID': professionalId }
+        });
+    }
+    
+    // Health check
+    async healthCheck() {
+        try {
+            const response = await this.get('healthz');
+            return response.ok === true;
+        } catch (error) {
+            return false;
+        }
+    }
+}
+
+// Global API client instance
+window.ApiClient = new ApiClient();
+
+// Auto-check API connectivity on load
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        const isHealthy = await window.ApiClient.healthCheck();
+        if (!isHealthy && window.AppConfig.isDevelopment()) {
+            console.warn('⚠️ API health check failed - backend may not be running');
+        }
+    } catch (error) {
+        if (window.AppConfig.isDevelopment()) {
+            console.error('❌ Failed to check API health:', error);
+        }
+    }
+});

chatbot/js/config.js

@@ -0,0 +1,136 @@
+/**
+ * Frontend Configuration for AIMHSA
+ * Handles API endpoints and environment-specific settings
+ */
+
+class AppConfig {
+    constructor() {
+        // Detect environment
+        this.environment = this.detectEnvironment();
+        
+        // Set API base URL based on environment
+        this.apiBaseUrl = this.getApiBaseUrl();
+        
+        // API endpoints
+        this.endpoints = {
+            // Chat endpoints
+            ask: '/ask',
+            session: '/session',
+            history: '/history',
+            conversations: '/conversations',
+            
+            // User endpoints
+            register: '/register',
+            login: '/login',
+            logout: '/logout',
+            forgotPassword: '/forgot_password',
+            resetPassword: '/reset_password',
+            
+            // Professional endpoints
+            professionalLogin: '/professional/login',
+            professionalProfile: '/professional/profile',
+            professionalSessions: '/professional/sessions',
+            professionalUsers: '/professional/users',
+            professionalNotifications: '/professional/notifications',
+            professionalDashboard: '/professional/dashboard-stats',
+            
+            // Admin endpoints
+            adminLogin: '/admin/login',
+            adminProfessionals: '/admin/professionals',
+            adminBookings: '/admin/bookings',
+            adminUsers: '/admin/users',
+            
+            // Utility endpoints
+            uploadPdf: '/upload_pdf',
+            clearChat: '/clear_chat',
+            reset: '/reset',
+            healthz: '/healthz'
+        };
+        
+        // App settings
+        this.settings = {
+            defaultTimeout: 30000,
+            maxRetries: 3,
+            debounceDelay: 300,
+            autoSaveDelay: 1000
+        };
+    }
+    
+    detectEnvironment() {
+        const hostname = window.location.hostname;
+        const protocol = window.location.protocol;
+        const port = window.location.port;
+        
+        if (hostname === 'localhost' || hostname === '127.0.0.1') {
+            return 'development';
+        } else if (hostname.includes('test') || hostname.includes('staging')) {
+            return 'testing';
+        } else {
+            return 'production';
+        }
+    }
+    
+    getApiBaseUrl() {
+        const hostname = window.location.hostname;
+        const protocol = window.location.protocol;
+        const port = window.location.port;
+        
+        // Check if API_BASE_URL is set in environment
+        if (window.API_BASE_URL) {
+            return window.API_BASE_URL;
+        }
+        
+        // Environment-specific API URLs
+        switch (this.environment) {
+            case 'development':
+                // In development, API might be on different port
+                if (port === '8000' || port === '3000') {
+                    return `${protocol}//${hostname}:5057`;
+                }
+                return ''; // Same origin
+                
+            case 'testing':
+                return ''; // Same origin for testing
+                
+            case 'production':
+                // In production, use same origin (standard hosting setup)
+                return '';
+                
+            default:
+                return '';
+        }
+    }
+    
+    getFullUrl(endpoint) {
+        const baseUrl = this.apiBaseUrl;
+        const path = this.endpoints[endpoint] || endpoint;
+        
+        if (baseUrl) {
+            return `${baseUrl}${path}`;
+        } else {
+            return path; // Relative URL
+        }
+    }
+    
+    // Convenience methods for common endpoints
+    getChatUrl() { return this.getFullUrl('ask'); }
+    getLoginUrl() { return this.getFullUrl('login'); }
+    getRegisterUrl() { return this.getFullUrl('register'); }
+    getProfessionalLoginUrl() { return this.getFullUrl('professionalLogin'); }
+    getAdminLoginUrl() { return this.getFullUrl('adminLogin'); }
+    
+    // Environment checks
+    isDevelopment() { return this.environment === 'development'; }
+    isProduction() { return this.environment === 'production'; }
+    isTesting() { return this.environment === 'testing'; }
+}
+
+// Global configuration instance
+window.AppConfig = new AppConfig();
+
+// Debug information in development
+if (window.AppConfig.isDevelopment()) {
+    console.log('🔧 AIMHSA Development Mode');
+    console.log('API Base URL:', window.AppConfig.apiBaseUrl);
+    console.log('Environment:', window.AppConfig.environment);
+}

chatbot/landing.css

@@ -0,0 +1,1761 @@
+/* AIMHSA Landing Page Styles */
+:root {
+    --primary: #7c3aed;
+    --primary-light: #a855f7;
+    --primary-dark: #5b21b6;
+    --secondary: #f59e0b;
+    --accent: #10b981;
+    --accent-light: #34d399;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --card: #334155;
+    --card-hover: #3b4758;
+    --text: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --border-light: #475569;
+    --border-focus: #6366f1;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+    --gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #10b981 100%);
+    --gradient-radial: radial-gradient(circle at 30% 40%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
+                       radial-gradient(circle at 70% 60%, rgba(16, 185, 129, 0.2) 0%, transparent 50%);
+    --blur: blur(10px);
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Utility Classes */
+.glass-effect {
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+}
+
+.gradient-border {
+    position: relative;
+    background: var(--gradient);
+    padding: 2px;
+    border-radius: inherit;
+}
+
+.gradient-border::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--surface);
+    border-radius: inherit;
+    margin: 1px;
+}
+
+.loading-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--border);
+    border-top: 2px solid var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.fade-in {
+    animation: fadeIn 0.6s ease-out;
+}
+
+.slide-up {
+    animation: slideInUp 0.6s ease-out;
+}
+
+.bounce-in {
+    animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+    70% {
+        transform: scale(0.9);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.pulse-glow {
+    animation: pulseGlow 2s ease-in-out infinite;
+}
+
+@keyframes pulseGlow {
+    0%, 100% {
+        box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
+    }
+    50% {
+        box-shadow: 0 0 30px rgba(124, 58, 237, 0.6);
+    }
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--background);
+    color: var(--text);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(15, 23, 42, 0.95);
+    backdrop-filter: var(--blur);
+    -webkit-backdrop-filter: var(--blur);
+    border-bottom: 1px solid var(--border);
+    z-index: 1000;
+    transition: var(--transition);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.navbar.scrolled {
+    background: rgba(15, 23, 42, 0.98);
+    box-shadow: var(--shadow);
+}
+
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    transition: var(--transition-fast);
+    cursor: pointer;
+}
+
+.nav-logo:hover {
+    transform: scale(1.05);
+}
+
+.nav-logo i {
+    font-size: 1.8rem;
+    transition: var(--transition-fast);
+}
+
+.nav-logo:hover i {
+    transform: rotate(10deg);
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+}
+
+.nav-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition-fast);
+    position: relative;
+    padding: 0.5rem 0;
+}
+
+.nav-links a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--gradient);
+    transition: var(--transition);
+}
+
+.nav-links a:hover::after,
+.nav-links a:focus::after {
+    width: 100%;
+}
+
+.nav-links a:hover,
+.nav-links a:focus {
+    color: var(--text);
+    transform: translateY(-1px);
+}
+
+.nav-cta {
+    background: var(--gradient);
+    color: white !important;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: var(--transition);
+    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+    border: none;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-cta::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: var(--transition);
+}
+
+.nav-cta:hover::before {
+    left: 100%;
+}
+
+.nav-cta:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
+}
+
+.nav-cta:active {
+    transform: translateY(0);
+}
+
+/* Hero Section */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-radial);
+    pointer-events: none;
+}
+
+.hero-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+}
+
+.hero-pattern {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+        radial-gradient(circle at 25% 25%, var(--primary) 2px, transparent 2px),
+        radial-gradient(circle at 75% 75%, var(--accent) 2px, transparent 2px),
+        radial-gradient(circle at 50% 50%, var(--secondary) 1px, transparent 1px);
+    background-size: 50px 50px, 30px 30px, 80px 80px;
+    animation: float 20s ease-in-out infinite;
+    opacity: 0.6;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    33% { transform: translateY(-20px) rotate(1deg); }
+    66% { transform: translateY(-10px) rotate(-1deg); }
+}
+
+/* Floating elements */
+.hero-float-1,
+.hero-float-2,
+.hero-float-3 {
+    position: absolute;
+    border-radius: 50%;
+    background: var(--gradient);
+    opacity: 0.1;
+    animation: float-random 15s ease-in-out infinite;
+}
+
+.hero-float-1 {
+    width: 200px;
+    height: 200px;
+    top: 10%;
+    left: 10%;
+    animation-delay: 0s;
+}
+
+.hero-float-2 {
+    width: 150px;
+    height: 150px;
+    top: 60%;
+    right: 15%;
+    animation-delay: 5s;
+}
+
+.hero-float-3 {
+    width: 100px;
+    height: 100px;
+    bottom: 20%;
+    left: 20%;
+    animation-delay: 10s;
+}
+
+@keyframes float-random {
+    0%, 100% {
+        transform: translateY(0px) translateX(0px) scale(1);
+    }
+    25% {
+        transform: translateY(-30px) translateX(20px) scale(1.1);
+    }
+    50% {
+        transform: translateY(-15px) translateX(-15px) scale(0.9);
+    }
+    75% {
+        transform: translateY(-40px) translateX(10px) scale(1.05);
+    }
+}
+
+.hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    position: relative;
+    z-index: 2;
+}
+
+.hero-text {
+    animation: slideInLeft 1s ease-out;
+    animation-fill-mode: both;
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-50px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.hero-title {
+    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    letter-spacing: -0.02em;
+}
+
+.hero-title span {
+    display: block;
+}
+
+.gradient-text {
+    background: var(--gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradient-shift 3s ease-in-out infinite;
+}
+
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.highlight {
+    color: var(--accent);
+    position: relative;
+}
+
+.highlight::after {
+    content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--accent);
+    border-radius: 2px;
+    opacity: 0.6;
+}
+
+.hero-description {
+    font-size: clamp(1rem, 2vw, 1.25rem);
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    max-width: 500px;
+    line-height: 1.6;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2.5rem;
+    animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+.stat {
+    text-align: center;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    transition: var(--transition);
+    backdrop-filter: blur(10px);
+}
+
+.stat:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary);
+}
+
+.stat-number {
+    display: block;
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 0.25rem;
+    transition: var(--transition-fast);
+}
+
+.stat:hover .stat-number {
+    color: var(--accent);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.hero-actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    animation: fadeInUp 1s ease-out 0.5s both;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+.ripple-effect {
+    pointer-events: none;
+    z-index: 1;
+}
+
+.btn-primary, .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2rem;
+    border-radius: 50px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+}
+
+.btn-primary {
+    background: var(--gradient);
+    color: white;
+    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
+}
+
+.btn-secondary {
+    background: transparent;
+    color: var(--text);
+    border: 2px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background: var(--surface);
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+/* Chat Preview */
+.hero-visual {
+    animation: slideInRight 1s ease-out;
+    animation-fill-mode: both;
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(50px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+.chat-preview {
+    background: var(--surface);
+    border-radius: 20px;
+    padding: 1.5rem;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--border);
+    max-width: 400px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.chat-preview::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--gradient);
+    border-radius: 20px 20px 0 0;
+}
+
+.chat-preview:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--primary);
+}
+
+.chat-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.chat-avatar {
+    width: 50px;
+    height: 50px;
+    background: var(--gradient);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: white;
+}
+
+.chat-info {
+    flex: 1;
+}
+
+.chat-name {
+    display: block;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 0.25rem;
+}
+
+.chat-status {
+    font-size: 0.875rem;
+    color: var(--accent);
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.message {
+    max-width: 80%;
+    animation: messageSlide 0.5s ease-out;
+}
+
+@keyframes messageSlide {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.bot-message {
+    align-self: flex-start;
+}
+
+.user-message {
+    align-self: flex-end;
+}
+
+.message-content {
+    padding: 1rem 1.25rem;
+    border-radius: 18px;
+    font-size: 0.875rem;
+    line-height: 1.5;
+}
+
+.bot-message .message-content {
+    background: var(--card);
+    color: var(--text);
+    border-bottom-left-radius: 6px;
+}
+
+.user-message .message-content {
+    background: var(--primary);
+    color: white;
+    border-bottom-right-radius: 6px;
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 0.25rem;
+    padding: 1rem 1.25rem;
+    background: var(--card);
+    border-radius: 18px;
+    border-bottom-left-radius: 6px;
+    max-width: 60px;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--text-muted);
+    border-radius: 50%;
+    animation: typing 1.5s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing {
+    0%, 60%, 100% {
+        transform: translateY(0);
+        opacity: 0.5;
+    }
+    30% {
+        transform: translateY(-10px);
+        opacity: 1;
+    }
+}
+
+/* Features Section */
+.features {
+    padding: 6rem 0;
+    background: var(--background);
+    position: relative;
+}
+
+.features::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-radial);
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+    position: relative;
+    z-index: 1;
+}
+
+.section-header h2 {
+    font-size: clamp(2rem, 4vw, 2.5rem);
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 1rem;
+    background: var(--gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.section-header p {
+    font-size: clamp(1rem, 2vw, 1.25rem);
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    position: relative;
+    z-index: 1;
+}
+
+.feature-card {
+    background: var(--surface);
+    padding: 2.5rem;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    transition: var(--transition);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient);
+    opacity: 0;
+    transition: var(--transition);
+    z-index: -1;
+}
+
+.feature-card:hover::before {
+    opacity: 0.05;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--primary);
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    background: var(--gradient);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    font-size: 2rem;
+    color: white;
+    transition: var(--transition);
+    position: relative;
+    z-index: 1;
+}
+
+.feature-card:hover .feature-icon {
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 1;
+}
+
+.feature-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
+}
+
+/* About Section */
+.about {
+    padding: 6rem 0;
+    background: var(--surface);
+}
+
+.about-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+}
+
+.about-text h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 1.5rem;
+}
+
+.about-intro {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+}
+
+.about-features {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.about-feature {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: var(--text-secondary);
+}
+
+.about-feature i {
+    color: var(--accent);
+    font-size: 1.25rem;
+}
+
+.about-description {
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.stats-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1.5rem;
+    background: var(--card);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--gradient);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: white;
+}
+
+.stat-info {
+    flex: 1;
+}
+
+.stat-number {
+    display: block;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 0.25rem;
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Emergency Section */
+.emergency {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.emergency::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
+    opacity: 0.1;
+}
+
+.emergency-content {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    max-width: 1000px;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    z-index: 1;
+}
+
+.emergency-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    animation: pulse 2s infinite;
+}
+
+.emergency-text h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.emergency-text p {
+    font-size: 1.125rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+.emergency-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+}
+
+.contact-item {
+    font-size: 1.125rem;
+    font-weight: 600;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+}
+
+.emergency-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.btn-emergency {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    border-radius: 50px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: var(--transition);
+    cursor: pointer;
+    border: none;
+    font-size: 1rem;
+    background: white;
+    color: #dc2626;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn-emergency:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.btn-emergency.secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-emergency.secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Community Section */
+.community {
+    padding: 6rem 0;
+    background: var(--surface);
+}
+
+.community-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+.community-card {
+    background: var(--card);
+    padding: 2.5rem;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    text-align: center;
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.community-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient);
+    opacity: 0;
+    transition: var(--transition);
+    z-index: -1;
+}
+
+.community-card:hover::before {
+    opacity: 0.05;
+}
+
+.community-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: var(--shadow-xl);
+    border-color: var(--primary);
+}
+
+.community-icon {
+    width: 80px;
+    height: 80px;
+    background: var(--gradient);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    font-size: 2rem;
+    color: white;
+    transition: var(--transition);
+}
+
+.community-card:hover .community-icon {
+    transform: scale(1.1) rotate(5deg);
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
+}
+
+.community-card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 1rem;
+}
+
+.community-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.community-stats {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.community-stats span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    background: rgba(124, 58, 237, 0.1);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+}
+
+.community-cta {
+    text-align: center;
+}
+
+.community-note {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    margin-top: 1rem;
+}
+
+/* Resources Section */
+.resources {
+    padding: 6rem 0;
+    background: var(--background);
+}
+
+.resources-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.resource-card {
+    background: var(--surface);
+    padding: 2rem;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    transition: var(--transition);
+    text-align: center;
+}
+
+.resource-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary);
+}
+
+.resource-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--gradient);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    font-size: 1.5rem;
+    color: white;
+}
+
+.resource-card h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 1rem;
+}
+
+.resource-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.resource-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.resource-link:hover {
+    color: var(--primary-light);
+    transform: translateX(4px);
+}
+
+/* CTA Section */
+.cta {
+    padding: 6rem 0;
+    background: var(--background);
+    text-align: center;
+}
+
+.cta-content h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 1rem;
+}
+
+.cta-content p {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-bottom: 2.5rem;
+}
+
+.cta-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.btn-primary.large, .btn-secondary.large {
+    padding: 1.25rem 2.5rem;
+    font-size: 1.125rem;
+}
+
+.cta-note {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+
+/* Footer */
+.footer {
+    background: var(--surface);
+    padding: 3rem 0 1rem;
+    border-top: 1px solid var(--border);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 1rem;
+}
+
+.footer-section h4 {
+    color: var(--text);
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-section ul li a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-section ul li a:hover {
+    color: var(--primary);
+}
+
+.emergency-info p {
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border);
+    color: var(--text-muted);
+}
+
+/* Loading Screen */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    animation: fadeOut 0.5s ease-out 2s forwards;
+}
+
+.loading-content {
+    text-align: center;
+    color: var(--text);
+}
+
+.loading-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 2rem;
+    animation: bounceIn 0.8s ease-out;
+}
+
+.loading-logo i {
+    animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 3px solid var(--border);
+    border-top: 3px solid var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 1.5rem;
+}
+
+.loading-text {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    animation: fadeIn 0.8s ease-out 0.5s both;
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
+
+@keyframes heartbeat {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+/* Particle Canvas */
+.particle-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Enhanced Animations */
+.animate-in {
+    animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+    animation-fill-mode: both;
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(50px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Staggered animation delays */
+.feature-card:nth-child(1) { animation-delay: 0.1s; }
+.feature-card:nth-child(2) { animation-delay: 0.2s; }
+.feature-card:nth-child(3) { animation-delay: 0.3s; }
+.feature-card:nth-child(4) { animation-delay: 0.4s; }
+.feature-card:nth-child(5) { animation-delay: 0.5s; }
+.feature-card:nth-child(6) { animation-delay: 0.6s; }
+
+/* Enhanced Responsive Design */
+@media (max-width: 1024px) {
+    .hero-content {
+        padding: 0 1rem;
+    }
+
+    .features-grid {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .community-grid {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0;
+    }
+
+    .nav-container {
+        padding: 1rem;
+    }
+
+    .nav-logo {
+        font-size: 1.25rem;
+    }
+
+    .nav-links {
+        gap: 1rem;
+    }
+
+    .nav-links a {
+        font-size: 0.875rem;
+        padding: 0.5rem 0;
+    }
+
+    .nav-cta {
+        padding: 0.625rem 1rem;
+        font-size: 0.875rem;
+    }
+
+    .hero {
+        min-height: auto;
+        padding: 4rem 0 6rem;
+    }
+
+    .hero-content {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+        text-align: center;
+        padding: 0 1rem;
+    }
+
+    .hero-title {
+        font-size: clamp(2rem, 8vw, 2.5rem);
+        margin-bottom: 1rem;
+    }
+
+    .hero-description {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .hero-stats {
+        justify-content: center;
+        gap: 1.5rem;
+    }
+
+    .hero-actions {
+        justify-content: center;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .chat-preview {
+        max-width: 100%;
+        margin: 0 auto;
+    }
+
+    .section-header {
+        margin-bottom: 3rem;
+    }
+
+    .section-header h2 {
+        font-size: clamp(1.75rem, 5vw, 2.25rem);
+    }
+
+    .features-grid,
+    .community-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .feature-card,
+    .community-card {
+        padding: 2rem 1.5rem;
+    }
+
+    .about-content {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+
+    .emergency-content {
+        flex-direction: column;
+        text-align: center;
+        gap: 1.5rem;
+    }
+
+    .emergency-actions {
+        flex-direction: column;
+        gap: 0.75rem;
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+
+    .btn-emergency {
+        width: 100%;
+    }
+
+    .cta-content h2 {
+        font-size: 2rem;
+    }
+
+    .cta-actions {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+        gap: 2rem;
+    }
+
+    .footer-section h4 {
+        margin-bottom: 1rem;
+    }
+
+    .particle-canvas {
+        display: none; /* Disable particles on mobile for performance */
+    }
+}
+
+@media (max-width: 640px) {
+    .hero-float-1,
+    .hero-float-2,
+    .hero-float-3 {
+        display: none; /* Hide floating elements on smaller screens */
+    }
+
+    .hero-pattern {
+        opacity: 0.3;
+    }
+
+    .nav-links {
+        display: none; /* Hide nav links on very small screens */
+    }
+
+    .nav-cta {
+        margin-left: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 1rem;
+    }
+
+    .hero-title {
+        font-size: clamp(1.75rem, 8vw, 2rem);
+        line-height: 1.2;
+    }
+
+    .hero-description {
+        font-size: 0.95rem;
+    }
+
+    .hero-stats {
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .stat {
+        padding: 0.75rem;
+    }
+
+    .btn-primary, .btn-secondary {
+        padding: 0.875rem 1.5rem;
+        font-size: 0.875rem;
+        width: 100%;
+        max-width: 280px;
+    }
+
+    .chat-preview {
+        padding: 1rem;
+    }
+
+    .chat-messages {
+        gap: 0.75rem;
+    }
+
+    .message-content {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+    }
+
+    .feature-card,
+    .community-card,
+    .resource-card {
+        padding: 1.5rem 1rem;
+    }
+
+    .feature-icon,
+    .community-icon,
+    .resource-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 1.25rem;
+    }
+
+    .feature-card h3,
+    .community-card h3,
+    .resource-card h3 {
+        font-size: 1.125rem;
+    }
+
+    .stat-item {
+        flex-direction: column;
+        text-align: center;
+        gap: 0.75rem;
+    }
+
+    .stat-icon {
+        width: 50px;
+        height: 50px;
+    }
+
+    .emergency-icon {
+        font-size: 2.5rem;
+    }
+
+    .emergency-text h3 {
+        font-size: 1.75rem;
+    }
+
+    .emergency-contacts {
+        gap: 0.5rem;
+    }
+
+    .contact-item {
+        padding: 0.375rem;
+        font-size: 0.9rem;
+    }
+
+    .cta-content h2 {
+        font-size: 1.75rem;
+    }
+
+    .cta-note {
+        flex-direction: column;
+        gap: 0.5rem;
+        text-align: center;
+    }
+
+    .footer {
+        padding: 2rem 0 1rem;
+    }
+
+    .footer-content {
+        gap: 1.5rem;
+    }
+}
+
+/* Touch-friendly interactions for mobile */
+@media (hover: none) and (pointer: coarse) {
+    .btn-primary, .btn-secondary, .nav-cta {
+        min-height: 44px; /* iOS touch target minimum */
+    }
+
+    .feature-card, .community-card, .resource-card {
+        transition: transform 0.1s ease; /* Faster transitions on touch */
+    }
+
+    .feature-card:active, .community-card:active, .resource-card:active {
+        transform: scale(0.98);
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    :root {
+        --primary: #0066cc;
+        --text: #000000;
+        --background: #ffffff;
+        --surface: #f8f8f8;
+        --border: #000000;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+
+    .hero-pattern {
+        animation: none;
+    }
+
+    .hero-float-1,
+    .hero-float-2,
+    .hero-float-3 {
+        animation: none;
+    }
+}
+
+
+

chatbot/landing.html

@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIMHSA - AI Mental Health Support for Rwanda</title>
+    <link rel="stylesheet" href="landing.css?v=2">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <!-- Loading Screen -->
+    <div id="loading-screen" class="loading-screen">
+        <div class="loading-content">
+            <div class="loading-logo">
+                <i class="fas fa-heart"></i>
+                <span>AIMHSA</span>
+            </div>
+            <div class="loading-spinner"></div>
+            <p class="loading-text">Loading your mental health companion...</p>
+        </div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="nav-logo">
+                <i class="fas fa-heart"></i>
+                <span>AIMHSA</span>
+            </div>
+            <div class="nav-links">
+                <a href="#features">Features</a>
+                <a href="#community">Community</a>
+                <a href="#resources">Resources</a>
+                <a href="#about">About</a>
+                <a href="http://localhost:8000/login" class="nav-cta">Get Started</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-background">
+            <div class="hero-pattern"></div>
+            <div class="hero-float-1"></div>
+            <div class="hero-float-2"></div>
+            <div class="hero-float-3"></div>
+        </div>
+        <div class="hero-content">
+            <div class="hero-text">
+                <h1 class="hero-title">
+                    <span class="gradient-text">AI-Powered</span><br>
+                    Mental Health Support<br>
+                    <span class="highlight">for Rwanda</span>
+                </h1>
+                <p class="hero-description">
+                    AIMHSA provides compassionate, culturally-sensitive mental health support 
+                    through advanced AI technology. Available in English, Kinyarwanda, French, 
+                    and Kiswahili.
+                </p>
+                <div class="hero-stats">
+                    <div class="stat">
+                        <span class="stat-number">24/7</span>
+                        <span class="stat-label">Available</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number">4</span>
+                        <span class="stat-label">Languages</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-number">100%</span>
+                        <span class="stat-label">Confidential</span>
+                    </div>
+                </div>
+                <div class="hero-actions">
+                    <a href="http://localhost:8000/login" class="btn-primary">
+                        <i class="fas fa-rocket"></i>
+                        Start Your Journey
+                    </a>
+                    <a href="#features" class="btn-secondary">
+                        <i class="fas fa-play"></i>
+                        Learn More
+                    </a>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="chat-preview">
+                    <div class="chat-header">
+                        <div class="chat-avatar">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="chat-info">
+                            <span class="chat-name">AIMHSA Assistant</span>
+                            <span class="chat-status">Online</span>
+                        </div>
+                    </div>
+                    <div class="chat-messages">
+                        <div class="message bot-message">
+                            <div class="message-content">
+                                <p>Muraho! How are you feeling today?</p>
+                            </div>
+                        </div>
+                        <div class="message user-message">
+                            <div class="message-content">
+                                <p>I've been feeling anxious lately...</p>
+                            </div>
+                        </div>
+                        <div class="message bot-message">
+                            <div class="message-content">
+                                <p>I understand. Let's talk about what's been on your mind. Remember, you're not alone in this journey.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="typing-indicator">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="container">
+            <div class="section-header">
+                <h2>Why Choose AIMHSA?</h2>
+                <p>Advanced AI technology meets compassionate mental health care</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-language"></i>
+                    </div>
+                    <h3>Multilingual Support</h3>
+                    <p>Communicate in English, Kinyarwanda, French, or Kiswahili. Our AI understands and responds in your preferred language.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3>Privacy & Security</h3>
+                    <p>Your conversations are completely confidential. Advanced encryption and privacy protection ensure your data stays safe.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3>Trauma-Informed</h3>
+                    <p>Specially designed for Rwanda's context, understanding the unique mental health challenges and cultural sensitivities.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-file-medical"></i>
+                    </div>
+                    <h3>Document Analysis</h3>
+                    <p>Upload PDF documents for personalized analysis and support based on your specific mental health documents.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-clock"></i>
+                    </div>
+                    <h3>24/7 Availability</h3>
+                    <p>Access support whenever you need it. No appointments, no waiting - immediate help is always available.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3>Professional Referrals</h3>
+                    <p>When needed, we connect you with local mental health professionals and resources in Rwanda.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="about">
+        <div class="container">
+            <div class="about-content">
+                <div class="about-text">
+                    <h2>About AIMHSA</h2>
+                    <p class="about-intro">
+                        AIMHSA (AI Mental Health Support Assistant) is a groundbreaking platform 
+                        designed specifically for Rwanda's mental health needs.
+                    </p>
+                    <div class="about-features">
+                        <div class="about-feature">
+                            <i class="fas fa-check-circle"></i>
+                            <span>Evidence-based mental health support</span>
+                        </div>
+                        <div class="about-feature">
+                            <i class="fas fa-check-circle"></i>
+                            <span>Culturally sensitive and context-aware</span>
+                        </div>
+                        <div class="about-feature">
+                            <i class="fas fa-check-circle"></i>
+                            <span>Local resource integration</span>
+                        </div>
+                        <div class="about-feature">
+                            <i class="fas fa-check-circle"></i>
+                            <span>Professional-grade AI technology</span>
+                        </div>
+                    </div>
+                    <p class="about-description">
+                        Our AI assistant is trained on comprehensive mental health resources 
+                        specific to Rwanda, including information about local hospitals, helplines, 
+                        and support services. We understand the unique challenges faced by 
+                        Rwandans and provide culturally appropriate support.
+                    </p>
+                </div>
+                <div class="about-visual">
+                    <div class="stats-container">
+                        <div class="stat-item">
+                            <div class="stat-icon">
+                                <i class="fas fa-hospital"></i>
+                            </div>
+                            <div class="stat-info">
+                                <span class="stat-number">50+</span>
+                                <span class="stat-label">Mental Health Resources</span>
+                            </div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-icon">
+                                <i class="fas fa-phone"></i>
+                            </div>
+                            <div class="stat-info">
+                                <span class="stat-number">24/7</span>
+                                <span class="stat-label">Emergency Support</span>
+                            </div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-icon">
+                                <i class="fas fa-graduation-cap"></i>
+                            </div>
+                            <div class="stat-info">
+                                <span class="stat-number">100%</span>
+                                <span class="stat-label">Evidence-Based</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Emergency Section -->
+    <section class="emergency">
+        <div class="container">
+            <div class="emergency-content">
+                <div class="emergency-icon">
+                    <i class="fas fa-exclamation-triangle"></i>
+                </div>
+                <div class="emergency-text">
+                    <h3>In Crisis? Need Immediate Help?</h3>
+                    <p>If you're experiencing a mental health crisis or having thoughts of self-harm, please contact emergency services immediately.</p>
+                    <div class="emergency-contacts">
+                        <div class="contact-item">
+                            <strong>Mental Health Hotline:</strong> 105
+                        </div>
+                        <div class="contact-item">
+                            <strong>CARAES Ndera Hospital:</strong> +250 788 305 703
+                        </div>
+                        <div class="contact-item">
+                            <strong>Emergency SMS:</strong> Text "HELP" to 105
+                        </div>
+                    </div>
+                    <div class="emergency-actions">
+                        <button class="btn-emergency" onclick="callEmergency('105')">
+                            <i class="fas fa-phone"></i>
+                            Call Hotline
+                        </button>
+                        <button class="btn-emergency secondary" onclick="sendEmergencySMS()">
+                            <i class="fas fa-sms"></i>
+                            Send Emergency SMS
+                        </button>
+                        <button class="btn-emergency secondary" onclick="findNearbyHelp()">
+                            <i class="fas fa-map-marker-alt"></i>
+                            Find Nearby Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Community Section -->
+    <section id="community" class="community">
+        <div class="container">
+            <div class="section-header">
+                <h2>Join Our Support Community</h2>
+                <p>Connect with others who understand. Share experiences, offer support, and find hope together.</p>
+            </div>
+            <div class="community-grid">
+                <div class="community-card">
+                    <div class="community-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3>Support Forums</h3>
+                    <p>Join moderated discussion forums where you can share your experiences and support others on their mental health journey.</p>
+                    <div class="community-stats">
+                        <span><i class="fas fa-user-friends"></i> 2,500+ Members</span>
+                        <span><i class="fas fa-comments"></i> 15,000+ Posts</span>
+                    </div>
+                </div>
+                <div class="community-card">
+                    <div class="community-icon">
+                        <i class="fas fa-heart"></i>
+                    </div>
+                    <h3>Success Stories</h3>
+                    <p>Read inspiring stories of recovery and hope from people who have overcome mental health challenges in Rwanda.</p>
+                    <div class="community-stats">
+                        <span><i class="fas fa-star"></i> 500+ Stories</span>
+                        <span><i class="fas fa-heart"></i> 10,000+ Likes</span>
+                    </div>
+                </div>
+                <div class="community-card">
+                    <div class="community-icon">
+                        <i class="fas fa-calendar-alt"></i>
+                    </div>
+                    <h3>Support Groups</h3>
+                    <p>Participate in virtual support groups led by trained facilitators, available in multiple languages.</p>
+                    <div class="community-stats">
+                        <span><i class="fas fa-clock"></i> Weekly Meetings</span>
+                        <span><i class="fas fa-globe"></i> 4 Languages</span>
+                    </div>
+                </div>
+            </div>
+            <div class="community-cta">
+                <a href="http://localhost:8000/login" class="btn-primary large">
+                    <i class="fas fa-sign-in-alt"></i>
+                    Join Community
+                </a>
+                <p class="community-note">
+                    <i class="fas fa-shield-alt"></i>
+                    All community interactions are moderated and confidential
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Resources Section -->
+    <section id="resources" class="resources">
+        <div class="container">
+            <div class="section-header">
+                <h2>Mental Health Resources</h2>
+                <p>Access comprehensive mental health information and tools tailored for Rwanda</p>
+            </div>
+            <div class="resources-grid">
+                <div class="resource-card">
+                    <div class="resource-icon">
+                        <i class="fas fa-book-open"></i>
+                    </div>
+                    <h3>Educational Content</h3>
+                    <p>Learn about mental health through articles, videos, and infographics in Kinyarwanda, French, and English.</p>
+                    <a href="#" class="resource-link">Explore Resources <i class="fas fa-arrow-right"></i></a>
+                </div>
+                <div class="resource-card">
+                    <div class="resource-icon">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3>Self-Help Tools</h3>
+                    <p>Access guided meditations, breathing exercises, and coping strategies designed for Rwandan culture.</p>
+                    <a href="#" class="resource-link">View Tools <i class="fas fa-arrow-right"></i></a>
+                </div>
+                <div class="resource-card">
+                    <div class="resource-icon">
+                        <i class="fas fa-user-md"></i>
+                    </div>
+                    <h3>Professional Directory</h3>
+                    <p>Find licensed mental health professionals, counselors, and therapists across Rwanda.</p>
+                    <a href="#" class="resource-link">Find Professionals <i class="fas fa-arrow-right"></i></a>
+                </div>
+                <div class="resource-card">
+                    <div class="resource-icon">
+                        <i class="fas fa-map-marked-alt"></i>
+                    </div>
+                    <h3>Emergency Services</h3>
+                    <p>Locate emergency mental health services, crisis centers, and hospitals in your area.</p>
+                    <a href="#" class="resource-link">View Services <i class="fas fa-arrow-right"></i></a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+        <div class="container">
+            <div class="cta-content">
+                <h2>Ready to Begin Your Mental Health Journey?</h2>
+                <p>Join thousands of Rwandans who have found support through AIMHSA</p>
+                <div class="cta-actions">
+                    <a href="http://localhost:8000/login" class="btn-primary large">
+                        <i class="fas fa-rocket"></i>
+                        Start Your Journey Today
+                    </a>
+                    <a href="http://localhost:8000/register" class="btn-secondary large">
+                        <i class="fas fa-user-plus"></i>
+                        Create Free Account
+                    </a>
+                </div>
+                <div class="cta-note">
+                    <i class="fas fa-lock"></i>
+                    <span>100% Free • No Credit Card Required • Instant Access</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <div class="footer-logo">
+                        <i class="fas fa-heart"></i>
+                        <span>AIMHSA</span>
+                    </div>
+                    <p>AI-powered mental health support for Rwanda</p>
+                </div>
+                <div class="footer-section">
+                    <h4>Quick Links</h4>
+                    <ul>
+                        <li><a href="http://localhost:8000/login">Sign In</a></li>
+                        <li><a href="http://localhost:8000/register">Register</a></li>
+                        <li><a href="#features">Features</a></li>
+                        <li><a href="#about">About</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h4>Support</h4>
+                    <ul>
+                        <li><a href="#contact">Contact Us</a></li>
+                        <li><a href="#">Privacy Policy</a></li>
+                        <li><a href="#">Terms of Service</a></li>
+                        <li><a href="#">Help Center</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h4>Emergency</h4>
+                    <div class="emergency-info">
+                        <p><strong>Mental Health Hotline:</strong> 105</p>
+                        <p><strong>CARAES Ndera:</strong> +250 788 305 703</p>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2024 AIMHSA. All rights reserved. | Designed for Rwanda's mental health needs.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="landing.js?v=2"></script>
+    <script>
+        // Debug script to check what's happening
+        console.log('Landing page loaded successfully!');
+        console.log('Current URL:', window.location.href);
+        console.log('No redirects should happen from this page');
+        
+        // Check if there are any other scripts that might be causing redirects
+        setTimeout(() => {
+            console.log('After 1 second, URL is still:', window.location.href);
+        }, 1000);
+    </script>
+</body>
+</html>
+
+
+

chatbot/landing.js

@@ -0,0 +1,642 @@
+// AIMHSA Landing Page JavaScript
+(() => {
+    'use strict';
+
+    // Get API URL from environment or use current host
+    const API_BASE_URL = `http://${window.location.hostname}:${window.location.port || '5057'}`;
+
+    // Smooth scrolling for navigation links
+    function initSmoothScrolling() {
+        const navLinks = document.querySelectorAll('a[href^="#"]');
+        
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const targetId = link.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    const offsetTop = targetElement.offsetTop - 80; // Account for fixed navbar
+                    window.scrollTo({
+                        top: offsetTop,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    }
+
+    // Navbar scroll effect
+    function initNavbarScroll() {
+        const navbar = document.querySelector('.navbar');
+        let lastScrollY = window.scrollY;
+
+        window.addEventListener('scroll', () => {
+            const currentScrollY = window.scrollY;
+            
+            if (currentScrollY > 100) {
+                navbar.style.background = 'rgba(15, 23, 42, 0.98)';
+                navbar.style.backdropFilter = 'blur(15px)';
+            } else {
+                navbar.style.background = 'rgba(15, 23, 42, 0.95)';
+                navbar.style.backdropFilter = 'blur(10px)';
+            }
+
+            // Hide/show navbar on scroll
+            if (currentScrollY > lastScrollY && currentScrollY > 200) {
+                navbar.style.transform = 'translateY(-100%)';
+            } else {
+                navbar.style.transform = 'translateY(0)';
+            }
+
+            lastScrollY = currentScrollY;
+        });
+    }
+
+    // Intersection Observer for animations
+    function initScrollAnimations() {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-in');
+                }
+            });
+        }, observerOptions);
+
+        // Observe elements for animation
+        const animateElements = document.querySelectorAll('.feature-card, .stat-item, .about-text, .about-visual');
+        animateElements.forEach(el => {
+            observer.observe(el);
+        });
+    }
+
+    // Typing animation for chat preview
+    function initTypingAnimation() {
+        const typingIndicator = document.querySelector('.typing-indicator');
+        if (!typingIndicator) return;
+
+        // Show typing indicator after a delay
+        setTimeout(() => {
+            typingIndicator.style.display = 'flex';
+            
+            // Hide typing indicator and show new message
+            setTimeout(() => {
+                typingIndicator.style.display = 'none';
+                addNewMessage();
+            }, 2000);
+        }, 3000);
+    }
+
+    // Add new message to chat preview
+    function addNewMessage() {
+        const chatMessages = document.querySelector('.chat-messages');
+        if (!chatMessages) return;
+
+        const newMessage = document.createElement('div');
+        newMessage.className = 'message bot-message';
+        newMessage.innerHTML = `
+            <div class="message-content">
+                <p>I'm here to listen and support you. What's on your mind today?</p>
+            </div>
+        `;
+
+        chatMessages.appendChild(newMessage);
+        
+        // Scroll to bottom of chat
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    // Parallax effect for hero background
+    function initParallax() {
+        const heroPattern = document.querySelector('.hero-pattern');
+        if (!heroPattern) return;
+
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const rate = scrolled * -0.5;
+            heroPattern.style.transform = `translateY(${rate}px)`;
+        });
+    }
+
+    // Counter animation for stats
+    function initCounterAnimation() {
+        const counters = document.querySelectorAll('.stat-number');
+        
+        const animateCounter = (counter) => {
+            const target = counter.textContent;
+            const isNumeric = !isNaN(target);
+            
+            if (!isNumeric) return;
+            
+            const increment = parseInt(target) / 50;
+            let current = 0;
+            
+            const updateCounter = () => {
+                if (current < parseInt(target)) {
+                    current += increment;
+                    counter.textContent = Math.ceil(current);
+                    requestAnimationFrame(updateCounter);
+                } else {
+                    counter.textContent = target;
+                }
+            };
+            
+            updateCounter();
+        };
+
+        const counterObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateCounter(entry.target);
+                    counterObserver.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+
+        counters.forEach(counter => {
+            counterObserver.observe(counter);
+        });
+    }
+
+    // Mobile menu toggle (if needed for mobile)
+    function initMobileMenu() {
+        const navLinks = document.querySelector('.nav-links');
+        const navToggle = document.createElement('button');
+        navToggle.className = 'nav-toggle';
+        navToggle.innerHTML = '<i class="fas fa-bars"></i>';
+        navToggle.style.display = 'none';
+        
+        const navContainer = document.querySelector('.nav-container');
+        navContainer.appendChild(navToggle);
+
+        navToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+
+        // Show/hide mobile menu based on screen size
+        const checkScreenSize = () => {
+            if (window.innerWidth <= 768) {
+                navToggle.style.display = 'block';
+                navLinks.style.display = navLinks.classList.contains('active') ? 'flex' : 'none';
+            } else {
+                navToggle.style.display = 'none';
+                navLinks.style.display = 'flex';
+                navLinks.classList.remove('active');
+            }
+        };
+
+        window.addEventListener('resize', checkScreenSize);
+        checkScreenSize();
+    }
+
+    // Form validation for CTA buttons
+    function initFormValidation() {
+        const ctaButtons = document.querySelectorAll('.btn-primary, .btn-secondary');
+        
+        ctaButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                // Add click animation
+                button.style.transform = 'scale(0.95)';
+                setTimeout(() => {
+                    button.style.transform = 'scale(1)';
+                }, 150);
+            });
+        });
+    }
+
+    // Loading animation
+    function initLoadingAnimation() {
+        // Add loading class to body
+        document.body.classList.add('loading');
+        
+        // Remove loading class when page is fully loaded
+        window.addEventListener('load', () => {
+            document.body.classList.remove('loading');
+        });
+    }
+
+    // Emergency contact click tracking and functionality
+    function initEmergencyTracking() {
+        const emergencyContacts = document.querySelectorAll('.contact-item');
+
+        emergencyContacts.forEach(contact => {
+            contact.addEventListener('click', () => {
+                // Track emergency contact clicks
+                console.log('Emergency contact clicked:', contact.textContent);
+
+                // Add visual feedback
+                contact.style.background = 'rgba(255, 255, 255, 0.1)';
+                setTimeout(() => {
+                    contact.style.background = '';
+                }, 200);
+            });
+        });
+    }
+
+    // Emergency action functions
+    function callEmergency(number) {
+        // Try to initiate phone call
+        if (typeof window !== 'undefined' && window.location) {
+            // Mobile devices will handle tel: links
+            window.location.href = `tel:${number}`;
+        } else {
+            // Fallback: show alert with number
+            alert(`Please call emergency number: ${number}\n\nIf you're unable to call, please seek help from someone nearby or go to the nearest emergency room.`);
+        }
+
+        // Track emergency call attempt
+        console.log('Emergency call initiated:', number);
+        logEmergencyAction('call', number);
+    }
+
+    function sendEmergencySMS() {
+        const message = "HELP - I need mental health support";
+        const number = "105";
+
+        // Try to open SMS app
+        if (typeof window !== 'undefined' && window.location) {
+            const smsUrl = `sms:${number}?body=${encodeURIComponent(message)}`;
+            window.location.href = smsUrl;
+        } else {
+            alert(`Please send SMS to ${number} with message: "${message}"`);
+        }
+
+        // Track emergency SMS attempt
+        console.log('Emergency SMS initiated');
+        logEmergencyAction('sms', number);
+    }
+
+    function findNearbyHelp() {
+        // Check if geolocation is available
+        if ("geolocation" in navigator) {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    const lat = position.coords.latitude;
+                    const lng = position.coords.longitude;
+
+                    // Open Google Maps with search for mental health facilities
+                    const query = encodeURIComponent("mental health hospital Rwanda");
+                    const mapsUrl = `https://www.google.com/maps/search/${query}/@${lat},${lng},15z`;
+
+                    window.open(mapsUrl, '_blank');
+
+                    // Track location access
+                    logEmergencyAction('location', `${lat},${lng}`);
+                },
+                (error) => {
+                    console.error('Geolocation error:', error);
+                    // Fallback: show general Rwanda mental health resources
+                    const fallbackUrl = "https://www.google.com/maps/search/mental+health+hospital/@-1.9403,29.8739,8z/data=!3m1!4b1";
+                    window.open(fallbackUrl, '_blank');
+                    logEmergencyAction('location_fallback', 'Rwanda');
+                },
+                {
+                    enableHighAccuracy: true,
+                    timeout: 10000,
+                    maximumAge: 300000 // 5 minutes
+                }
+            );
+        } else {
+            // Geolocation not available
+            alert("Location services are not available. Showing general Rwanda mental health resources.");
+            const fallbackUrl = "https://www.google.com/maps/search/mental+health+hospital/@-1.9403,29.8739,8z/data=!3m1!4b1";
+            window.open(fallbackUrl, '_blank');
+            logEmergencyAction('location_unavailable', 'Rwanda');
+        }
+    }
+
+    function logEmergencyAction(action, details) {
+        // Log emergency actions for analytics and support
+        const emergencyLog = {
+            action: action,
+            details: details,
+            timestamp: new Date().toISOString(),
+            userAgent: navigator.userAgent,
+            referrer: document.referrer || 'direct'
+        };
+
+        // Store in localStorage for now (could be sent to server later)
+        const logs = JSON.parse(localStorage.getItem('aimhsa_emergency_logs') || '[]');
+        logs.push(emergencyLog);
+
+        // Keep only last 10 logs
+        if (logs.length > 10) {
+            logs.shift();
+        }
+
+        localStorage.setItem('aimhsa_emergency_logs', JSON.stringify(logs));
+
+        // Could send to analytics server here
+        console.log('Emergency action logged:', emergencyLog);
+    }
+
+    // Community interaction tracking
+    function initCommunityTracking() {
+        const communityCards = document.querySelectorAll('.community-card');
+
+        communityCards.forEach(card => {
+            card.addEventListener('click', () => {
+                const cardType = card.querySelector('h3').textContent.toLowerCase().replace(' ', '_');
+                console.log('Community card clicked:', cardType);
+
+                // Add ripple effect
+                const ripple = document.createElement('div');
+                ripple.className = 'ripple-effect';
+                ripple.style.position = 'absolute';
+                ripple.style.borderRadius = '50%';
+                ripple.style.background = 'rgba(255, 255, 255, 0.3)';
+                ripple.style.transform = 'scale(0)';
+                ripple.style.animation = 'ripple 0.6s linear';
+                ripple.style.left = '50%';
+                ripple.style.top = '50%';
+                ripple.style.width = '20px';
+                ripple.style.height = '20px';
+                ripple.style.marginLeft = '-10px';
+                ripple.style.marginTop = '-10px';
+
+                card.appendChild(ripple);
+
+                setTimeout(() => {
+                    ripple.remove();
+                }, 600);
+            });
+        });
+    }
+
+    // Resource interaction tracking
+    function initResourceTracking() {
+        const resourceLinks = document.querySelectorAll('.resource-link');
+
+        resourceLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                const resourceType = link.closest('.resource-card').querySelector('h3').textContent;
+                console.log('Resource accessed:', resourceType);
+
+                // Add loading state
+                link.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
+                link.style.pointerEvents = 'none';
+
+                // Reset after a short delay (simulating loading)
+                setTimeout(() => {
+                    link.innerHTML = link.getAttribute('data-original-text') || 'Access Resource <i class="fas fa-arrow-right"></i>';
+                    link.style.pointerEvents = 'auto';
+                }, 1000);
+            });
+        });
+    }
+
+    // Particle effect for hero section
+    function initParticleEffect() {
+        const hero = document.querySelector('.hero');
+        if (!hero) return;
+
+        const canvas = document.createElement('canvas');
+        canvas.className = 'particle-canvas';
+        canvas.style.position = 'absolute';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.pointerEvents = 'none';
+        canvas.style.zIndex = '1';
+
+        hero.appendChild(canvas);
+
+        const ctx = canvas.getContext('2d');
+        let particles = [];
+        let animationId;
+
+        function resizeCanvas() {
+            canvas.width = hero.offsetWidth;
+            canvas.height = hero.offsetHeight;
+        }
+
+        function createParticle() {
+            return {
+                x: Math.random() * canvas.width,
+                y: Math.random() * canvas.height,
+                vx: (Math.random() - 0.5) * 0.5,
+                vy: (Math.random() - 0.5) * 0.5,
+                size: Math.random() * 2 + 1,
+                opacity: Math.random() * 0.5 + 0.2
+            };
+        }
+
+        function initParticles() {
+            particles = [];
+            for (let i = 0; i < 50; i++) {
+                particles.push(createParticle());
+            }
+        }
+
+        function animateParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            particles.forEach(particle => {
+                particle.x += particle.vx;
+                particle.y += particle.vy;
+
+                if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
+                if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
+
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(124, 58, 237, ${particle.opacity})`;
+                ctx.fill();
+            });
+
+            animationId = requestAnimationFrame(animateParticles);
+        }
+
+        resizeCanvas();
+        initParticles();
+        animateParticles();
+
+        window.addEventListener('resize', () => {
+            resizeCanvas();
+            initParticles();
+        });
+    }
+
+    // Enhanced scroll animations with stagger effect
+    function initEnhancedScrollAnimations() {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry, index) => {
+                if (entry.isIntersecting) {
+                    setTimeout(() => {
+                        entry.target.classList.add('animate-in');
+                    }, index * 100); // Stagger animation
+                }
+            });
+        }, observerOptions);
+
+        const animateElements = document.querySelectorAll('.feature-card, .stat-item, .about-text, .about-visual, .emergency-content, .cta-content');
+        animateElements.forEach(el => {
+            observer.observe(el);
+        });
+    }
+
+    // Mouse follow effect for interactive elements
+    function initMouseFollow() {
+        const featureCards = document.querySelectorAll('.feature-card');
+        const hero = document.querySelector('.hero');
+
+        featureCards.forEach(card => {
+            card.addEventListener('mousemove', (e) => {
+                const rect = card.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+
+                const centerX = rect.width / 2;
+                const centerY = rect.height / 2;
+
+                const rotateX = (y - centerY) / 10;
+                const rotateY = (centerX - x) / 10;
+
+                card.style.transform = `translateY(-8px) scale(1.02) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+            });
+
+            card.addEventListener('mouseleave', () => {
+                card.style.transform = '';
+            });
+        });
+    }
+
+    // Initialize all features
+    function init() {
+        // Show loading screen initially
+        const loadingScreen = document.getElementById('loading-screen');
+        if (loadingScreen) {
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+            }, 2500); // Show loading for 2.5 seconds
+        }
+
+        initSmoothScrolling();
+        initNavbarScroll();
+        initEnhancedScrollAnimations();
+        initTypingAnimation();
+        initParallax();
+        initCounterAnimation();
+        initMobileMenu();
+        initFormValidation();
+        initLoadingAnimation();
+        initEmergencyTracking();
+        initParticleEffect();
+        initMouseFollow();
+        initCommunityTracking();
+        initResourceTracking();
+    }
+
+    // Start when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    // Add CSS for animations
+    const style = document.createElement('style');
+    style.textContent = `
+        .loading {
+            overflow: hidden;
+        }
+        
+        .loading::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--background);
+            z-index: 9999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .loading::after {
+            content: 'AIMHSA';
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--primary);
+            z-index: 10000;
+        }
+        
+        .animate-in {
+            animation: slideInUp 0.6s ease-out;
+        }
+        
+        @keyframes slideInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .nav-toggle {
+            background: none;
+            border: none;
+            color: var(--text);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+        
+        @media (max-width: 768px) {
+            .nav-links {
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                background: var(--surface);
+                flex-direction: column;
+                padding: 1rem;
+                border-top: 1px solid var(--border);
+                display: none;
+            }
+            
+            .nav-links.active {
+                display: flex;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+
+    // Update all fetch calls to use API_BASE_URL
+    document.getElementById('startBtn')?.addEventListener('click', async () => {
+        try {
+            const response = await fetch(`${API_BASE_URL}/session`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ account: 'guest_' + Date.now() })
+            });
+            const data = await response.json();
+            window.location.href = '/?id=' + data.id;
+        } catch (error) {
+            console.error('Error starting chat:', error);
+        }
+    });
+})();
+
+
+

chatbot/login.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AIMHSA - Sign In</title>
+    <link rel="stylesheet" href="auth.css" />
+</head>
+<body>
+    <div class="auth-container">
+        <div class="auth-card">
+            <div class="auth-header">
+                <h1 class="brand">AIMHSA</h1>
+                <p class="subtitle">Mental Health Companion for Rwanda</p>
+            </div>
+            
+	            <form class="auth-form" id="loginForm" novalidate>
+                <div class="form-group">
+                    <label for="loginEmail">Email Address</label>
+	                    <input type="email" id="loginEmail" name="loginEmail" autocomplete="email" required />
+	                    <div class="input-hint" id="emailHint" aria-live="polite"></div>
+                </div>
+	                <div class="form-group">
+                    <label for="loginPassword">Password</label>
+	                    <div class="password-field">
+	                        <input type="password" id="loginPassword" name="loginPassword" autocomplete="current-password" required />
+	                        <button type="button" class="toggle-password" id="togglePassword" aria-label="Show password" aria-pressed="false">👁️</button>
+	                    </div>
+	                    <div class="input-row">
+	                        <div class="password-meter" id="passwordMeter" aria-hidden="true">
+	                            <div class="password-meter-bar" id="passwordMeterBar"></div>
+	                        </div>
+	                        <div class="caps-lock" id="capsLockIndicator" hidden>Caps Lock is ON</div>
+	                    </div>
+                </div>
+	                <div class="form-row">
+	                    <label class="remember-me">
+	                        <input type="checkbox" id="rememberMe" />
+	                        <span>Remember me</span>
+	                    </label>
+	                    <a class="forgot-link" id="forgotLink" href="#">Forgot password?</a>
+	                </div>
+                <button type="submit" class="auth-btn" id="signInBtn">Sign In</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Don't have an account? <a href="/register">Register</a></p>
+            </div>
+            
+            
+            <div class="auth-divider">
+                <span>or</span>
+            </div>
+            
+            <button class="anonymous-btn" id="anonBtn">Continue as Guest</button>
+	            
+	            <!-- Optional MFA Modal (shown only if server requests it) -->
+	            <div class="modal" id="mfaModal" aria-hidden="true" role="dialog" aria-modal="true">
+	                <div class="modal-backdrop" id="mfaBackdrop"></div>
+	                <div class="modal-content" role="document">
+	                    <div class="modal-header">
+	                        <h2>Two-Factor Authentication</h2>
+	                        <button type="button" class="modal-close" id="mfaClose" aria-label="Close">✕</button>
+	                    </div>
+	                    <div class="modal-body">
+	                        <p>Enter the 6-digit code from your authenticator app or SMS.</p>
+	                        <div class="form-group">
+	                            <label for="mfaCode">One-Time Code</label>
+	                            <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" id="mfaCode" autocomplete="one-time-code" />
+	                        </div>
+	                        <div class="modal-actions">
+	                            <button type="button" class="auth-btn" id="mfaVerifyBtn">Verify</button>
+	                            <button type="button" class="secondary-btn" id="mfaResendBtn">Resend code</button>
+	                        </div>
+	                        <div class="modal-message" id="mfaMessage" aria-live="polite"></div>
+	                    </div>
+	                </div>
+	            </div>
+
+	            <!-- Forgot Password Modal -->
+	            <div class="modal" id="fpModal" aria-hidden="true" role="dialog" aria-modal="true">
+	                <div class="modal-backdrop" id="fpBackdrop"></div>
+	                <div class="modal-content" role="document">
+	                    <div class="modal-header">
+	                        <h2>Reset your password</h2>
+	                        <button type="button" class="modal-close" id="fpClose" aria-label="Close">✕</button>
+	                    </div>
+	                    <div class="modal-body">
+	                        <div class="fp-step fp-step-1">
+	                            <p>Enter your email address to receive a reset code.</p>
+	                            <div class="form-group">
+	                                <label for="fpEmail">Email Address</label>
+	                                <input type="email" id="fpEmail" autocomplete="email" />
+	                            </div>
+
+	                            <div class="modal-actions">
+	                                <button type="button" class="auth-btn" id="fpRequestBtn">Send code</button>
+	                            </div>
+	                        </div>
+
+	                        <div class="fp-step fp-step-2 hidden">
+	                            <p>Enter the code and your new password.</p>
+	                            <div class="form-group">
+	                                <label for="fpCode">Reset Code</label>
+	                                <input type="text" id="fpCode" inputmode="numeric" maxlength="6" />
+	                            </div>
+	                            <div class="form-group">
+	                                <label for="fpNewPassword">New Password</label>
+	                                <input type="password" id="fpNewPassword" />
+	                            </div>
+	                            <div class="modal-actions">
+	                                <button type="button" class="auth-btn" id="fpApplyBtn">Reset password</button>
+	                                <button type="button" class="secondary-btn" id="fpResendBtn">Resend code</button>
+	                            </div>
+	                        </div>
+
+	                        <div class="modal-message" id="fpMessage" aria-live="polite"></div>
+	                    </div>
+	                </div>
+	            </div>
+            
+            <div class="auth-footer">
+                <p>By continuing, you agree to our Terms of Service and Privacy Policy</p>
+            </div>
+        </div>
+    </div>
+    
+    <script src="login.js?v=fp2"></script>
+</body>
+</html>

chatbot/login.js

@@ -0,0 +1,563 @@
+(() => {
+    const API_BASE_URL = `http://${window.location.hostname}:${window.location.port || '5057'}`;
+    
+    // Elements
+    const loginForm = document.getElementById('loginForm');
+    const signInBtn = document.getElementById('signInBtn');
+    const anonBtn = document.getElementById('anonBtn');
+    const emailInput = document.getElementById('loginEmail');
+    const emailHint = document.getElementById('emailHint');
+    const passwordInput = document.getElementById('loginPassword');
+    const togglePasswordBtn = document.getElementById('togglePassword');
+    const meter = document.getElementById('passwordMeter');
+    const meterBar = document.getElementById('passwordMeterBar');
+    const capsLockIndicator = document.getElementById('capsLockIndicator');
+    const rememberMe = document.getElementById('rememberMe');
+    const forgotLink = document.getElementById('forgotLink');
+    // Forgot password elements
+    const fpModal = document.getElementById('fpModal');
+    const fpBackdrop = document.getElementById('fpBackdrop');
+    const fpClose = document.getElementById('fpClose');
+    const fpEmail = document.getElementById('fpEmail');
+    const fpRequestBtn = document.getElementById('fpRequestBtn');
+    const fpStep1 = document.querySelector('.fp-step-1');
+    const fpStep2 = document.querySelector('.fp-step-2');
+    const fpCode = document.getElementById('fpCode');
+    const fpNewPassword = document.getElementById('fpNewPassword');
+    const fpApplyBtn = document.getElementById('fpApplyBtn');
+    const fpResendBtn = document.getElementById('fpResendBtn');
+    const fpMessage = document.getElementById('fpMessage');
+    // MFA elements
+    const mfaModal = document.getElementById('mfaModal');
+    const mfaBackdrop = document.getElementById('mfaBackdrop');
+    const mfaClose = document.getElementById('mfaClose');
+    const mfaCode = document.getElementById('mfaCode');
+    const mfaVerifyBtn = document.getElementById('mfaVerifyBtn');
+    const mfaResendBtn = document.getElementById('mfaResendBtn');
+    const mfaMessage = document.getElementById('mfaMessage');
+    
+    // Show message
+    function showMessage(text, type = 'error') {
+        const existing = document.querySelector('.error-message, .success-message');
+        if (existing) existing.remove();
+        
+        const message = document.createElement('div');
+        message.className = type === 'error' ? 'error-message' : 'success-message';
+        message.textContent = text;
+        message.style.cssText = `
+            padding: 12px 16px;
+            margin: 16px 0;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            ${type === 'error' ? 
+                'background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2);' : 
+                'background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2);'
+            }
+        `;
+        
+        loginForm.insertBefore(message, loginForm.firstChild);
+        
+        setTimeout(() => message.remove(), 5000);
+    }
+    
+    // Redirect to main app
+    function redirectToApp(account = null) {
+        if (account) {
+            localStorage.setItem('aimhsa_account', account);
+        }
+        window.location.href = '/index.html';
+    }
+
+    // Utility: simple password strength score (0..4)
+    function getPasswordStrengthScore(pw) {
+        let score = 0;
+        if (!pw) return 0;
+        if (pw.length >= 8) score++;
+        if (/[A-Z]/.test(pw)) score++;
+        if (/[a-z]/.test(pw)) score++;
+        if (/[0-9]/.test(pw)) score++;
+        if (/[^A-Za-z0-9]/.test(pw)) score++;
+        return Math.min(score, 4);
+    }
+
+    function updatePasswordMeter() {
+        const pw = passwordInput.value;
+        const score = getPasswordStrengthScore(pw);
+        const pct = (score / 4) * 100;
+        meterBar.style.width = pct + '%';
+        let color = '#ef4444';
+        if (score >= 3) color = '#f59e0b';
+        if (score >= 4) color = '#10b981';
+        meterBar.style.background = color;
+        meter.setAttribute('aria-hidden', pw ? 'false' : 'true');
+    }
+
+    // Toggle password visibility
+    togglePasswordBtn?.addEventListener('click', () => {
+        const isPassword = passwordInput.type === 'password';
+        passwordInput.type = isPassword ? 'text' : 'password';
+        togglePasswordBtn.setAttribute('aria-pressed', String(isPassword));
+    });
+
+    // Caps lock indicator
+    function handleKeyEventForCaps(e) {
+        if (typeof e.getModifierState === 'function') {
+            const on = e.getModifierState('CapsLock');
+            if (on) {
+                capsLockIndicator?.removeAttribute('hidden');
+            } else {
+                capsLockIndicator?.setAttribute('hidden', '');
+            }
+        }
+    }
+    passwordInput.addEventListener('keydown', handleKeyEventForCaps);
+    passwordInput.addEventListener('keyup', handleKeyEventForCaps);
+    passwordInput.addEventListener('input', () => {
+        updatePasswordMeter();
+    });
+
+    // Remember me: prefill email
+    const savedEmail = localStorage.getItem('aimhsa_saved_email');
+    if (savedEmail) {
+        emailInput.value = savedEmail;
+        rememberMe.checked = true;
+    }
+
+    // Email basic validation hint
+    emailInput.addEventListener('input', () => {
+        const v = emailInput.value.trim();
+        if (!v) {
+            emailHint.textContent = '';
+            return;
+        }
+        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        emailHint.textContent = !emailPattern.test(v) ? 'Please enter a valid email address' : '';
+    });
+
+    // Forgot password (client-side placeholder)
+    forgotLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        openFpModal();
+    });
+
+    // Simple cooldown after repeated failures
+    const COOLDOWN_KEY = 'aimhsa_login_cooldown_until';
+    function isInCooldown() {
+        const until = Number(localStorage.getItem(COOLDOWN_KEY) || '0');
+        return Date.now() < until;
+    }
+    function applyCooldown(seconds) {
+        const until = Date.now() + seconds * 1000;
+        localStorage.setItem(COOLDOWN_KEY, String(until));
+    }
+    function getCooldownRemainingMs() {
+        const until = Number(localStorage.getItem(COOLDOWN_KEY) || '0');
+        return Math.max(0, until - Date.now());
+    }
+    function updateCooldownUI() {
+        const remaining = getCooldownRemainingMs();
+        if (remaining > 0) {
+            signInBtn.disabled = true;
+            const secs = Math.ceil(remaining / 1000);
+            signInBtn.textContent = `Try again in ${secs}s`;
+        } else {
+            signInBtn.disabled = false;
+            signInBtn.textContent = 'Sign In';
+        }
+    }
+    if (isInCooldown()) {
+        updateCooldownUI();
+        const timer = setInterval(() => {
+            updateCooldownUI();
+            if (!isInCooldown()) clearInterval(timer);
+        }, 500);
+    }
+    
+    // Login form submission
+    loginForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        if (isInCooldown()) {
+            updateCooldownUI();
+            return;
+        }
+        
+        const email = emailInput.value.trim();
+        const password = passwordInput.value;
+        
+        if (!email || !password) {
+            showMessage('Please enter both email and password');
+            return;
+        }
+        
+        // Email validation
+        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        if (!emailPattern.test(email)) {
+            showMessage('Please enter a valid email address');
+            return;
+        }
+        
+        if (rememberMe.checked) {
+            localStorage.setItem('aimhsa_saved_email', email);
+        } else {
+            localStorage.removeItem('aimhsa_saved_email');
+        }
+        
+        signInBtn.disabled = true;
+        signInBtn.textContent = 'Signing in...';
+        
+        try {
+            // Try user login first
+            try {
+                console.log('Trying user login for:', email);
+                const res = await api('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, password })
+                });
+                
+                if (res && res.mfa_required) {
+                    // Launch MFA modal
+                    openMfaModal({ flow: 'user', email, token: res.mfa_token });
+                } else {
+                    showMessage('Successfully signed in as user!', 'success');
+                    setTimeout(() => redirectToApp(res.account || email), 1000);
+                }
+                return;
+            } catch (userErr) {
+                console.log('User login failed:', userErr.message);
+                console.log('Trying professional login...');
+            }
+            
+            // Try professional login
+            try {
+                console.log('Trying professional login for:', email);
+                const res = await api('/professional/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, password })
+                });
+                
+                // Store professional data
+                localStorage.setItem('aimhsa_professional', JSON.stringify(res));
+                if (res && res.mfa_required) {
+                    openMfaModal({ flow: 'professional', email, token: res.mfa_token });
+                } else {
+                    showMessage('Successfully signed in as professional!', 'success');
+                    setTimeout(() => {
+                        window.location.href = '/professional_dashboard.html';
+                    }, 1000);
+                }
+                return;
+            } catch (profErr) {
+                console.log('Professional login failed:', profErr.message);
+                console.log('Trying admin login...');
+            }
+            
+            // Try admin login
+            try {
+                console.log('Trying admin login for:', email);
+                const res = await api('/admin/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username: email, password })
+                });
+                
+                console.log('Admin login successful:', res);
+                // Store admin data
+                localStorage.setItem('aimhsa_admin', JSON.stringify(res));
+                if (res && res.mfa_required) {
+                    openMfaModal({ flow: 'admin', email, token: res.mfa_token });
+                } else {
+                    showMessage('Successfully signed in as admin!', 'success');
+                    setTimeout(() => {
+                        window.location.href = res.redirect || '/admin_dashboard.html';
+                    }, 1000);
+                }
+                return;
+            } catch (adminErr) {
+                console.log('Admin login failed:', adminErr.message);
+            }
+            
+            // If all login attempts failed
+            showMessage('Invalid username or password. Please check your credentials.');
+            // backoff: 10s cooldown after aggregated failure
+            applyCooldown(10);
+            updateCooldownUI();
+            
+        } catch (err) {
+            console.error('Login error:', err);
+            showMessage('Login failed. Please try again.');
+        } finally {
+            signInBtn.disabled = false;
+            signInBtn.textContent = 'Sign In';
+        }
+    });
+    
+    // Anonymous access
+    anonBtn.addEventListener('click', () => {
+        localStorage.setItem('aimhsa_account', 'null');
+        window.location.href = '/index.html';
+    });
+    
+    // Check if already logged in
+    const account = localStorage.getItem('aimhsa_account');
+    if (account && account !== 'null') {
+        redirectToApp(account);
+    }
+
+    // --- MFA helpers ---
+    function openMfaModal(context) {
+        mfaModal.classList.add('open');
+        mfaModal.setAttribute('aria-hidden', 'false');
+        mfaCode.value = '';
+        mfaMessage.textContent = '';
+        mfaCode.focus();
+
+        function close() {
+            mfaModal.classList.remove('open');
+            mfaModal.setAttribute('aria-hidden', 'true');
+        }
+
+        function onClose() {
+            close();
+            cleanup();
+        }
+
+        async function verify() {
+            const code = mfaCode.value.trim();
+            if (!/^[0-9]{6}$/.test(code)) {
+                mfaMessage.textContent = 'Please enter a valid 6-digit code.';
+                return;
+            }
+            mfaVerifyBtn.disabled = true;
+            mfaVerifyBtn.textContent = 'Verifying...';
+            try {
+                const endpoint =
+                    context.flow === 'admin' ? '/admin/mfa/verify' :
+                    context.flow === 'professional' ? '/professional/mfa/verify' :
+                    '/mfa/verify';
+                const res = await api(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username: context.username, code, token: context.token })
+                });
+                mfaMessage.textContent = 'MFA verified. Redirecting...';
+                setTimeout(() => {
+                    if (context.flow === 'admin') {
+                        window.location.href = '/admin_dashboard.html';
+                    } else if (context.flow === 'professional') {
+                        window.location.href = '/professional_dashboard.html';
+                    } else {
+                        redirectToApp(context.username);
+                    }
+                }, 600);
+            } catch (err) {
+                mfaMessage.textContent = 'Invalid or expired code. Please try again.';
+            } finally {
+                mfaVerifyBtn.disabled = false;
+                mfaVerifyBtn.textContent = 'Verify';
+            }
+        }
+
+        async function resend() {
+            try {
+                const endpoint =
+                    context.flow === 'admin' ? '/admin/mfa/resend' :
+                    context.flow === 'professional' ? '/professional/mfa/resend' :
+                    '/mfa/resend';
+                await api(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username: context.username, token: context.token })
+                });
+                mfaMessage.textContent = 'Code resent.';
+            } catch (err) {
+                mfaMessage.textContent = 'Could not resend code. Try again later.';
+            }
+        }
+
+        function cleanup() {
+            mfaBackdrop.removeEventListener('click', onClose);
+            mfaClose.removeEventListener('click', onClose);
+            mfaVerifyBtn.removeEventListener('click', verify);
+            mfaResendBtn.removeEventListener('click', resend);
+        }
+
+        mfaBackdrop.addEventListener('click', onClose);
+        mfaClose.addEventListener('click', onClose);
+        mfaVerifyBtn.addEventListener('click', verify);
+        mfaResendBtn.addEventListener('click', resend);
+    }
+
+    // --- Forgot Password helpers ---
+    function openFpModal() {
+        fpModal.classList.add('open');
+        fpModal.setAttribute('aria-hidden', 'false');
+        fpMessage.textContent = '';
+        fpStep1.classList.remove('hidden');
+        fpStep2.classList.add('hidden');
+        fpEmail.value = emailInput.value.trim();
+        setTimeout(() => fpEmail.focus(), 0);
+
+        function close() {
+            fpModal.classList.remove('open');
+            fpModal.setAttribute('aria-hidden', 'true');
+        }
+
+        function onClose() {
+            close();
+            cleanup();
+        }
+
+        async function requestCode() {
+            console.log('Request code function called');
+            console.log('fpEmail element:', fpEmail);
+            console.log('fpEmail value:', fpEmail ? fpEmail.value : 'fpEmail is null');
+            const email = fpEmail.value.trim();
+            console.log('Email:', email);
+            
+            if (!email) {
+                fpMessage.textContent = 'Please enter your email address.';
+                fpMessage.style.display = 'block';
+                return;
+            }
+            
+            // Email validation
+            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            if (!emailPattern.test(email)) {
+                fpMessage.textContent = 'Please enter a valid email address.';
+                fpMessage.style.display = 'block';
+                return;
+            }
+            
+            fpRequestBtn.disabled = true;
+            fpRequestBtn.textContent = 'Sending...';
+            fpMessage.style.display = 'none';
+            
+            try {
+                console.log('Making API call to /forgot_password');
+                const res = await api('/forgot_password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: email })
+                });
+                
+                console.log('API response:', res);
+                
+                if (res && res.ok) {
+                    // Show success message and token
+                    let message = res.message || 'Reset code sent successfully!';
+                    if (res.token) {
+                        message += ` Your reset code is: ${res.token}`;
+                    }
+                    fpMessage.textContent = message;
+                    fpMessage.style.display = 'block';
+                    fpMessage.className = 'modal-message success';
+                    
+                    // Move to step 2
+                    fpStep1.classList.add('hidden');
+                    fpStep2.classList.remove('hidden');
+                    fpCode.value = '';
+                    fpNewPassword.value = '';
+                    setTimeout(() => fpCode.focus(), 0);
+                } else {
+                    fpMessage.textContent = res.error || 'Failed to send reset code.';
+                    fpMessage.style.display = 'block';
+                    fpMessage.className = 'modal-message error';
+                }
+            } catch (err) {
+                console.error('Forgot password error:', err);
+                fpMessage.textContent = 'Could not initiate reset. Please check your connection and try again.';
+                fpMessage.style.display = 'block';
+                fpMessage.className = 'modal-message error';
+            } finally {
+                fpRequestBtn.disabled = false;
+                fpRequestBtn.textContent = 'Send code';
+            }
+        }
+
+        async function applyReset() {
+            console.log('Apply reset function called');
+            const email = fpEmail.value.trim();
+            const code = fpCode.value.trim();
+            const newPw = fpNewPassword.value;
+            
+            console.log('Reset data:', { email, code, newPw: '***' });
+            
+            if (!/^[0-9A-Z]{6}$/.test(code)) {
+                fpMessage.textContent = 'Please enter the 6-character code.';
+                fpMessage.style.display = 'block';
+                fpMessage.className = 'modal-message error';
+                return;
+            }
+            if (newPw.length < 6) {
+                fpMessage.textContent = 'New password must be at least 6 characters.';
+                fpMessage.style.display = 'block';
+                fpMessage.className = 'modal-message error';
+                return;
+            }
+            
+            fpApplyBtn.disabled = true;
+            fpApplyBtn.textContent = 'Resetting...';
+            fpMessage.style.display = 'none';
+            
+            try {
+                console.log('Making API call to /reset_password');
+                const res = await api('/reset_password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: email, token: code, new_password: newPw })
+                });
+                
+                console.log('Reset password response:', res);
+                
+                if (res && res.ok) {
+                    fpMessage.textContent = res.message || 'Password updated successfully! You can now sign in.';
+                    fpMessage.style.display = 'block';
+                    fpMessage.className = 'modal-message success';
+                    
+                    setTimeout(() => {
+                        onClose();
+                        emailInput.value = email;
+                        passwordInput.focus();
+                    }, 2000);
+                } else {
+                    fpMessage.textContent = res.error || 'Invalid code or error updating password.';
+                    fpMessage.style.display = 'block';
+                    fpMessage.className = 'modal-message error';
+                }
+            } catch (err) {
+                console.error('Reset password error:', err);
+                fpMessage.textContent = 'Invalid code or error updating password. Please try again.';
+                fpMessage.style.display = 'block';
+                fpMessage.className = 'modal-message error';
+            } finally {
+                fpApplyBtn.disabled = false;
+                fpApplyBtn.textContent = 'Reset password';
+            }
+        }
+
+        async function resendCode() {
+            // Reuse forgot_password to resend
+            requestCode();
+        }
+
+        function cleanup() {
+            fpBackdrop.removeEventListener('click', onClose);
+            fpClose.removeEventListener('click', onClose);
+            fpRequestBtn.removeEventListener('click', requestCode);
+            fpApplyBtn.removeEventListener('click', applyReset);
+            fpResendBtn.removeEventListener('click', resendCode);
+        }
+
+        fpBackdrop.addEventListener('click', onClose);
+        fpClose.addEventListener('click', onClose);
+        
+        console.log('Attaching event listener to fpRequestBtn:', fpRequestBtn);
+        fpRequestBtn.addEventListener('click', requestCode);
+        
+        fpApplyBtn.addEventListener('click', applyReset);
+        fpResendBtn.addEventListener('click', resendCode);
+    }
+})();

chatbot/professional.css

@@ -0,0 +1,2446 @@
+/* Professional Dashboard Styles with AdminLTE 4 Integration */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Source Sans Pro', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-attachment: fixed;
+    min-height: 100vh;
+    color: #333;
+    line-height: 1.6;
+}
+
+/* AdminLTE 4 Compatibility Overrides */
+.content-wrapper {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background-attachment: fixed !important;
+}
+
+.main-header {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border-radius: 24px !important;
+    margin-bottom: 2rem !important;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
+}
+
+.navbar-nav .nav-link {
+    color: #333 !important;
+}
+
+.sidebar {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+.sidebar .nav-link {
+    color: #666 !important;
+    border-radius: 12px !important;
+    margin: 4px 8px !important;
+}
+
+.sidebar .nav-link:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+    color: #667eea !important;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 16px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+}
+
+.card-header {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 16px 16px 0 0 !important;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn-secondary:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+    border-color: #667eea !important;
+    color: #667eea !important;
+}
+
+.form-control {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 12px !important;
+    padding: 12px 16px !important;
+}
+
+.form-control:focus {
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-color: #667eea !important;
+    color: #333 !important;
+    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
+}
+
+.table {
+    color: #333 !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    border-radius: 12px !important;
+    overflow: hidden !important;
+}
+
+.table th {
+    background: rgba(102, 126, 234, 0.1) !important;
+    border: none !important;
+    color: #333 !important;
+    font-weight: 600 !important;
+    padding: 16px !important;
+}
+
+.table td {
+    border: none !important;
+    padding: 16px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
+}
+
+.modal-content {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 20px !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
+    color: #333 !important;
+}
+
+.modal-header {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border-radius: 20px 20px 0 0 !important;
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+
+.modal-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border-radius: 0 0 20px 20px !important;
+    background: rgba(102, 126, 234, 0.02) !important;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.professional-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.professional-header {
+    background: rgba(255, 255, 255, 0.98);
+    padding: 2.5rem;
+    border-radius: 24px;
+    margin-bottom: 2rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.professional-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
+    background-size: 200% 100%;
+    animation: gradientShift 3s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.header-content h1 {
+    font-size: 2.5rem;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+.header-content p {
+    color: #666;
+    font-size: 1.1rem;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-details {
+    text-align: right;
+}
+
+.user-details span {
+    display: block;
+}
+
+.user-details span:first-child {
+    font-weight: bold;
+    font-size: 1.1rem;
+}
+
+.user-role {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.logout-btn {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.logout-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+/* Stats Section */
+.stats-section {
+    margin-bottom: 2rem;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.stat-card {
+    background: rgba(255, 255, 255, 0.98);
+    padding: 2.5rem;
+    border-radius: 24px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.stat-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 24px 24px 0 0;
+}
+
+.stat-card::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.stat-card:hover::after {
+    opacity: 1;
+}
+
+.stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.8rem;
+    color: white;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 2;
+}
+
+.stat-icon::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    z-index: -1;
+    opacity: 0.3;
+    filter: blur(8px);
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+    line-height: 1;
+    position: relative;
+    z-index: 2;
+}
+
+.stat-label {
+    color: #666;
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    position: relative;
+    z-index: 2;
+}
+
+/* Content Sections */
+.professional-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.content-section {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #333;
+}
+
+.header-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.8);
+    color: #666;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+}
+
+.btn-small {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+}
+
+/* Quick Actions */
+.quick-actions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.action-btn {
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid rgba(102, 126, 234, 0.2);
+    border-radius: 16px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.action-btn:hover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: #667eea;
+    transform: translateY(-3px);
+}
+
+.action-icon {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+.action-text {
+    font-weight: 600;
+    color: #333;
+}
+
+/* Sessions Grid */
+.sessions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+}
+
+.session-card {
+    background: rgba(255, 255, 255, 0.98);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.2);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 5px solid #667eea;
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    position: relative;
+    overflow: hidden;
+}
+
+.session-card:hover {
+    transform: translateY(-6px) scale(1.01);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.session-card.high-risk {
+    border-left-color: #ef4444;
+    background: linear-gradient(135deg, rgba(254, 242, 242, 0.8), rgba(255, 255, 255, 0.98));
+    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+.session-card.high-risk:hover {
+    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.session-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    transform: translate(30px, -30px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.session-card:hover::before {
+    opacity: 1;
+}
+
+/* Contact Information Styles */
+.contact-info {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+    border-radius: 12px;
+    padding: 0.75rem;
+    margin: 0.5rem 0;
+    border-left: 4px solid #667eea;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.contact-info::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    transform: translate(20px, -20px);
+}
+
+.contact-link {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    position: relative;
+    z-index: 2;
+}
+
+.contact-link:hover {
+    color: #5a6fd8;
+    text-decoration: underline;
+    transform: translateX(2px);
+}
+
+.detail-row.contact-info .detail-label {
+    font-weight: 700;
+    color: #667eea;
+    font-size: 0.9rem;
+    position: relative;
+    z-index: 2;
+}
+
+.session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.session-user {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+    position: relative;
+    z-index: 2;
+}
+
+.user-avatar::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    z-index: -1;
+    opacity: 0.3;
+    filter: blur(6px);
+}
+
+.user-info h4 {
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+}
+
+.user-info p {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.session-status {
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    position: relative;
+    z-index: 2;
+}
+
+.status-pending { 
+    background: linear-gradient(135deg, #fef3c7, #fde68a); 
+    color: #92400e; 
+    box-shadow: 0 4px 12px rgba(146, 64, 14, 0.2);
+}
+
+.status-confirmed { 
+    background: linear-gradient(135deg, #d1fae5, #a7f3d0); 
+    color: #065f46; 
+    box-shadow: 0 4px 12px rgba(6, 95, 70, 0.2);
+}
+
+.status-completed { 
+    background: linear-gradient(135deg, #dbeafe, #bfdbfe); 
+    color: #1e40af; 
+    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
+}
+
+.status-cancelled { 
+    background: linear-gradient(135deg, #fee2e2, #fecaca); 
+    color: #991b1b; 
+    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.2);
+}
+
+.session-details {
+    margin-bottom: 1rem;
+}
+
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.detail-label {
+    color: #666;
+    font-weight: 500;
+}
+
+.detail-value {
+    color: #333;
+    font-weight: 600;
+}
+
+.session-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+/* Notifications */
+.notifications-list {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.notification-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 12px;
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.notification-item:hover {
+    background: rgba(102, 126, 234, 0.1);
+}
+
+.notification-item.unread {
+    background: rgba(102, 126, 234, 0.05);
+    border-left: 4px solid #667eea;
+}
+
+.notification-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1rem;
+    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+}
+
+.notification-content {
+    flex: 1;
+}
+
+.notification-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.notification-message {
+    color: #666;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+}
+
+.notification-time {
+    font-size: 0.8rem;
+    color: #999;
+}
+
+/* Modals */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+}
+
+.modal-content {
+    background: white;
+    margin: 2% auto;
+    padding: 2rem;
+    border-radius: 20px;
+    width: 90%;
+    max-width: 800px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+}
+
+.modal-content.large {
+    max-width: 1200px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+.close {
+    font-size: 2rem;
+    cursor: pointer;
+    color: #666;
+    transition: color 0.3s ease;
+}
+
+.close:hover {
+    color: #333;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: #333;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    font-size: 1rem;
+    transition: border-color 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    margin-top: 2rem;
+}
+
+/* Filter Select */
+.filter-select {
+    padding: 0.5rem 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    background: white;
+    font-size: 0.9rem;
+}
+
+/* Emergency Contacts */
+.emergency-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.contact-group h3 {
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.contact-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 12px;
+    margin-bottom: 0.5rem;
+}
+
+.contact-item strong {
+    color: #333;
+}
+
+.contact-item span {
+    color: #667eea;
+    font-weight: 600;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .professional-container {
+        padding: 1rem;
+    }
+    
+    .professional-header {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .sessions-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .quick-actions-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .modal-content {
+        width: 95%;
+        margin: 5% auto;
+    }
+}
+
+/* Loading States */
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    color: #666;
+}
+
+/* Empty States */
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: #666;
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+.empty-state h3 {
+    margin-bottom: 0.5rem;
+}
+
+.empty-state p {
+    font-size: 0.9rem;
+}
+
+/* Booked Users Section */
+.booked-users-section {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 2rem;
+    border-radius: 20px;
+    margin-bottom: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.users-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.user-card {
+    background: white;
+    border-radius: 15px;
+    padding: 1.5rem;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #e0e0e0;
+    transition: all 0.3s ease;
+}
+
+.user-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.user-card.high-risk {
+    border-left-color: #e74c3c;
+    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
+}
+
+.user-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+.user-info h4 {
+    margin: 0;
+    color: #333;
+    font-size: 1.1rem;
+}
+
+.user-info p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.user-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.user-status.status-low {
+    background: #d4edda;
+    color: #155724;
+}
+
+.user-status.status-medium {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.user-status.status-high {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.user-status.status-critical {
+    background: #f5c6cb;
+    color: #721c24;
+}
+
+.user-details {
+    margin-bottom: 1rem;
+}
+
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-row:last-child {
+    border-bottom: none;
+}
+
+.detail-label {
+    font-weight: 600;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.detail-value {
+    color: #333;
+    font-size: 0.9rem;
+}
+
+.user-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+/* User Profile Modal */
+.user-profile-content {
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.user-profile-details {
+    padding: 1rem;
+}
+
+.profile-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #f0f0f0;
+}
+
+.profile-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+.profile-info h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.5rem;
+}
+
+.profile-info p {
+    margin: 0.25rem 0;
+    color: #666;
+    font-size: 1rem;
+}
+
+.risk-badge {
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-size: 0.9rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-top: 0.5rem;
+    display: inline-block;
+}
+
+.risk-badge.risk-low {
+    background: #d4edda;
+    color: #155724;
+}
+
+.risk-badge.risk-medium {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.risk-badge.risk-high {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.risk-badge.risk-critical {
+    background: #f5c6cb;
+    color: #721c24;
+}
+
+.profile-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.profile-section {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 10px;
+    border-left: 4px solid #667eea;
+}
+
+.profile-section h4 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 0.5rem;
+}
+
+.profile-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+}
+
+.detail-item strong {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.sessions-list, .risk-history, .conversations-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.session-item, .risk-item, .conversation-item {
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
+    border-left: 3px solid #e0e0e0;
+}
+
+.session-info, .risk-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.session-details, .risk-date, .conv-date {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.conv-preview {
+    font-size: 0.9rem;
+    color: #333;
+    margin-bottom: 0.25rem;
+}
+
+.session-status {
+    padding: 0.25rem 0.5rem;
+    border-radius: 15px;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.session-status.status-pending {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.session-status.status-confirmed {
+    background: #d4edda;
+    color: #155724;
+}
+
+.session-status.status-declined {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.risk-level {
+    padding: 0.25rem 0.5rem;
+    border-radius: 15px;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.risk-level.risk-low {
+    background: #d4edda;
+    color: #155724;
+}
+
+.risk-level.risk-medium {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.risk-level.risk-high {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.risk-level.risk-critical {
+    background: #f5c6cb;
+    color: #721c24;
+}
+
+.risk-score {
+    font-weight: bold;
+    color: #333;
+}
+
+/* Responsive Design for User Components */
+@media (max-width: 768px) {
+    .users-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .profile-sections {
+        grid-template-columns: 1fr;
+    }
+    
+    .profile-header {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .user-actions {
+        justify-content: center;
+    }
+}
+
+/* Enhanced Session Details Modal */
+.session-details-modal {
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+/* Session Header Section */
+.session-header-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border-radius: 15px;
+    margin-bottom: 2rem;
+}
+
+.session-header-info {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.session-user-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: bold;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+}
+
+.session-user-details h2 {
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
+.user-account {
+    margin: 0.25rem 0;
+    opacity: 0.9;
+    font-size: 1rem;
+}
+
+.session-meta {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.session-status-badge {
+    padding: 0.75rem 1.5rem;
+    border-radius: 25px;
+    font-weight: bold;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    background: rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Session Information Grid */
+.session-info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.info-card {
+    background: white;
+    border-radius: 15px;
+    padding: 1.5rem;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #667eea;
+    transition: all 0.3s ease;
+}
+
+.info-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.info-card h3 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.2rem;
+    border-bottom: 2px solid #f0f0f0;
+    padding-bottom: 0.5rem;
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.info-item:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    color: #666;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.info-value {
+    color: #333;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.info-value.highlight {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+}
+
+.info-value.missing-data {
+    color: #999;
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.risk-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: inline-block;
+}
+
+.risk-badge.risk-low {
+    background: linear-gradient(135deg, #d4edda, #c3e6cb);
+    color: #155724;
+    box-shadow: 0 2px 8px rgba(21, 87, 36, 0.2);
+}
+
+.risk-badge.risk-medium {
+    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
+    color: #856404;
+    box-shadow: 0 2px 8px rgba(133, 100, 4, 0.2);
+}
+
+.risk-badge.risk-high {
+    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
+    color: #721c24;
+    box-shadow: 0 2px 8px rgba(114, 28, 36, 0.2);
+}
+
+.risk-badge.risk-critical {
+    background: linear-gradient(135deg, #f5c6cb, #f1aeb5);
+    color: #721c24;
+    box-shadow: 0 2px 8px rgba(114, 28, 36, 0.3);
+    animation: pulse 2s infinite;
+}
+
+.risk-badge.risk-unknown {
+    background: linear-gradient(135deg, #e9ecef, #dee2e6);
+    color: #6c757d;
+    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+/* Risk Assessment Card */
+.risk-assessment {
+    border-left-color: #e74c3c;
+}
+
+.risk-level-display {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 10px;
+    background: #f8f9fa;
+}
+
+.risk-level-badge {
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-weight: bold;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+}
+
+.risk-level-badge.risk-low {
+    background: #d4edda;
+    color: #155724;
+}
+
+.risk-level-badge.risk-medium {
+    background: #fff3cd;
+    color: #856404;
+}
+
+.risk-level-badge.risk-high {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.risk-level-badge.risk-critical {
+    background: #f5c6cb;
+    color: #721c24;
+}
+
+.risk-score-display {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #333;
+}
+
+.risk-indicators-compact h4 {
+    margin: 0 0 0.5rem 0;
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.indicators-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.indicator-tag {
+    background: #e9ecef;
+    color: #495057;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.indicator-more {
+    background: #667eea;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+/* Contact Information Card */
+.contact-info-card {
+    border-left-color: #28a745;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.contact-item:last-child {
+    border-bottom: none;
+}
+
+.contact-icon {
+    font-size: 1.2rem;
+    width: 30px;
+    text-align: center;
+}
+
+.contact-details {
+    flex: 1;
+}
+
+.contact-label {
+    display: block;
+    color: #666;
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.contact-value {
+    color: #333;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+}
+
+.contact-value:hover {
+    color: #667eea;
+}
+
+/* Session Type Styling */
+.session-type-urgent {
+    background: #f8d7da;
+    color: #721c24;
+    padding: 0.25rem 0.5rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.session-type-routine {
+    background: #d4edda;
+    color: #155724;
+    padding: 0.25rem 0.5rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.session-type-followup {
+    background: #d1ecf1;
+    color: #0c5460;
+    padding: 0.25rem 0.5rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.user-comprehensive-info {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 2px solid #f0f0f0;
+}
+
+.user-info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+/* Timeline Components */
+.sessions-timeline, .risk-timeline, .conversations-timeline {
+    position: relative;
+    padding-left: 2rem;
+}
+
+.sessions-timeline::before, .risk-timeline::before, .conversations-timeline::before {
+    content: '';
+    position: absolute;
+    left: 1rem;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: #e0e0e0;
+}
+
+.timeline-item, .risk-timeline-item, .conversation-timeline-item {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.timeline-marker, .risk-marker, .conv-marker {
+    position: absolute;
+    left: -1.5rem;
+    top: 0.5rem;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #667eea;
+    border: 3px solid white;
+    box-shadow: 0 0 0 2px #e0e0e0;
+}
+
+.risk-marker.risk-low {
+    background: #28a745;
+}
+
+.risk-marker.risk-medium {
+    background: #ffc107;
+}
+
+.risk-marker.risk-high {
+    background: #fd7e14;
+}
+
+.risk-marker.risk-critical {
+    background: #dc3545;
+}
+
+.timeline-content, .risk-content, .conv-content {
+    background: white;
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border-left: 3px solid #667eea;
+}
+
+.timeline-item.current-session .timeline-content {
+    border-left-color: #28a745;
+    background: linear-gradient(135deg, #f8fff8, #ffffff);
+}
+
+.current-indicator {
+    background: #28a745;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-top: 0.5rem;
+    display: inline-block;
+}
+
+/* Conversation Summary Section */
+.conversation-summary-section {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 2px solid #f0f0f0;
+}
+
+.conversation-summary-section h3 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.3rem;
+}
+
+.summary-content {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 10px;
+    border-left: 4px solid #667eea;
+}
+
+.summary-content p {
+    margin: 0;
+    line-height: 1.6;
+    color: #555;
+}
+
+/* Additional Session Details */
+.additional-session-details {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 2px solid #f0f0f0;
+}
+
+.additional-session-details h3 {
+    margin: 0 0 1.5rem 0;
+    color: #333;
+    font-size: 1.3rem;
+}
+
+.details-grid {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.detail-section {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #667eea;
+}
+
+.detail-section h4 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+}
+
+/* Full Conversation Display */
+.conversation-full {
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    background: #f8f9fa;
+}
+
+.message-item {
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    border-radius: 8px;
+    position: relative;
+}
+
+.message-item.user-message {
+    background: #e3f2fd;
+    margin-left: 2rem;
+    border-left: 3px solid #2196f3;
+}
+
+.message-item.bot-message {
+    background: #f3e5f5;
+    margin-right: 2rem;
+    border-left: 3px solid #9c27b0;
+}
+
+.message-content {
+    margin-bottom: 0.25rem;
+    line-height: 1.4;
+}
+
+.message-time {
+    font-size: 0.8rem;
+    color: #666;
+    font-style: italic;
+}
+
+/* Notes and Treatment Content */
+.notes-content, .treatment-content {
+    background: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+    border-left: 3px solid #28a745;
+}
+
+.notes-content p, .treatment-content p {
+    margin: 0;
+    line-height: 1.6;
+    color: #555;
+}
+
+/* Enhanced User Actions */
+.user-actions-section {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 2px solid #f0f0f0;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.user-actions-section .btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.user-actions-section .btn-primary {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+}
+
+.user-actions-section .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.user-actions-section .btn-secondary {
+    background: #f8f9fa;
+    color: #666;
+    border: 1px solid #e0e0e0;
+}
+
+.user-actions-section .btn-secondary:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+}
+
+.user-actions-section .btn-success {
+    background: linear-gradient(135deg, #28a745, #20c997);
+    color: white;
+}
+
+.user-actions-section .btn-success:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
+}
+
+/* Responsive Design for Enhanced Modal */
+@media (max-width: 768px) {
+    .session-header-section {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+    
+    .session-info-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .user-info-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .info-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .contact-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .sessions-timeline, .risk-timeline, .conversations-timeline {
+        padding-left: 1.5rem;
+    }
+    
+    .timeline-marker, .risk-marker, .conv-marker {
+        left: -1.25rem;
+    }
+    
+    .message-item.user-message {
+        margin-left: 0;
+    }
+    
+    .message-item.bot-message {
+        margin-right: 0;
+    }
+    
+    .user-actions-section {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .user-actions-section .btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+.info-section {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 2rem;
+    border-radius: 16px;
+    border-left: 5px solid #667eea;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.info-section:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.info-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 80px;
+    height: 80px;
+    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    transform: translate(30px, -30px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.info-section:hover::before {
+    opacity: 1;
+}
+
+.info-section h4 {
+    margin: 0 0 1.5rem 0;
+    color: #333;
+    font-size: 1.2rem;
+    font-weight: 700;
+    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
+    padding-bottom: 0.75rem;
+    position: relative;
+    z-index: 2;
+}
+
+.info-section h4::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 30px;
+    height: 2px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 1px;
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+    position: relative;
+    z-index: 2;
+}
+
+.info-item:last-child {
+    border-bottom: none;
+}
+
+.info-item:hover {
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 8px;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.info-item strong {
+    color: #555;
+    font-size: 0.95rem;
+    font-weight: 600;
+    min-width: 140px;
+}
+
+.recent-sessions-section,
+.risk-history-section,
+.conversation-history-section {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e0e0e0;
+}
+
+.recent-sessions-section h4,
+.risk-history-section h4,
+.conversation-history-section h4 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 0.5rem;
+}
+
+.session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.session-header strong {
+    color: #333;
+    font-size: 0.9rem;
+}
+
+.session-details {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.session-details span {
+    background: #f0f0f0;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+}
+
+/* Responsive Design for Session Details */
+@media (max-width: 768px) {
+    .user-info-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .info-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+    
+    .info-item strong {
+        min-width: auto;
+    }
+    
+    .session-details {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+}
+
+.user-actions-section {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.user-actions-section .btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.user-actions-section .btn-primary {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+}
+
+.user-actions-section .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.user-actions-section .btn-secondary {
+    background: #f8f9fa;
+    color: #666;
+    border: 1px solid #e0e0e0;
+}
+
+.user-actions-section .btn-secondary:hover {
+    background: #e9ecef;
+    transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+    .user-actions-section {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .user-actions-section .btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* AdminLTE 4 Additional Enhancements for Professional Dashboard */
+/* Toast Notifications */
+.toast {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 16px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
+    color: #333 !important;
+}
+
+.toast-header {
+    background: rgba(102, 126, 234, 0.1) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 16px 16px 0 0 !important;
+}
+
+/* DataTables Integration */
+.dataTables_wrapper {
+    color: #333 !important;
+}
+
+.dataTables_wrapper .dataTables_length,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_processing,
+.dataTables_wrapper .dataTables_paginate {
+    color: #333 !important;
+}
+
+.dataTables_wrapper .dataTables_filter input {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 12px !important;
+}
+
+.dataTables_wrapper .dataTables_length select {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 12px !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 8px !important;
+    margin: 0 2px !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+    color: #667eea !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.current {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+}
+
+/* Select2 Integration */
+.select2-container--default .select2-selection--single {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    color: #333 !important;
+    border-radius: 12px !important;
+    height: 48px !important;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #333 !important;
+    line-height: 48px !important;
+    padding-left: 16px !important;
+}
+
+.select2-container--default .select2-dropdown {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
+}
+
+.select2-container--default .select2-results__option {
+    color: #333 !important;
+    padding: 12px 16px !important;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+}
+
+/* Chart.js Integration */
+.chart-container {
+    background: rgba(255, 255, 255, 0.98) !important;
+    border: none !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* SweetAlert2 Integration */
+.swal2-popup {
+    background: rgba(255, 255, 255, 0.98) !important;
+    color: #333 !important;
+    border-radius: 20px !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
+}
+
+.swal2-title {
+    color: #333 !important;
+    font-weight: 700 !important;
+}
+
+.swal2-content {
+    color: #666 !important;
+}
+
+.swal2-confirm {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+}
+
+.swal2-cancel {
+    background: rgba(255, 255, 255, 0.9) !important;
+    color: #333 !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+}
+
+/* Loading States */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+    position: relative;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid rgba(102, 126, 234, 0.3);
+    border-top: 2px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.spinner-border {
+    color: #667eea !important;
+}
+
+/* Enhanced Animations */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(20px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+
+.slide-in {
+    animation: slideIn 0.4s ease-out;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+.bounce-in {
+    animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+    0% { 
+        opacity: 0; 
+        transform: scale(0.3); 
+    }
+    50% { 
+        opacity: 1; 
+        transform: scale(1.05); 
+    }
+    70% { 
+        transform: scale(0.9); 
+    }
+    100% { 
+        opacity: 1; 
+        transform: scale(1); 
+    }
+}
+
+/* Mobile Menu Toggle */
+.mobile-menu-toggle {
+    display: none;
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1000;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px;
+    border-radius: 12px;
+    cursor: pointer;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    transition: all 0.3s ease;
+}
+
+.mobile-menu-toggle:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Responsive Enhancements */
+@media (max-width: 768px) {
+    .mobile-menu-toggle {
+        display: block;
+    }
+    
+    .professional-container {
+        padding: 1rem;
+    }
+    
+    .professional-header {
+        flex-direction: column;
+        text-align: center;
+        gap: 1rem;
+    }
+    
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+    
+    .quick-actions-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+    
+    .users-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .sessions-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .modal-content {
+        margin: 5% auto;
+        width: 95%;
+    }
+    
+    .modal-content.large {
+        margin: 2% auto;
+        width: 98%;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .mobile-menu-toggle,
+    .btn,
+    .modal {
+        display: none !important;
+    }
+    
+    .professional-container {
+        padding: 0 !important;
+        max-width: 100% !important;
+    }
+    
+    .card {
+        border: 1px solid #000 !important;
+        box-shadow: none !important;
+        break-inside: avoid;
+    }
+    
+    .stats-grid,
+    .quick-actions-grid,
+    .users-grid,
+    .sessions-grid {
+        display: block !important;
+    }
+    
+    .stat-card,
+    .action-btn,
+    .user-card,
+    .session-card {
+        margin-bottom: 1rem !important;
+        page-break-inside: avoid;
+    }
+}

chatbot/professional.js

@@ -0,0 +1,1439 @@
+(() => {
+    'use strict';
+
+    // Get API URL from configuration
+    const getAPIBaseUrl = () => {
+        if (window.AIMHSA && window.AIMHSA.Config) {
+            return window.AIMHSA.Config.getApiBaseUrl();
+        }
+        
+        // Fallback to auto-detection
+        const loc = window.location;
+        if (loc.port === '8000') {
+            return `${loc.protocol}//${loc.hostname}:5057`;
+        } else if (loc.port === '5057' || loc.port === '') {
+            return loc.origin;
+        } else {
+            return 'http://localhost:5057';
+        }
+    };
+    
+    const API_BASE_URL = getAPIBaseUrl();
+    
+    // Elements
+    const professionalName = document.getElementById('professionalName');
+    const notificationsList = document.getElementById('notificationsList');
+    const upcomingSessions = document.getElementById('upcomingSessions');
+    const sessionHistory = document.getElementById('sessionHistory');
+    const markAllReadBtn = document.getElementById('markAllReadBtn');
+    const refreshSessionsBtn = document.getElementById('refreshSessionsBtn');
+    const refreshNotificationsBtn = document.getElementById('refreshNotificationsBtn');
+    const logoutBtn = document.getElementById('logoutBtn');
+    const sessionModal = document.getElementById('sessionModal');
+    const notesModal = document.getElementById('notesModal');
+    const reportsModal = document.getElementById('reportsModal');
+    const emergencyModal = document.getElementById('emergencyModal');
+    const notesForm = document.getElementById('notesForm');
+    const followUpRequired = document.getElementById('followUpRequired');
+    const followUpDateGroup = document.getElementById('followUpDateGroup');
+    
+    // New elements
+    const totalSessions = document.getElementById('totalSessions');
+    const unreadNotifications = document.getElementById('unreadNotifications');
+    const upcomingToday = document.getElementById('upcomingToday');
+    const highRiskSessions = document.getElementById('highRiskSessions');
+    const sessionFilter = document.getElementById('sessionFilter');
+    const historyFilter = document.getElementById('historyFilter');
+    const viewAllSessionsBtn = document.getElementById('viewAllSessionsBtn');
+    const viewBookedUsersBtn = document.getElementById('viewBookedUsersBtn');
+    const addSessionNotesBtn = document.getElementById('addSessionNotesBtn');
+    const viewReportsBtn = document.getElementById('viewReportsBtn');
+    const emergencyContactsBtn = document.getElementById('emergencyContactsBtn');
+    const generateReportBtn = document.getElementById('generateReportBtn');
+    const reportContent = document.getElementById('reportContent');
+    const openIntakeBtn = document.getElementById('openIntakeBtn');
+    const intakeModal = document.getElementById('intakeModal');
+    const intakeForm = document.getElementById('intakeForm');
+    
+    // Booked users elements
+    const bookedUsersList = document.getElementById('bookedUsersList');
+    const userFilter = document.getElementById('userFilter');
+    const refreshUsersBtn = document.getElementById('refreshUsersBtn');
+    const userProfileModal = document.getElementById('userProfileModal');
+    const userProfileContent = document.getElementById('userProfileContent');
+    
+    // State
+    let currentProfessional = null;
+    let notifications = [];
+    let sessions = [];
+    let bookedUsers = [];
+    let currentSessionId = null;
+    
+    // Initialize
+    init();
+    
+    async function init() {
+        // Check if professional is logged in
+        const professionalData = localStorage.getItem('aimhsa_professional');
+        if (!professionalData) {
+            // Check if they're logged in as a different type of user
+            const userData = localStorage.getItem('aimhsa_account');
+            const adminData = localStorage.getItem('aimhsa_admin');
+            
+            if (userData && userData !== 'null') {
+                alert('You are logged in as a regular user. Please logout and login as a professional.');
+                window.location.href = '/';
+                return;
+            }
+            
+            if (adminData) {
+                alert('You are logged in as an admin. Please logout and login as a professional.');
+                window.location.href = '/admin_dashboard.html';
+                return;
+            }
+            
+            window.location.href = '/login';
+            return;
+        }
+        
+        currentProfessional = JSON.parse(professionalData);
+        professionalName.textContent = currentProfessional.name;
+        
+        // Load initial data
+        await loadDashboardData();
+        await loadNotifications();
+        await loadSessions();
+        await loadBookedUsers();
+        
+        // Set up auto-refresh
+        setInterval(loadDashboardData, 30000); // Every 30 seconds
+        setInterval(loadNotifications, 30000); // Every 30 seconds
+        setInterval(loadSessions, 60000); // Every minute
+        
+        // Set up event listeners
+        setupEventListeners();
+    }
+    
+    // API Helper
+    async function api(path, opts = {}) {
+        const url = API_BASE_URL + path;
+        const headers = {
+            'Content-Type': 'application/json',
+            ...opts.headers
+        };
+        // Include professional id header if available
+        if (currentProfessional?.professional_id) {
+            headers['X-Professional-ID'] = String(currentProfessional.professional_id);
+        }
+        const res = await fetch(url, {
+            headers,
+            ...opts
+        });
+        
+        if (!res.ok) {
+            const txt = await res.text();
+            throw new Error(txt || res.statusText);
+        }
+        
+        return await res.json();
+    }
+    
+    function setupEventListeners() {
+        // Logout
+        logoutBtn.addEventListener('click', logout);
+        
+        // Notifications
+        markAllReadBtn.addEventListener('click', markAllNotificationsRead);
+        refreshNotificationsBtn.addEventListener('click', loadNotifications);
+        
+        // Sessions
+        refreshSessionsBtn.addEventListener('click', loadSessions);
+        sessionFilter.addEventListener('change', filterSessions);
+        historyFilter.addEventListener('change', filterSessionHistory);
+        
+        // Quick actions
+        viewAllSessionsBtn.addEventListener('click', () => {
+            sessionFilter.value = 'all';
+            loadSessions();
+        });
+        
+        viewBookedUsersBtn.addEventListener('click', () => {
+            userFilter.value = 'all';
+            loadBookedUsers();
+        });
+        
+        addSessionNotesBtn.addEventListener('click', openNotesModal);
+        viewReportsBtn.addEventListener('click', openReportsModal);
+        emergencyContactsBtn.addEventListener('click', openEmergencyModal);
+        openIntakeBtn.addEventListener('click', openIntakeModal);
+        
+        // Booked users
+        refreshUsersBtn.addEventListener('click', loadBookedUsers);
+        userFilter.addEventListener('change', filterBookedUsers);
+        
+        // Modals
+        document.querySelectorAll('.close').forEach(closeBtn => {
+            closeBtn.addEventListener('click', closeModals);
+        });
+        
+        // Notes form
+        notesForm.addEventListener('submit', saveSessionNotes);
+        followUpRequired.addEventListener('change', toggleFollowUpDate);
+        intakeForm.addEventListener('submit', submitIntakeForm);
+        
+        // Report generation
+        generateReportBtn.addEventListener('click', generateReport);
+        
+        // Close modals when clicking outside
+        window.addEventListener('click', (e) => {
+            if (e.target.classList.contains('modal')) {
+                closeModals();
+            }
+        });
+    }
+    
+    async function loadDashboardData() {
+        try {
+            // Load dashboard stats
+            const stats = await api('/professional/dashboard-stats');
+            updateDashboardStats(stats);
+        } catch (error) {
+            console.error('Error loading dashboard data:', error);
+        }
+    }
+    
+    async function loadNotifications() {
+        try {
+            const data = await api('/professional/notifications');
+            notifications = data;
+            displayNotifications(notifications);
+        } catch (error) {
+            console.error('Error loading notifications:', error);
+            notificationsList.innerHTML = '<p>Error loading notifications</p>';
+        }
+    }
+    
+    async function loadSessions() {
+        try {
+            const data = await api('/professional/sessions');
+            sessions = data;
+            displaySessions(sessions);
+        } catch (error) {
+            console.error('Error loading sessions:', error);
+            upcomingSessions.innerHTML = '<p>Error loading sessions</p>';
+        }
+    }
+    
+    async function loadBookedUsers() {
+        try {
+            const data = await api('/professional/booked-users');
+            bookedUsers = data.users || [];
+            displayBookedUsers(bookedUsers);
+        } catch (error) {
+            console.error('Error loading booked users:', error);
+            bookedUsersList.innerHTML = '<p>Error loading booked users</p>';
+        }
+    }
+    
+    function updateDashboardStats(stats) {
+        totalSessions.textContent = stats.totalSessions || 0;
+        unreadNotifications.textContent = stats.unreadNotifications || 0;
+        upcomingToday.textContent = stats.upcomingToday || 0;
+        highRiskSessions.textContent = stats.highRiskCases || 0;
+    }
+    
+    function displayNotifications(notificationsData) {
+        if (!notificationsData || notificationsData.length === 0) {
+            notificationsList.innerHTML = '<p>No notifications</p>';
+            return;
+        }
+        
+        notificationsList.innerHTML = notificationsData.map(notification => `
+            <div class="notification-item ${notification.isRead ? '' : 'unread'}" onclick="markNotificationRead('${notification.id}')">
+                <div class="notification-icon">
+                    <i class="fas ${getNotificationIcon(notification.type)}"></i>
+                </div>
+                <div class="notification-content">
+                    <div class="notification-title">${notification.title}</div>
+                    <div class="notification-message">${notification.message}</div>
+                    <div class="notification-time">${formatDateTime(notification.createdAt)}</div>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    function displaySessions(sessionsData) {
+        if (!sessionsData || sessionsData.length === 0) {
+            upcomingSessions.innerHTML = '<p>No sessions found</p>';
+            return;
+        }
+        
+        upcomingSessions.innerHTML = sessionsData.map(session => `
+            <div class="session-card ${session.riskLevel === 'high' ? 'high-risk' : ''}">
+                <div class="session-header">
+                    <div class="session-user">
+                        <div class="user-avatar">${session.userName ? session.userName.charAt(0).toUpperCase() : 'U'}</div>
+                        <div class="user-info">
+                            <h4>${session.userName || 'Anonymous User'}</h4>
+                            <p>${session.userAccount || 'Guest'}</p>
+                        </div>
+                    </div>
+                    <div class="session-status status-${session.bookingStatus}">
+                        ${session.bookingStatus}
+                    </div>
+                </div>
+                
+                <div class="session-details">
+                    <div class="detail-row">
+                        <span class="detail-label">Session Type:</span>
+                        <span class="detail-value">${session.sessionType}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Scheduled:</span>
+                        <span class="detail-value">${formatDateTime(session.scheduledDatetime)}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Risk Level:</span>
+                        <span class="detail-value">${session.riskLevel}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Risk Score:</span>
+                        <span class="detail-value">${session.riskScore}/100</span>
+                    </div>
+                    ${session.userPhone ? `
+                    <div class="detail-row contact-info">
+                        <span class="detail-label">📞 Contact:</span>
+                        <span class="detail-value">
+                            <a href="tel:${session.userPhone}" class="contact-link">${session.userPhone}</a>
+                        </span>
+                    </div>
+                    ` : ''}
+                    ${session.userEmail ? `
+                    <div class="detail-row contact-info">
+                        <span class="detail-label">📧 Email:</span>
+                        <span class="detail-value">
+                            <a href="mailto:${session.userEmail}" class="contact-link">${session.userEmail}</a>
+                        </span>
+                    </div>
+                    ` : ''}
+                    ${session.userLocation ? `
+                    <div class="detail-row contact-info">
+                        <span class="detail-label">📍 Location:</span>
+                        <span class="detail-value">${session.userLocation}</span>
+                    </div>
+                    ` : ''}
+                </div>
+                
+                <div class="session-actions">
+                    <button class="btn btn-primary btn-small" onclick="viewSessionDetails('${session.bookingId}')">
+                        <i class="fas fa-eye"></i> View Details
+                    </button>
+                    ${session.bookingStatus === 'pending' ? `
+                        <button class="btn btn-primary btn-small" onclick="acceptSession('${session.bookingId}')">
+                            <i class="fas fa-check"></i> Accept
+                        </button>
+                        <button class="btn btn-secondary btn-small" onclick="declineSession('${session.bookingId}')">
+                            <i class="fas fa-times"></i> Decline
+                        </button>
+                    ` : ''}
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    function filterSessions() {
+        const filter = sessionFilter.value;
+        let filteredSessions = sessions;
+        
+        switch(filter) {
+            case 'today':
+                filteredSessions = sessions.filter(session => isToday(new Date(session.scheduledDatetime * 1000)));
+                break;
+            case 'this_week':
+                filteredSessions = sessions.filter(session => isThisWeek(new Date(session.scheduledDatetime * 1000)));
+                break;
+            case 'high_risk':
+                filteredSessions = sessions.filter(session => session.riskLevel === 'high' || session.riskLevel === 'critical');
+                break;
+        }
+        
+        displaySessions(filteredSessions);
+    }
+    
+    function filterSessionHistory() {
+        const filter = historyFilter.value;
+        // Implementation for filtering session history
+        console.log('Filtering session history by:', filter);
+    }
+    
+    function displayBookedUsers(usersData) {
+        if (!usersData || usersData.length === 0) {
+            bookedUsersList.innerHTML = '<p>No booked users found</p>';
+            return;
+        }
+        
+        bookedUsersList.innerHTML = usersData.map(user => `
+            <div class="user-card ${user.highestRiskLevel === 'high' || user.highestRiskLevel === 'critical' ? 'high-risk' : ''}">
+                <div class="user-header">
+                    <div class="user-avatar">${user.fullName.charAt(0).toUpperCase()}</div>
+                    <div class="user-info">
+                        <h4>${user.fullName}</h4>
+                        <p>@${user.userAccount}</p>
+                        <span class="user-status status-${user.highestRiskLevel}">${user.highestRiskLevel.toUpperCase()}</span>
+                    </div>
+                </div>
+                
+                <div class="user-details">
+                    <div class="detail-row">
+                        <span class="detail-label">Email:</span>
+                        <span class="detail-value">${user.email}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Phone:</span>
+                        <span class="detail-value">${user.telephone}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Location:</span>
+                        <span class="detail-value">${user.district}, ${user.province}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Total Bookings:</span>
+                        <span class="detail-value">${user.totalBookings}</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Highest Risk Score:</span>
+                        <span class="detail-value">${user.highestRiskScore}/100</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">Last Booking:</span>
+                        <span class="detail-value">${formatDateTime(user.lastBookingTime)}</span>
+                    </div>
+                </div>
+                
+                <div class="user-actions">
+                    <button class="btn btn-primary btn-small" onclick="viewUserProfile('${user.userAccount}')">
+                        <i class="fas fa-user"></i> View Profile
+                    </button>
+                    <button class="btn btn-secondary btn-small" onclick="viewUserSessions('${user.userAccount}')">
+                        <i class="fas fa-calendar"></i> Sessions
+                    </button>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    function filterBookedUsers() {
+        const filter = userFilter.value;
+        let filteredUsers = bookedUsers;
+        
+        switch(filter) {
+            case 'high_risk':
+                filteredUsers = bookedUsers.filter(user => 
+                    user.highestRiskLevel === 'high' || user.highestRiskLevel === 'critical'
+                );
+                break;
+            case 'recent':
+                const oneWeekAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
+                filteredUsers = bookedUsers.filter(user => 
+                    user.lastBookingTime * 1000 > oneWeekAgo
+                );
+                break;
+            case 'multiple_sessions':
+                filteredUsers = bookedUsers.filter(user => user.totalBookings > 1);
+                break;
+        }
+        
+        displayBookedUsers(filteredUsers);
+    }
+    
+    async function markAllNotificationsRead() {
+        try {
+            await api('/professional/notifications/mark-all-read', { method: 'POST' });
+            await loadNotifications();
+            await loadDashboardData();
+        } catch (error) {
+            console.error('Error marking notifications as read:', error);
+        }
+    }
+    
+    async function markNotificationRead(notificationId) {
+        try {
+            await api(`/professional/notifications/${notificationId}/read`, { method: 'POST' });
+            await loadNotifications();
+            await loadDashboardData();
+        } catch (error) {
+            console.error('Error marking notification as read:', error);
+        }
+    }
+    
+    async function acceptSession(bookingId) {
+        try {
+            await api(`/professional/sessions/${bookingId}/accept`, { method: 'POST' });
+            await loadSessions();
+            await loadDashboardData();
+            alert('Session accepted successfully');
+        } catch (error) {
+            console.error('Error accepting session:', error);
+            alert('Failed to accept session');
+        }
+    }
+
+    async function declineSession(bookingId) {
+        try {
+            await api(`/professional/sessions/${bookingId}/decline`, { method: 'POST' });
+            await loadSessions();
+            await loadDashboardData();
+            alert('Session declined');
+        } catch (error) {
+            console.error('Error declining session:', error);
+            alert('Failed to decline session');
+        }
+    }
+    
+    async function viewSessionDetails(bookingId) {
+        try {
+            currentSessionId = bookingId;
+            const sessionDetails = await api(`/professional/sessions/${bookingId}`);
+            
+            // Convert the detailed session data to the format expected by displaySessionDetailsModal
+            const session = {
+                bookingId: sessionDetails.bookingId,
+                convId: sessionDetails.convId,
+                userAccount: sessionDetails.userAccount,
+                userName: sessionDetails.userName,
+                userIp: sessionDetails.userIp,
+                riskLevel: sessionDetails.riskLevel,
+                riskScore: sessionDetails.riskScore,
+                detectedIndicators: sessionDetails.detectedIndicators,
+                conversationSummary: sessionDetails.conversationSummary,
+                bookingStatus: sessionDetails.bookingStatus,
+                scheduledDatetime: sessionDetails.scheduledDatetime,
+                sessionType: sessionDetails.sessionType,
+                createdTs: sessionDetails.createdTs,
+                updatedTs: sessionDetails.updatedTs,
+                userPhone: sessionDetails.userPhone,
+                userEmail: sessionDetails.userEmail,
+                userLocation: sessionDetails.userLocation
+            };
+            
+            displaySessionDetailsModal(session, sessionDetails);
+        } catch (error) {
+            console.error('Error loading session details:', error);
+            alert('Failed to load session details');
+        }
+    }
+    
+    async function displaySessionDetailsModal(session, sessionDetails = null) {
+        const modal = document.getElementById('sessionModal');
+        const content = document.getElementById('sessionDetails');
+        
+        let userInfo = null;
+        
+        // If sessionDetails is provided, extract user information from it
+        if (sessionDetails) {
+            userInfo = {
+                userAccount: sessionDetails.userAccount,
+                fullName: sessionDetails.userFullName,
+                email: sessionDetails.userEmail,
+                telephone: sessionDetails.userPhone,
+                province: sessionDetails.userProvince,
+                district: sessionDetails.userDistrict,
+                userCreatedAt: sessionDetails.userCreatedAt,
+                totalBookings: sessionDetails.sessions ? sessionDetails.sessions.length : 0,
+                highestRiskLevel: sessionDetails.riskAssessments && sessionDetails.riskAssessments.length > 0 
+                    ? sessionDetails.riskAssessments[0].riskLevel : 'unknown',
+                highestRiskScore: sessionDetails.riskAssessments && sessionDetails.riskAssessments.length > 0 
+                    ? Math.max(...sessionDetails.riskAssessments.map(r => r.riskScore)) : 0,
+                firstBookingTime: sessionDetails.sessions && sessionDetails.sessions.length > 0 
+                    ? Math.min(...sessionDetails.sessions.map(s => s.createdTs)) : null,
+                lastBookingTime: sessionDetails.sessions && sessionDetails.sessions.length > 0 
+                    ? Math.max(...sessionDetails.sessions.map(s => s.createdTs)) : null,
+                sessions: sessionDetails.sessions || [],
+                riskAssessments: sessionDetails.riskAssessments || [],
+                conversations: sessionDetails.conversationHistory || []
+            };
+        } else {
+            // Fallback: try to get user info from booked users or API
+            try {
+                const user = bookedUsers.find(u => u.userAccount === session.userAccount);
+                if (user) {
+                    userInfo = user;
+                } else {
+                    // Try to get from individual user API
+                    userInfo = await api(`/professional/users/${session.userAccount}`);
+                }
+            } catch (fallbackError) {
+                console.error('Error loading user info:', fallbackError);
+            }
+        }
+        
+        content.innerHTML = `
+            <div class="session-details-modal">
+                <!-- Session Header -->
+                <div class="session-header-section">
+                    <div class="session-header-info">
+                        <div class="session-user-avatar">
+                            ${session.userName ? session.userName.charAt(0).toUpperCase() : 'U'}
+                        </div>
+                        <div class="session-user-details">
+                            <h2>${session.userName || 'Anonymous User'}</h2>
+                            <p class="user-account">@${session.userAccount || 'Guest'}</p>
+                            <div class="session-meta">
+                                <span class="session-id">Booking ID: ${session.bookingId}</span>
+                                <span class="session-date">${formatDateTime(session.scheduledDatetime)}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="session-status-badge status-${session.bookingStatus}">
+                        ${session.bookingStatus.toUpperCase()}
+                    </div>
+                </div>
+                
+                <!-- Session Information Grid -->
+                <div class="session-info-grid">
+                    <div class="info-card session-basic-info">
+                        <h3>📋 Session Details</h3>
+                        <div class="info-item">
+                            <span class="info-label">Session Type:</span>
+                            <span class="info-value session-type-${session.sessionType.toLowerCase()}">${session.sessionType}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">Scheduled Time:</span>
+                            <span class="info-value">${formatDateTime(session.scheduledDatetime)}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">Created:</span>
+                            <span class="info-value">${formatDateTime(session.createdTs)}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="info-label">Last Updated:</span>
+                            <span class="info-value">${formatDateTime(session.updatedTs)}</span>
+                        </div>
+                    </div>
+                    
+                    <div class="info-card risk-assessment">
+                        <h3>⚠️ Risk Assessment</h3>
+                        <div class="risk-level-display risk-${session.riskLevel}">
+                            <div class="risk-level-badge">${session.riskLevel.toUpperCase()}</div>
+                            <div class="risk-score-display">${session.riskScore}/100</div>
+                        </div>
+                        ${session.detectedIndicators ? `
+                            <div class="risk-indicators-compact">
+                                <h4>Detected Indicators:</h4>
+                                <div class="indicators-tags">
+                                    ${JSON.parse(session.detectedIndicators).slice(0, 5).map(indicator => `
+                                        <span class="indicator-tag">${indicator}</span>
+                                    `).join('')}
+                                    ${JSON.parse(session.detectedIndicators).length > 5 ? `
+                                        <span class="indicator-more">+${JSON.parse(session.detectedIndicators).length - 5} more</span>
+                                    ` : ''}
+                                </div>
+                            </div>
+                        ` : ''}
+                    </div>
+                    
+                    <div class="info-card contact-info-card">
+                        <h3>📞 Contact Information</h3>
+                        ${session.userPhone ? `
+                            <div class="contact-item">
+                                <span class="contact-icon">📞</span>
+                                <div class="contact-details">
+                                    <span class="contact-label">Phone</span>
+                                    <a href="tel:${session.userPhone}" class="contact-value">${session.userPhone}</a>
+                                </div>
+                            </div>
+                        ` : ''}
+                        ${session.userEmail ? `
+                            <div class="contact-item">
+                                <span class="contact-icon">📧</span>
+                                <div class="contact-details">
+                                    <span class="contact-label">Email</span>
+                                    <a href="mailto:${session.userEmail}" class="contact-value">${session.userEmail}</a>
+                                </div>
+                            </div>
+                        ` : ''}
+                        ${session.userLocation ? `
+                            <div class="contact-item">
+                                <span class="contact-icon">📍</span>
+                                <div class="contact-details">
+                                    <span class="contact-label">Location</span>
+                                    <span class="contact-value">${session.userLocation}</span>
+                                </div>
+                            </div>
+                        ` : ''}
+                    </div>
+                </div>
+                
+                <!-- User Comprehensive Information -->
+                ${userInfo ? `
+                    <div class="user-comprehensive-info">
+                        <h3>👤 Complete User Profile</h3>
+                        <div class="user-info-grid">
+                            <div class="info-section">
+                                <h4>📋 Personal Information</h4>
+                                <div class="info-item">
+                                    <strong>Full Name:</strong> 
+                                    <span class="info-value ${!userInfo.fullName ? 'missing-data' : ''}">${userInfo.fullName || 'Not provided'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Email Address:</strong> 
+                                    <span class="info-value ${!userInfo.email ? 'missing-data' : ''}">${userInfo.email || 'Not provided'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Phone Number:</strong> 
+                                    <span class="info-value ${!userInfo.telephone ? 'missing-data' : ''}">${userInfo.telephone || 'Not provided'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Location:</strong> 
+                                    <span class="info-value ${!userInfo.district && !userInfo.province ? 'missing-data' : ''}">${formatLocation(userInfo.district, userInfo.province)}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Account Created:</strong> 
+                                    <span class="info-value ${!userInfo.userCreatedAt ? 'missing-data' : ''}">${userInfo.userCreatedAt ? formatDateTime(userInfo.userCreatedAt) : 'Not available'}</span>
+                                </div>
+                            </div>
+                            
+                            <div class="info-section">
+                                <h4>📊 Session Statistics</h4>
+                                <div class="info-item">
+                                    <strong>Total Bookings:</strong> 
+                                    <span class="info-value highlight">${userInfo.totalBookings || 0}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Highest Risk Level:</strong> 
+                                    <span class="info-value risk-badge risk-${userInfo.highestRiskLevel || 'unknown'}">${userInfo.highestRiskLevel || 'Unknown'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Highest Risk Score:</strong> 
+                                    <span class="info-value highlight">${userInfo.highestRiskScore || 0}/100</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>First Booking:</strong> 
+                                    <span class="info-value ${!userInfo.firstBookingTime ? 'missing-data' : ''}">${userInfo.firstBookingTime ? formatDateTime(userInfo.firstBookingTime) : 'Not available'}</span>
+                                </div>
+                                <div class="info-item">
+                                    <strong>Last Booking:</strong> 
+                                    <span class="info-value ${!userInfo.lastBookingTime ? 'missing-data' : ''}">${userInfo.lastBookingTime ? formatDateTime(userInfo.lastBookingTime) : 'Not available'}</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        ${userInfo.sessions && userInfo.sessions.length > 0 ? `
+                            <div class="recent-sessions-section">
+                                <h4>📅 Recent Sessions (Last 5)</h4>
+                                <div class="sessions-timeline">
+                                    ${userInfo.sessions.slice(0, 5).map(s => `
+                                        <div class="timeline-item ${s.bookingId === session.bookingId ? 'current-session' : ''}">
+                                            <div class="timeline-marker"></div>
+                                            <div class="timeline-content">
+                                                <div class="session-header">
+                                                    <strong>${s.sessionType}</strong>
+                                                    <span class="session-status status-${s.bookingStatus}">${s.bookingStatus}</span>
+                                                </div>
+                                                <div class="session-details">
+                                                    <span class="risk-info">Risk: ${s.riskLevel} (${s.riskScore}/100)</span>
+                                                    <span class="date-info">${formatDateTime(s.scheduledDatetime)}</span>
+                                                </div>
+                                                ${s.bookingId === session.bookingId ? '<div class="current-indicator">Current Session</div>' : ''}
+                                            </div>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                        ` : ''}
+                        
+                        ${userInfo.riskAssessments && userInfo.riskAssessments.length > 0 ? `
+                            <div class="risk-history-section">
+                                <h4>📈 Risk Assessment History</h4>
+                                <div class="risk-timeline">
+                                    ${userInfo.riskAssessments.slice(0, 5).map(risk => `
+                                        <div class="risk-timeline-item">
+                                            <div class="risk-marker risk-${risk.riskLevel}"></div>
+                                            <div class="risk-content">
+                                                <div class="risk-info">
+                                                    <span class="risk-level risk-${risk.riskLevel}">${risk.riskLevel}</span>
+                                                    <span class="risk-score">${risk.riskScore}/100</span>
+                                                </div>
+                                                <div class="risk-date">${formatDateTime(risk.timestamp)}</div>
+                                            </div>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                        ` : ''}
+                        
+                        ${userInfo.conversations && userInfo.conversations.length > 0 ? `
+                            <div class="conversation-history-section">
+                                <h4>💬 Recent Conversations</h4>
+                                <div class="conversations-timeline">
+                                    ${userInfo.conversations.slice(0, 3).map(conv => `
+                                        <div class="conversation-timeline-item">
+                                            <div class="conv-marker"></div>
+                                            <div class="conv-content">
+                                                <div class="conv-preview">${conv.preview}</div>
+                                                <div class="conv-date">${formatDateTime(conv.timestamp)}</div>
+                                            </div>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                        ` : ''}
+                        
+                        <div class="user-actions-section">
+                            <button class="btn btn-primary" onclick="viewUserProfile('${session.userAccount}')">
+                                <i class="fas fa-user"></i> View Complete Profile
+                            </button>
+                            <button class="btn btn-secondary" onclick="viewUserSessions('${session.userAccount}')">
+                                <i class="fas fa-calendar"></i> View All Sessions
+                            </button>
+                            <button class="btn btn-success" onclick="openNotesModal()">
+                                <i class="fas fa-notes-medical"></i> Add Session Notes
+                            </button>
+                        </div>
+                    </div>
+                ` : ''}
+                
+                <!-- Conversation Summary -->
+                ${session.conversationSummary ? `
+                    <div class="conversation-summary-section">
+                        <h3>💭 Conversation Summary</h3>
+                        <div class="summary-content">
+                            <p>${session.conversationSummary}</p>
+                        </div>
+                    </div>
+                ` : ''}
+                
+                <!-- Additional Session Details -->
+                ${sessionDetails ? `
+                    <div class="additional-session-details">
+                        <h3>📋 Additional Session Information</h3>
+                        <div class="details-grid">
+                            ${sessionDetails.conversationHistory && sessionDetails.conversationHistory.length > 0 ? `
+                                <div class="detail-section">
+                                    <h4>💬 Full Conversation</h4>
+                                    <div class="conversation-full">
+                                        ${sessionDetails.conversationHistory.map(msg => `
+                                            <div class="message-item ${msg.sender === 'user' ? 'user-message' : 'bot-message'}">
+                                                <div class="message-content">${msg.content}</div>
+                                                <div class="message-time">${formatDateTime(msg.timestamp)}</div>
+                                            </div>
+                                        `).join('')}
+                                    </div>
+                                </div>
+                            ` : ''}
+                            
+                            ${sessionDetails.sessionNotes && sessionDetails.sessionNotes.notes ? `
+                                <div class="detail-section">
+                                    <h4>📝 Session Notes</h4>
+                                    <div class="notes-content">
+                                        <p>${sessionDetails.sessionNotes.notes}</p>
+                                    </div>
+                                </div>
+                            ` : ''}
+                            
+                            ${sessionDetails.sessionNotes && sessionDetails.sessionNotes.treatmentPlan ? `
+                                <div class="detail-section">
+                                    <h4>🎯 Treatment Plan</h4>
+                                    <div class="treatment-content">
+                                        <p>${sessionDetails.sessionNotes.treatmentPlan}</p>
+                                    </div>
+                                </div>
+                            ` : ''}
+                        </div>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+        
+        modal.style.display = 'block';
+    }
+    
+    function openNotesModal() {
+        notesModal.style.display = 'block';
+    }
+    
+    function openReportsModal() {
+        reportsModal.style.display = 'block';
+    }
+    
+    function openEmergencyModal() {
+        emergencyModal.style.display = 'block';
+    }
+    
+    async function viewUserProfile(userAccount) {
+        try {
+            // Try to get user from booked users first
+            let user = bookedUsers.find(u => u.userAccount === userAccount);
+            
+            if (!user) {
+                // If not found, get from API
+                user = await api(`/professional/users/${userAccount}`);
+            }
+            
+            if (!user) {
+                alert('User not found');
+                return;
+            }
+            
+            displayUserProfileModal(user);
+        } catch (error) {
+            console.error('Error loading user profile:', error);
+            alert('Failed to load user profile');
+        }
+    }
+    
+    function displayUserProfileModal(user) {
+        userProfileContent.innerHTML = `
+            <div class="user-profile-details">
+                <div class="profile-header">
+                    <div class="profile-avatar">${user.fullName.charAt(0).toUpperCase()}</div>
+                    <div class="profile-info">
+                        <h3>${user.fullName}</h3>
+                        <p>@${user.userAccount}</p>
+                        <span class="risk-badge risk-${user.highestRiskLevel}">${user.highestRiskLevel.toUpperCase()}</span>
+                    </div>
+                </div>
+                
+                <div class="profile-sections">
+                    <div class="profile-section">
+                        <h4>Contact Information</h4>
+                        <div class="profile-details">
+                            <div class="detail-item">
+                                <strong>Email:</strong> ${user.email}
+                            </div>
+                            <div class="detail-item">
+                                <strong>Phone:</strong> ${user.telephone}
+                            </div>
+                            <div class="detail-item">
+                                <strong>Location:</strong> ${user.district}, ${user.province}
+                            </div>
+                            <div class="detail-item">
+                                <strong>User Since:</strong> ${formatDateTime(user.userCreatedAt)}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="profile-section">
+                        <h4>Session Statistics</h4>
+                        <div class="profile-details">
+                            <div class="detail-item">
+                                <strong>Total Bookings:</strong> ${user.totalBookings}
+                            </div>
+                            <div class="detail-item">
+                                <strong>Highest Risk Level:</strong> ${user.highestRiskLevel}
+                            </div>
+                            <div class="detail-item">
+                                <strong>Highest Risk Score:</strong> ${user.highestRiskScore}/100
+                            </div>
+                            <div class="detail-item">
+                                <strong>First Booking:</strong> ${formatDateTime(user.firstBookingTime)}
+                            </div>
+                            <div class="detail-item">
+                                <strong>Last Booking:</strong> ${formatDateTime(user.lastBookingTime)}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="profile-section">
+                        <h4>Recent Sessions</h4>
+                        <div class="sessions-list">
+                            ${user.sessions.slice(0, 5).map(session => `
+                                <div class="session-item">
+                                    <div class="session-info">
+                                        <strong>${session.sessionType}</strong>
+                                        <span class="session-status status-${session.bookingStatus}">${session.bookingStatus}</span>
+                                    </div>
+                                    <div class="session-details">
+                                        <span>Risk: ${session.riskLevel} (${session.riskScore}/100)</span>
+                                        <span>Date: ${formatDateTime(session.scheduledDatetime)}</span>
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                    
+                    <div class="profile-section">
+                        <h4>Risk Assessment History</h4>
+                        <div class="risk-history">
+                            ${user.riskAssessments.slice(0, 5).map(risk => `
+                                <div class="risk-item">
+                                    <div class="risk-info">
+                                        <span class="risk-level risk-${risk.riskLevel}">${risk.riskLevel}</span>
+                                        <span class="risk-score">${risk.riskScore}/100</span>
+                                    </div>
+                                    <div class="risk-date">${formatDateTime(risk.timestamp)}</div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                    
+                    <div class="profile-section">
+                        <h4>Conversation History</h4>
+                        <div class="conversations-list">
+                            ${user.conversations.map(conv => `
+                                <div class="conversation-item">
+                                    <div class="conv-preview">${conv.preview}</div>
+                                    <div class="conv-date">${formatDateTime(conv.timestamp)}</div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        userProfileModal.style.display = 'block';
+    }
+    
+    function viewUserSessions(userAccount) {
+        // Filter sessions to show only this user's sessions
+        const userSessions = sessions.filter(session => session.userAccount === userAccount);
+        displaySessions(userSessions);
+        // Scroll to sessions section
+        document.querySelector('.sessions-section').scrollIntoView({ behavior: 'smooth' });
+    }
+    
+    function closeModals() {
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.style.display = 'none';
+        });
+    }
+
+    function openIntakeModal() {
+        // Prefill from selected session when available
+        const selected = sessions.find(s => s.bookingId === currentSessionId);
+        if (selected) {
+            document.getElementById('intakeUsername').value = selected.userAccount || '';
+            document.getElementById('intakeEmail').value = '';
+            document.getElementById('intakeFullName').value = selected.userName || '';
+            document.getElementById('intakePhone').value = '';
+            document.getElementById('intakeProvince').value = '';
+            document.getElementById('intakeDistrict').value = '';
+        } else {
+            intakeForm.reset();
+        }
+        intakeModal.style.display = 'block';
+    }
+
+    async function submitIntakeForm(e) {
+        e.preventDefault();
+        const payload = {
+            username: document.getElementById('intakeUsername').value.trim(),
+            email: document.getElementById('intakeEmail').value.trim(),
+            full_name: document.getElementById('intakeFullName').value.trim(),
+            phone: document.getElementById('intakePhone').value.trim(),
+            province: document.getElementById('intakeProvince').value.trim(),
+            district: document.getElementById('intakeDistrict').value.trim(),
+            password: document.getElementById('intakePassword').value,
+            confirm_password: document.getElementById('intakeConfirmPassword').value
+        };
+        try {
+            await api('/professional/users/intake', {
+                method: 'POST',
+                body: JSON.stringify(payload)
+            });
+            alert('User profile saved');
+            closeModals();
+        } catch (err) {
+            console.error('Intake save failed:', err);
+            alert('Failed to save user');
+        }
+    }
+    
+    function toggleFollowUpDate() {
+        followUpDateGroup.style.display = followUpRequired.checked ? 'block' : 'none';
+    }
+    
+    async function saveSessionNotes(e) {
+        e.preventDefault();
+        try {
+            if (!currentSessionId) {
+                alert('Open a session to add notes');
+                return;
+            }
+            const payload = {
+                notes: document.getElementById('sessionNotes').value,
+                treatmentPlan: document.getElementById('treatmentPlan').value,
+                followUpRequired: followUpRequired.checked,
+                followUpDate: document.getElementById('followUpDate').value || null,
+                professional_id: currentProfessional?.professional_id
+            };
+            await api(`/professional/sessions/${currentSessionId}/notes`, {
+                method: 'POST',
+                body: JSON.stringify(payload)
+            });
+            alert('Session notes saved successfully');
+            closeModals();
+        } catch (err) {
+            console.error('Error saving notes:', err);
+            alert('Failed to save notes');
+        }
+    }
+    
+    async function generateReport() {
+        try {
+            const report = await api('/professional/reports/generate', {
+                method: 'POST',
+                body: JSON.stringify({
+                    period: document.getElementById('reportPeriod').value,
+                    type: document.getElementById('reportType').value
+                })
+            });
+            
+            displayReport(report);
+        } catch (error) {
+            console.error('Error generating report:', error);
+            alert('Failed to generate report');
+        }
+    }
+    
+    function displayReport(report) {
+        reportContent.innerHTML = `
+            <div class="report-summary">
+                <h3>Report Summary</h3>
+                <div class="report-stats">
+                    <div class="stat-item">
+                        <span class="stat-label">Total Sessions:</span>
+                        <span class="stat-value">${report.totalSessions}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Unique Users:</span>
+                        <span class="stat-value">${report.uniqueUsers}</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">High Risk Cases:</span>
+                        <span class="stat-value">${report.highRiskCases}</span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    function logout() {
+        localStorage.removeItem('aimhsa_professional');
+        window.location.href = '/login';
+    }
+    
+    // Utility functions
+    function formatDateTime(timestamp) {
+        if (!timestamp) return 'N/A';
+        const date = new Date(timestamp * 1000);
+        return date.toLocaleString();
+    }
+    
+    function isToday(date) {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    }
+    
+    function isThisWeek(date) {
+        const today = new Date();
+        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        return date >= weekAgo && date <= today;
+    }
+    
+    function getNotificationIcon(type) {
+        const icons = {
+            'session': 'fa-calendar-check',
+            'risk': 'fa-exclamation-triangle',
+            'user': 'fa-user',
+            'system': 'fa-cog',
+            'emergency': 'fa-bell'
+        };
+        return icons[type] || 'fa-bell';
+    }
+    
+    // Helper functions
+    function formatLocation(district, province) {
+        if (!district && !province) return 'Not provided';
+        if (district && province) return `${district}, ${province}`;
+        if (district) return district;
+        if (province) return province;
+        return 'Not provided';
+    }
+    
+    function getRiskBadgeClass(riskLevel) {
+        const riskClasses = {
+            'low': 'risk-low',
+            'medium': 'risk-medium', 
+            'high': 'risk-high',
+            'critical': 'risk-critical',
+            'unknown': 'risk-unknown'
+        };
+        return riskClasses[riskLevel] || 'risk-unknown';
+    }
+    
+    function formatMissingData(value, fallback = 'Not provided') {
+        return value || fallback;
+    }
+    
+    // Global functions for onclick handlers
+    window.markNotificationRead = markNotificationRead;
+    window.acceptSession = acceptSession;
+    window.declineSession = declineSession;
+    window.viewSessionDetails = viewSessionDetails;
+    window.viewUserProfile = viewUserProfile;
+    window.viewUserSessions = viewUserSessions;
+    
+    // AdminLTE 4 Enhancements
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize AdminLTE components
+        if (typeof $ !== 'undefined' && $.fn.DataTable) {
+            // Initialize DataTables if available
+            initializeDataTables();
+        }
+        
+        // Initialize mobile menu toggle
+        initializeMobileMenu();
+        
+        // Initialize tooltips
+        initializeTooltips();
+        
+        // Initialize loading states
+        initializeLoadingStates();
+        
+        // Initialize animations
+        initializeAnimations();
+        
+        // Initialize enhanced notifications
+        initializeEnhancedNotifications();
+    });
+    
+    function initializeDataTables() {
+        // Enhanced table functionality with AdminLTE styling
+        const tables = document.querySelectorAll('table');
+        tables.forEach(table => {
+            if (typeof $ !== 'undefined' && $.fn.DataTable) {
+                $(table).DataTable({
+                    responsive: true,
+                    pageLength: 10,
+                    order: [[0, 'desc']], // Sort by first column descending
+                    columnDefs: [
+                        { targets: [-1], orderable: false } // Actions column
+                    ],
+                    language: {
+                        search: "Search:",
+                        lengthMenu: "Show _MENU_ entries per page",
+                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                        paginate: {
+                            first: "First",
+                            last: "Last",
+                            next: "Next",
+                            previous: "Previous"
+                        }
+                    }
+                });
+            }
+        });
+    }
+    
+    function initializeMobileMenu() {
+        const mobileToggle = document.getElementById('mobileMenuToggle');
+        const professionalHeader = document.querySelector('.professional-header');
+        
+        if (mobileToggle && professionalHeader) {
+            mobileToggle.addEventListener('click', function() {
+                professionalHeader.classList.toggle('mobile-open');
+            });
+            
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', function(e) {
+                if (!professionalHeader.contains(e.target) && !mobileToggle.contains(e.target)) {
+                    professionalHeader.classList.remove('mobile-open');
+                }
+            });
+        }
+    }
+    
+    function initializeTooltips() {
+        // Initialize Bootstrap tooltips if available
+        if (typeof $ !== 'undefined' && $.fn.tooltip) {
+            $('[data-toggle="tooltip"]').tooltip();
+        }
+    }
+    
+    function initializeLoadingStates() {
+        // Add loading states to buttons and forms
+        const forms = document.querySelectorAll('form');
+        forms.forEach(form => {
+            form.addEventListener('submit', function() {
+                const submitBtn = form.querySelector('button[type="submit"]');
+                if (submitBtn) {
+                    submitBtn.classList.add('loading');
+                    submitBtn.disabled = true;
+                    
+                    // Remove loading state after 3 seconds (adjust as needed)
+                    setTimeout(() => {
+                        submitBtn.classList.remove('loading');
+                        submitBtn.disabled = false;
+                    }, 3000);
+                }
+            });
+        });
+        
+        // Add loading states to refresh buttons
+        const refreshButtons = document.querySelectorAll('[id$="Btn"]');
+        refreshButtons.forEach(btn => {
+            if (btn.id.includes('refresh') || btn.id.includes('Refresh')) {
+                btn.addEventListener('click', function() {
+                    btn.classList.add('loading');
+                    btn.disabled = true;
+                    
+                    setTimeout(() => {
+                        btn.classList.remove('loading');
+                        btn.disabled = false;
+                    }, 2000);
+                });
+            }
+        });
+    }
+    
+    function initializeAnimations() {
+        // Add fade-in animation to cards
+        const cards = document.querySelectorAll('.stat-card, .action-btn, .user-card, .session-card, .notification-item');
+        cards.forEach((card, index) => {
+            card.classList.add('fade-in');
+            card.style.animationDelay = `${index * 0.1}s`;
+        });
+        
+        // Add bounce-in animation to modals
+        const modals = document.querySelectorAll('.modal');
+        modals.forEach(modal => {
+            modal.addEventListener('show.bs.modal', function() {
+                const modalContent = modal.querySelector('.modal-content');
+                if (modalContent) {
+                    modalContent.classList.add('bounce-in');
+                }
+            });
+        });
+    }
+    
+    function initializeEnhancedNotifications() {
+        // Enhanced notification system using AdminLTE toast
+        window.showProfessionalMessage = function(text, type = 'info') {
+            if (typeof $ !== 'undefined' && $.fn.toast) {
+                // Use AdminLTE toast if available
+                const toastHtml = `
+                    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                        <div class="toast-header">
+                            <i class="fas fa-${getToastIcon(type)} mr-2"></i>
+                            <strong class="mr-auto">AIMHSA Professional</strong>
+                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div class="toast-body">
+                            ${text}
+                        </div>
+                    </div>
+                `;
+                
+                // Create toast container if it doesn't exist
+                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);
+                }
+                
+                // Add toast to container
+                toastContainer.insertAdjacentHTML('beforeend', toastHtml);
+                
+                // Initialize and show toast
+                const toastElement = toastContainer.lastElementChild;
+                $(toastElement).toast({
+                    autohide: true,
+                    delay: 4000
+                });
+                $(toastElement).toast('show');
+                
+                // Remove toast after it's hidden
+                $(toastElement).on('hidden.bs.toast', function() {
+                    $(this).remove();
+                });
+            } else {
+                // Fallback to alert
+                alert(text);
+            }
+        };
+        
+        function getToastIcon(type) {
+            const icons = {
+                'success': 'check-circle',
+                'error': 'exclamation-triangle',
+                'warning': 'exclamation-circle',
+                'info': 'info-circle',
+                'loading': 'spinner'
+            };
+            return icons[type] || 'info-circle';
+        }
+    }
+    
+    // Enhanced refresh functionality
+    function refreshAllData() {
+        const refreshButtons = document.querySelectorAll('[id$="Btn"]');
+        refreshButtons.forEach(btn => {
+            if (btn.id.includes('refresh') || btn.id.includes('Refresh')) {
+                btn.classList.add('loading');
+                btn.disabled = true;
+            }
+        });
+        
+        // Refresh all data
+        Promise.all([
+            loadNotifications(),
+            loadUpcomingSessions(),
+            loadSessionHistory(),
+            loadBookedUsers(),
+            loadDashboardStats()
+        ]).finally(() => {
+            refreshButtons.forEach(btn => {
+                if (btn.id.includes('refresh') || btn.id.includes('Refresh')) {
+                    btn.classList.remove('loading');
+                    btn.disabled = false;
+                }
+            });
+            if (window.showProfessionalMessage) {
+                window.showProfessionalMessage('All data refreshed successfully', 'success');
+            }
+        });
+    }
+    
+    // Add refresh functionality to all refresh buttons
+    document.addEventListener('DOMContentLoaded', function() {
+        const refreshButtons = document.querySelectorAll('[id$="Btn"]');
+        refreshButtons.forEach(btn => {
+            if (btn.id.includes('refresh') || btn.id.includes('Refresh')) {
+                btn.addEventListener('click', function() {
+                    refreshAllData();
+                });
+            }
+        });
+    });
+    
+    // Enhanced modal functionality
+    function initializeEnhancedModals() {
+        const modals = document.querySelectorAll('.modal');
+        modals.forEach(modal => {
+            // Add AdminLTE modal functionality
+            if (typeof $ !== 'undefined' && $.fn.modal) {
+                $(modal).on('show.bs.modal', function() {
+                    const modalContent = $(this).find('.modal-content');
+                    modalContent.addClass('bounce-in');
+                });
+                
+                $(modal).on('hidden.bs.modal', function() {
+                    const modalContent = $(this).find('.modal-content');
+                    modalContent.removeClass('bounce-in');
+                });
+            }
+        });
+    }
+    
+    // Initialize enhanced modals
+    document.addEventListener('DOMContentLoaded', function() {
+        initializeEnhancedModals();
+    });
+    
+})();

chatbot/professional_advanced.js

@@ -0,0 +1,1587 @@
+/**
+ * AIMHSA Professional Dashboard JavaScript
+ * Simplified version without AdminLTE dependencies
+ */
+
+(() => {
+    'use strict';
+
+    // API Configuration
+    let apiRoot;
+    try {
+        const loc = window.location;
+        if (loc.port === '8000') {
+            apiRoot = `${loc.protocol}//${loc.hostname}:5057`;
+        } else if (loc.port === '5057' || loc.port === '') {
+            apiRoot = loc.origin;
+        } else {
+            apiRoot = 'http://localhost:5057';
+        }
+    } catch (_) {
+        apiRoot = 'http://localhost:5057';
+    }
+    const API_ROOT = apiRoot;
+
+    // Global variables
+    let currentSection = 'dashboard';
+    let charts = {};
+    let dataTables = {};
+    let currentUser = null;
+
+    // Initialize when DOM is ready
+    $(document).ready(function() {
+        console.log('Professional Dashboard Initializing...');
+        
+        // Initialize components (simplified)
+        initializeNavigation();
+        initializeDataTables();
+        initializeCharts();
+        initializeEventHandlers();
+        
+        // Get current user and load data
+        getCurrentUser();
+        
+        // Start auto-refresh
+        startAutoRefresh();
+        
+        // Force initial data load after a short delay
+        setTimeout(() => {
+            console.log('Force loading dashboard data...');
+            loadDashboardData();
+        }, 1000);
+        
+        // Add refresh button functionality
+        $(document).on('click', '#refreshDashboardBtn', function() {
+            console.log('Manual dashboard refresh triggered');
+            loadDashboardData();
+        });
+    });
+
+    /**
+     * Initialize basic components (no AdminLTE dependencies)
+     */
+    function initializeBasicComponents() {
+        // Initialize tooltips if Bootstrap is available
+        if (typeof $ !== 'undefined' && $.fn.tooltip) {
+        $('[data-toggle="tooltip"]').tooltip();
+        }
+        
+        // Initialize popovers if Bootstrap is available
+        if (typeof $ !== 'undefined' && $.fn.popover) {
+        $('[data-toggle="popover"]').popover();
+        }
+    }
+
+    /**
+     * Initialize navigation system
+     */
+    function initializeNavigation() {
+        // Handle sidebar navigation
+        $('.nav-sidebar .nav-link').on('click', function(e) {
+            e.preventDefault();
+            
+            const section = $(this).data('section');
+            if (section) {
+                showSection(section);
+                updateActiveNavItem($(this));
+                updateBreadcrumb(section);
+            }
+        });
+
+        // Handle breadcrumb navigation
+        $('.breadcrumb a').on('click', function(e) {
+            e.preventDefault();
+            const section = $(this).attr('href').substring(1);
+            showSection(section);
+        });
+    }
+
+    /**
+     * Show specific section and hide others
+     */
+    function showSection(sectionName) {
+        // Hide all sections
+        $('.content-section').hide();
+        
+        // Show target section
+        $(`#${sectionName}-section`).show();
+        
+        // Update current section
+        currentSection = sectionName;
+        
+        // Load section-specific data
+        loadSectionData(sectionName);
+    }
+
+    /**
+     * Update active navigation item
+     */
+    function updateActiveNavItem(activeItem) {
+        $('.nav-sidebar .nav-link').removeClass('active');
+        activeItem.addClass('active');
+    }
+
+    /**
+     * Update breadcrumb
+     */
+    function updateBreadcrumb(section) {
+        const sectionNames = {
+            'dashboard': 'Dashboard',
+            'sessions': 'My Sessions',
+            'notifications': 'Notifications',
+            'reports': 'Reports',
+            'profile': 'Profile',
+            'settings': 'Settings'
+        };
+        
+        $('#pageTitle').text(sectionNames[section] || 'Dashboard');
+        $('#breadcrumbActive').text(sectionNames[section] || 'Dashboard');
+    }
+
+    /**
+     * Initialize DataTables (if available)
+     */
+    function initializeDataTables() {
+        // Sessions table
+        if ($('#sessionsTable').length && typeof $ !== 'undefined' && $.fn.DataTable) {
+            dataTables.sessions = $('#sessionsTable').DataTable({
+                responsive: true,
+                processing: true,
+                serverSide: false,
+                pageLength: 25,
+                order: [[0, 'desc']],
+                columnDefs: [
+                    { targets: [-1], orderable: false }
+                ],
+                language: {
+                    search: "Search:",
+                    lengthMenu: "Show _MENU_ entries per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "First",
+                        last: "Last",
+                        next: "Next",
+                        previous: "Previous"
+                    }
+                }
+            });
+        }
+
+    }
+
+    /**
+     * Initialize charts (if Chart.js is available)
+     */
+    function initializeCharts() {
+        // Only initialize if Chart.js is available
+        if (typeof Chart === 'undefined') {
+            console.log('Chart.js not available, skipping chart initialization');
+            return;
+        }
+        
+        // Session trend chart
+        if ($('#sessionTrendChart').length) {
+            const ctx = document.getElementById('sessionTrendChart').getContext('2d');
+            charts.sessionTrend = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                    datasets: [{
+                        label: 'Completed Sessions',
+                        data: [12, 15, 18, 14, 16, 19],
+                        borderColor: '#28a745',
+                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
+                        tension: 0.4
+                    }, {
+                        label: 'Scheduled Sessions',
+                        data: [8, 12, 10, 15, 13, 17],
+                        borderColor: '#007bff',
+                        backgroundColor: 'rgba(0, 123, 255, 0.1)',
+                        tension: 0.4
+                    }, {
+                        label: 'Cancelled Sessions',
+                        data: [2, 3, 1, 4, 2, 3],
+                        borderColor: '#dc3545',
+                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+
+        // Risk distribution chart
+        if ($('#riskDistributionChart').length) {
+            const ctx = document.getElementById('riskDistributionChart').getContext('2d');
+            charts.riskDistribution = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Low Risk', 'Medium Risk', 'High Risk', 'Critical'],
+                    datasets: [{
+                        data: [45, 35, 15, 5],
+                        backgroundColor: ['#28a745', '#17a2b8', '#ffc107', '#dc3545'],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * Initialize Select2 (if available)
+     */
+    function initializeSelect2() {
+        if (typeof $ !== 'undefined' && $.fn.select2) {
+        $('.select2').select2({
+            theme: 'bootstrap4',
+            width: '100%'
+        });
+        }
+    }
+
+    /**
+     * Initialize event handlers
+     */
+    function initializeEventHandlers() {
+        // Session management
+        $('#addNewSessionBtn').on('click', function() {
+            if (typeof $ !== 'undefined' && $.fn.modal) {
+            $('#sessionNotesModal').modal('show');
+            } else {
+                // Fallback for when Bootstrap modal is not available
+                document.getElementById('sessionNotesModal').style.display = 'block';
+            }
+        });
+
+        $('#saveNotesBtn').on('click', function() {
+            saveSessionNotes();
+        });
+
+        // Follow-up checkbox handler
+        $('#followUpRequired').on('change', function() {
+            if ($(this).is(':checked')) {
+                $('#followUpDateGroup').show();
+            } else {
+                $('#followUpDateGroup').hide();
+            }
+        });
+
+        // Session notes form handler
+        $('#saveNotesBtn').on('click', function() {
+            const bookingId = $('#sessionId').val();
+            const notes = $('#sessionNotes').val();
+            const followUpRequired = $('#followUpRequired').is(':checked');
+            const followUpDate = $('#followUpDate').val();
+
+            if (!notes.trim()) {
+                if (typeof Swal !== 'undefined') {
+                    Swal.fire('Error', 'Please enter session notes', 'error');
+                } else {
+                    alert('Please enter session notes');
+                }
+                return;
+            }
+
+            // For now, just show success message
+            if (typeof Swal !== 'undefined') {
+                Swal.fire('Success', 'Session notes saved successfully', 'success');
+                $('#sessionNotesModal').modal('hide');
+            } else {
+                alert('Session notes saved successfully');
+                document.getElementById('sessionNotesModal').style.display = 'none';
+            }
+            loadSessions(); // Refresh sessions
+        });
+
+        // Refresh buttons
+        $('[id$="RefreshBtn"], [id$="refreshBtn"]').on('click', function() {
+            const section = $(this).closest('.content-section').attr('id').replace('-section', '');
+            loadSectionData(section);
+        });
+
+
+        // Filter functionality
+        $('#sessionStatusFilter, #riskLevelFilter').on('change', function() {
+            applyFilters();
+        });
+
+        // Logout
+        $('#logoutBtn').on('click', function() {
+            if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Logout?',
+                text: 'Are you sure you want to logout?',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, logout!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                        // Clear all session data
+                        localStorage.removeItem('aimhsa_professional');
+                        localStorage.removeItem('aimhsa_account');
+                        localStorage.removeItem('aimhsa_admin');
+                        localStorage.removeItem('currentUser');
+                        
+                        // Redirect to login page
+                        window.location.href = '/login.html';
+                    }
+                });
+            } else {
+                // Fallback for when SweetAlert is not available
+                if (confirm('Are you sure you want to logout?')) {
+                    // Clear all session data
+                    localStorage.removeItem('aimhsa_professional');
+                    localStorage.removeItem('aimhsa_account');
+                    localStorage.removeItem('aimhsa_admin');
+                    localStorage.removeItem('currentUser');
+                    
+                    // Redirect to login page
+                    window.location.href = '/login.html';
+                }
+            }
+        });
+    }
+
+    /**
+     * Get current user information
+     */
+    function getCurrentUser() {
+        console.log('Getting current user...');
+        
+        // Check for professional login session
+        const professionalSession = localStorage.getItem('aimhsa_professional');
+        if (professionalSession) {
+            try {
+                currentUser = JSON.parse(professionalSession);
+                console.log('Professional user authenticated:', currentUser.name);
+                updateUserInfo();
+                loadDashboardData();
+                return;
+            } catch (error) {
+                console.warn('Invalid professional session:', error);
+            }
+        }
+        
+        // Check for other user types and redirect if needed
+        const userSession = localStorage.getItem('aimhsa_account');
+        const adminSession = localStorage.getItem('aimhsa_admin');
+        
+        if (userSession) {
+            console.warn('User is logged in as regular user, redirecting to login');
+            alert('You are logged in as a regular user. Please logout and login as a professional.');
+            window.location.href = '/login.html';
+            return;
+        }
+        
+        if (adminSession) {
+            console.warn('User is logged in as admin, redirecting to login');
+            alert('You are logged in as an admin. Please logout and login as a professional.');
+            window.location.href = '/login.html';
+            return;
+        }
+        
+        // No valid session found - create a test professional session for demo purposes
+        console.log('No professional session found, creating test session for demo');
+        createTestProfessionalSession();
+    }
+    
+    /**
+     * Create a test professional session for demo purposes
+     */
+    function createTestProfessionalSession() {
+        // Create a test professional user
+        currentUser = {
+            professional_id: 18,
+            name: 'Dashboard Test Professional',
+            username: 'dashboard_test_prof',
+            email: 'dashboard.test@example.com',
+            fullname: 'Dashboard Test Professional',
+            specialization: 'Psychologist'
+        };
+        
+        // Store in localStorage
+        localStorage.setItem('aimhsa_professional', JSON.stringify(currentUser));
+        
+        console.log('Test professional session created:', currentUser);
+        updateUserInfo();
+        loadDashboardData();
+    }
+
+    /**
+     * Update user information display
+     */
+    function updateUserInfo() {
+        if (currentUser) {
+            console.log('Updating UI with user info:', currentUser);
+            
+            // Update user name in sidebar
+            $('#professionalNameSidebar').text(currentUser.name || currentUser.fullname || 'Professional');
+            $('#professionalName').text(currentUser.name || currentUser.fullname || 'Professional');
+            
+            // Update user role/specialization
+            $('#professionalRole').text(currentUser.specialization || 'Mental Health Professional');
+            
+            // Update user email if available
+            if (currentUser.email) {
+                $('.user-panel .info span').text(currentUser.email);
+            }
+            
+            // Update user profile image with initials
+            updateUserProfileImage(currentUser.name || currentUser.fullname || 'Professional');
+            
+            console.log('User info updated:', currentUser.name);
+        }
+    }
+    
+    /**
+     * Update user profile image with initials
+     */
+    function updateUserProfileImage(fullName) {
+        if (!fullName) return;
+        
+        // Extract initials from full name
+        const initials = fullName.split(' ')
+            .map(name => name.charAt(0).toUpperCase())
+            .join('')
+            .substring(0, 2);
+        
+        // Create SVG with initials
+        const svgData = `data:image/svg+xml;base64,${btoa(`
+            <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="160" height="160" rx="80" fill="#28a745"/>
+                <text x="80" y="95" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" text-anchor="middle">${initials}</text>
+            </svg>
+        `)}`;
+        
+        // Update the profile image
+        $('#userProfileImage').attr('src', svgData);
+        $('#profileUserImage').attr('src', svgData);
+    }
+
+    /**
+     * Load dashboard data from database
+     */
+    function loadDashboardData() {
+        console.log('🔄 Loading professional dashboard data...');
+        
+        if (!currentUser) {
+            console.log('⚠️ No current user, waiting...');
+            setTimeout(loadDashboardData, 1000);
+            return;
+        }
+        
+        console.log('✅ Current user found:', currentUser.name);
+        
+        // Update user info in UI
+        updateUserInfo();
+        
+        // Load dashboard statistics from API
+        loadDashboardStats();
+        
+        // Load today's schedule
+        loadTodaySchedule();
+        
+        // Load recent notifications
+        loadRecentNotifications();
+        
+        // Load dashboard charts
+        loadDashboardCharts();
+        
+        console.log('✅ Dashboard data loading completed');
+    }
+
+    /**
+     * Update user information in the UI
+     */
+    function updateUserInfo() {
+        if (currentUser) {
+            console.log(' Updating UI with user info:', currentUser);
+            $('#professionalName').text(currentUser.fullname || currentUser.username);
+            $('#professionalNameSidebar').text(currentUser.fullname || currentUser.username);
+            $('#professionalRole').text(currentUser.specialization || 'Mental Health Professional');
+            $('#profileName').text(currentUser.fullname || currentUser.username);
+            $('#profileRole').text(currentUser.specialization || 'Mental Health Professional');
+        }
+    }
+
+    /**
+     * Load dashboard statistics from API
+     */
+    function loadDashboardStats() {
+        console.log('Loading dashboard statistics...');
+        
+        if (!currentUser) {
+            console.log('No current user for stats');
+            return;
+        }
+        
+        console.log('Fetching data from:', `${API_ROOT}/admin/bookings`);
+        
+        // Show loading state
+        $('#totalSessions').html('<i class="fas fa-spinner fa-spin"></i>');
+        $('#unreadNotifications').html('<i class="fas fa-spinner fa-spin"></i>');
+        $('#upcomingToday').html('<i class="fas fa-spinner fa-spin"></i>');
+        $('#highRiskSessions').html('<i class="fas fa-spinner fa-spin"></i>');
+        
+        // Get user's booking statistics
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => {
+                console.log('API response status:', response.status);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Dashboard stats received:', data);
+                
+                // Calculate statistics
+                const totalSessions = data.total || 0;
+                const confirmedSessions = data.confirmed || 0;
+                const pendingSessions = data.pending || 0;
+                const criticalSessions = data.critical || 0;
+                
+                // Calculate today's sessions
+                const today = new Date().toDateString();
+                const todaySessions = data.bookings ? data.bookings.filter(booking => {
+                    const bookingDate = new Date(booking.scheduled_datetime * 1000).toDateString();
+                    return bookingDate === today;
+                }).length : 0;
+                
+                console.log('Updating UI with:', { 
+                    totalSessions, 
+                    confirmedSessions, 
+                    pendingSessions, 
+                    criticalSessions, 
+                    todaySessions 
+                });
+                
+                // Update KPI cards with real data
+                $('#totalSessions').text(totalSessions);
+                $('#unreadNotifications').text(pendingSessions + criticalSessions); // Show urgent notifications
+                $('#upcomingToday').text(todaySessions);
+                $('#highRiskSessions').text(criticalSessions);
+                
+                // Update notification badge in navbar
+                $('#notificationBadge').text(pendingSessions + criticalSessions);
+                $('#notificationCount').text(pendingSessions + criticalSessions);
+                
+                // Update notification dropdown
+                updateNotificationDropdown(data.bookings || []);
+                
+                console.log('Dashboard statistics updated successfully with real data');
+            })
+            .catch(error => {
+                console.error('Error loading dashboard stats:', error);
+                
+                // Show error state
+                $('#totalSessions').html('<i class="fas fa-exclamation-triangle text-warning"></i>');
+                $('#unreadNotifications').html('<i class="fas fa-exclamation-triangle text-warning"></i>');
+                $('#upcomingToday').html('<i class="fas fa-exclamation-triangle text-warning"></i>');
+                $('#highRiskSessions').html('<i class="fas fa-exclamation-triangle text-warning"></i>');
+                
+                // Show error message
+                if (typeof Swal !== 'undefined') {
+                    Swal.fire({
+                        title: 'Data Loading Error',
+                        text: 'Unable to load dashboard data. Please check your connection and try again.',
+                        icon: 'warning',
+                        timer: 5000,
+                        showConfirmButton: false
+                    });
+                } else {
+                    console.error('Unable to load dashboard data. Please check your connection and try again.');
+                }
+            });
+    }
+    
+    /**
+     * Update notification dropdown with real data
+     */
+    function updateNotificationDropdown(bookings) {
+        const notificationMenu = $('.dropdown-menu.dropdown-menu-lg');
+        const urgentBookings = bookings.filter(booking => 
+            booking.risk_level === 'critical' || booking.booking_status === 'pending'
+        ).slice(0, 5); // Show top 5 urgent items
+        
+        let notificationHtml = `<span class="dropdown-item dropdown-header">${urgentBookings.length} Urgent Items</span>`;
+        
+        if (urgentBookings.length === 0) {
+            notificationHtml += `
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">
+                    <i class="fas fa-check-circle mr-2 text-success"></i> All caught up!
+                    <span class="float-right text-muted text-sm">No urgent items</span>
+                </a>
+            `;
+        } else {
+            urgentBookings.forEach(booking => {
+                const timeAgo = getTimeAgo(booking.created_ts);
+                const icon = booking.risk_level === 'critical' ? 'fa-exclamation-triangle' : 'fa-calendar';
+                const color = booking.risk_level === 'critical' ? 'text-danger' : 'text-warning';
+                
+                notificationHtml += `
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item" onclick="viewBookingDetails('${booking.booking_id}')">
+                        <i class="fas ${icon} mr-2 ${color}"></i> 
+                        ${booking.user_fullname || 'Patient'} - ${booking.risk_level || 'New booking'}
+                        <span class="float-right text-muted text-sm">${timeAgo}</span>
+                    </a>
+                `;
+            });
+        }
+        
+        notificationHtml += `
+            <div class="dropdown-divider"></div>
+            <a href="#notifications" class="dropdown-item dropdown-footer" data-section="notifications">See All Notifications</a>
+        `;
+        
+        notificationMenu.html(notificationHtml);
+    }
+    
+    /**
+     * Get time ago string from timestamp
+     */
+    function getTimeAgo(timestamp) {
+        if (!timestamp) return 'Unknown';
+        
+        const now = Date.now() / 1000;
+        const diff = now - timestamp;
+        
+        if (diff < 60) return 'Just now';
+        if (diff < 3600) return `${Math.floor(diff / 60)} mins ago`;
+        if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
+        return `${Math.floor(diff / 86400)} days ago`;
+    }
+
+    /**
+     * View booking details modal
+     */
+    window.viewBookingDetails = function(bookingId) {
+        console.log('Viewing booking details for:', bookingId);
+        
+        // Find the booking in the current data
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => response.json())
+            .then(data => {
+                const booking = data.bookings.find(b => b.booking_id === bookingId);
+                if (booking) {
+                    showBookingDetailsModal(booking);
+                } else {
+                    Swal.fire('Error', 'Booking not found', 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching booking details:', error);
+                Swal.fire('Error', 'Failed to load booking details', 'error');
+            });
+    };
+    
+    /**
+     * Show booking details modal
+     */
+    function showBookingDetailsModal(booking) {
+        const scheduledTime = new Date(booking.scheduled_datetime * 1000).toLocaleString();
+        const riskBadgeClass = getRiskBadgeClass(booking.risk_level);
+        const statusBadgeClass = getStatusBadgeClass(booking.booking_status);
+        
+        const modalHtml = `
+            <div class="modal fade" id="bookingDetailsModal" tabindex="-1" role="dialog">
+                <div class="modal-dialog modal-lg" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">
+                                <i class="fas fa-calendar-check text-primary"></i>
+                                Booking Details
+                            </h5>
+                            <button type="button" class="close" data-dismiss="modal">
+                                <span>&times;</span>
+                            </button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <h6><i class="fas fa-user text-info"></i> Patient Information</h6>
+                                    <p><strong>Name:</strong> ${booking.user_fullname || 'Unknown'}</p>
+                                    <p><strong>Email:</strong> ${booking.user_email || 'N/A'}</p>
+                                    <p><strong>Phone:</strong> ${booking.user_phone || 'N/A'}</p>
+                                    <p><strong>Location:</strong> ${booking.user_location || 'N/A'}</p>
+                                </div>
+                                <div class="col-md-6">
+                                    <h6><i class="fas fa-calendar text-success"></i> Session Details</h6>
+                                    <p><strong>Scheduled:</strong> ${scheduledTime}</p>
+                                    <p><strong>Status:</strong> <span class="badge badge-${statusBadgeClass}">${booking.booking_status}</span></p>
+                                    <p><strong>Risk Level:</strong> <span class="badge badge-${riskBadgeClass}">${booking.risk_level}</span></p>
+                                    <p><strong>Session Type:</strong> ${booking.session_type || 'Routine'}</p>
+                                </div>
+                            </div>
+                            ${booking.detected_indicators && booking.detected_indicators.length > 0 ? `
+                                <div class="row mt-3">
+                                    <div class="col-12">
+                                        <h6><i class="fas fa-exclamation-triangle text-warning"></i> Detected Indicators</h6>
+                                        <div class="alert alert-warning">
+                                            ${booking.detected_indicators.map(indicator => `<span class="badge badge-warning mr-1">${indicator}</span>`).join('')}
+                                        </div>
+                                    </div>
+                                </div>
+                            ` : ''}
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            <button type="button" class="btn btn-primary" onclick="startSession('${booking.booking_id}')">
+                                <i class="fas fa-play"></i> Start Session
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Remove existing modal if any
+        $('#bookingDetailsModal').remove();
+        
+        // Add modal to body
+        $('body').append(modalHtml);
+        
+        // Show modal
+        if (typeof $ !== 'undefined' && $.fn.modal) {
+            $('#bookingDetailsModal').modal('show');
+        } else {
+            // Fallback for when Bootstrap modal is not available
+            document.getElementById('bookingDetailsModal').style.display = 'block';
+        }
+    };
+    
+    /**
+     * Get risk badge class
+     */
+    function getRiskBadgeClass(riskLevel) {
+        switch (riskLevel) {
+            case 'critical': return 'danger';
+            case 'high': return 'warning';
+            case 'medium': return 'info';
+            case 'low': return 'success';
+            default: return 'secondary';
+        }
+    }
+    
+    /**
+     * Get status badge class
+     */
+    function getStatusBadgeClass(status) {
+        switch (status) {
+            case 'confirmed': return 'success';
+            case 'pending': return 'warning';
+            case 'completed': return 'info';
+            case 'cancelled': return 'danger';
+            default: return 'secondary';
+        }
+    }
+    
+    /**
+     * Start session function
+     */
+    window.startSession = function(bookingId) {
+        if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Start Session',
+                text: 'Are you ready to start this session?',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonText: 'Yes, start session',
+                cancelButtonText: 'Cancel'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Here you would implement the actual session start logic
+                    Swal.fire('Session Started', 'The session has been started successfully!', 'success');
+                    if (typeof $ !== 'undefined' && $.fn.modal) {
+                        $('#bookingDetailsModal').modal('hide');
+                    } else {
+                        document.getElementById('bookingDetailsModal').style.display = 'none';
+                    }
+                    
+                    // Refresh the dashboard data
+                    loadDashboardData();
+                }
+            });
+        } else {
+            // Fallback for when SweetAlert is not available
+            if (confirm('Are you ready to start this session?')) {
+                alert('Session Started! The session has been started successfully!');
+                if (typeof $ !== 'undefined' && $.fn.modal) {
+                    $('#bookingDetailsModal').modal('hide');
+                } else {
+                    document.getElementById('bookingDetailsModal').style.display = 'none';
+                }
+                
+                // Refresh the dashboard data
+                loadDashboardData();
+            }
+        }
+    };
+    
+    /**
+     * View session function
+     */
+    window.viewSession = function(bookingId) {
+        console.log('Viewing session:', bookingId);
+        viewBookingDetails(bookingId);
+    };
+    
+    /**
+     * Add session notes function
+     */
+    window.addSessionNotes = function(bookingId) {
+        if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Add Session Notes',
+                input: 'textarea',
+                inputLabel: 'Session Notes',
+                inputPlaceholder: 'Enter your session notes here...',
+                inputAttributes: {
+                    'aria-label': 'Type your session notes here'
+                },
+                showCancelButton: true,
+                confirmButtonText: 'Save Notes',
+                cancelButtonText: 'Cancel'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Here you would save the notes to the database
+                    Swal.fire('Notes Saved', 'Session notes have been saved successfully!', 'success');
+                    console.log('Session notes for', bookingId, ':', result.value);
+                }
+            });
+        } else {
+            // Fallback for when SweetAlert is not available
+            const notes = prompt('Enter your session notes here:');
+            if (notes !== null && notes.trim() !== '') {
+                alert('Notes Saved! Session notes have been saved successfully!');
+                console.log('Session notes for', bookingId, ':', notes);
+            }
+        }
+    };
+    
+    /**
+     * Complete session function
+     */
+    window.completeSession = function(bookingId) {
+        if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Complete Session',
+                text: 'Mark this session as completed?',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonText: 'Yes, complete',
+                cancelButtonText: 'Cancel'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Here you would update the session status in the database
+                    Swal.fire('Session Completed', 'The session has been marked as completed!', 'success');
+                    console.log('Session completed:', bookingId);
+                    
+                    // Refresh the dashboard data
+                    loadDashboardData();
+                }
+            });
+        } else {
+            // Fallback for when SweetAlert is not available
+            if (confirm('Mark this session as completed?')) {
+                alert('Session Completed! The session has been marked as completed!');
+                console.log('Session completed:', bookingId);
+                
+                // Refresh the dashboard data
+                loadDashboardData();
+            }
+        }
+    };
+
+    /**
+     * Load section-specific data
+     */
+    function loadSectionData(section) {
+        switch (section) {
+            case 'sessions':
+                loadSessions();
+                break;
+            case 'notifications':
+                loadNotifications();
+                break;
+            case 'reports':
+                loadReports();
+                break;
+            case 'profile':
+                loadProfile();
+                break;
+            case 'settings':
+                loadSettings();
+                break;
+            case 'dashboard':
+                loadDashboardCharts();
+                break;
+        }
+    }
+    
+    /**
+     * Load dashboard charts
+     */
+    function loadDashboardCharts() {
+        console.log('Loading dashboard charts...');
+        
+        // Load session trends chart
+        loadSessionTrendsChart();
+        
+        // Load risk distribution chart
+        loadRiskDistributionChart();
+    }
+    
+    /**
+     * Load session trends chart
+     */
+    function loadSessionTrendsChart() {
+        // Only proceed if Chart.js is available
+        if (typeof Chart === 'undefined') {
+            console.log('Chart.js not available, skipping session trends chart');
+            return;
+        }
+        
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => response.json())
+            .then(data => {
+                const bookings = data.bookings || [];
+                
+                // Group bookings by date for the last 7 days
+                const last7Days = [];
+                for (let i = 6; i >= 0; i--) {
+                    const date = new Date();
+                    date.setDate(date.getDate() - i);
+                    last7Days.push(date.toISOString().split('T')[0]);
+                }
+                
+                const sessionData = last7Days.map(date => {
+                    return bookings.filter(booking => {
+                        const bookingDate = new Date(booking.scheduled_datetime * 1000).toISOString().split('T')[0];
+                        return bookingDate === date;
+                    }).length;
+                });
+                
+                // Create or update chart
+                const ctx = document.getElementById('sessionTrendsChart');
+                if (ctx) {
+                    if (charts.sessionTrends) {
+                        charts.sessionTrends.destroy();
+                    }
+                    
+                    charts.sessionTrends = new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: last7Days.map(date => new Date(date).toLocaleDateString('en-US', { weekday: 'short' })),
+                            datasets: [{
+                                label: 'Sessions',
+                                data: sessionData,
+                                borderColor: 'rgb(75, 192, 192)',
+                                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                                tension: 0.1
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: {
+                                y: {
+                                    beginAtZero: true,
+                                    ticks: {
+                                        stepSize: 1
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error loading session trends chart:', error);
+            });
+    }
+    
+    /**
+     * Load risk distribution chart
+     */
+    function loadRiskDistributionChart() {
+        // Only proceed if Chart.js is available
+        if (typeof Chart === 'undefined') {
+            console.log('Chart.js not available, skipping risk distribution chart');
+            return;
+        }
+        
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => response.json())
+            .then(data => {
+                const bookings = data.bookings || [];
+                
+                // Count bookings by risk level
+                const riskCounts = {
+                    low: 0,
+                    medium: 0,
+                    high: 0,
+                    critical: 0
+                };
+                
+                bookings.forEach(booking => {
+                    const riskLevel = booking.risk_level || 'low';
+                    if (riskCounts.hasOwnProperty(riskLevel)) {
+                        riskCounts[riskLevel]++;
+                    }
+                });
+                
+                // Create or update chart
+                const ctx = document.getElementById('riskDistributionChart');
+                if (ctx) {
+                    if (charts.riskDistribution) {
+                        charts.riskDistribution.destroy();
+                    }
+                    
+                    charts.riskDistribution = new Chart(ctx, {
+                        type: 'doughnut',
+                        data: {
+                            labels: ['Low Risk', 'Medium Risk', 'High Risk', 'Critical'],
+                            datasets: [{
+                                data: [riskCounts.low, riskCounts.medium, riskCounts.high, riskCounts.critical],
+                                backgroundColor: [
+                                    'rgba(40, 167, 69, 0.8)',
+                                    'rgba(23, 162, 184, 0.8)',
+                                    'rgba(255, 193, 7, 0.8)',
+                                    'rgba(220, 53, 69, 0.8)'
+                                ],
+                                borderColor: [
+                                    'rgba(40, 167, 69, 1)',
+                                    'rgba(23, 162, 184, 1)',
+                                    'rgba(255, 193, 7, 1)',
+                                    'rgba(220, 53, 69, 1)'
+                                ],
+                                borderWidth: 2
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            plugins: {
+                                legend: {
+                                    position: 'bottom'
+                                }
+                            }
+                        }
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error loading risk distribution chart:', error);
+            });
+    }
+
+    /**
+     * Load KPI data
+     */
+    function loadKPIData() {
+        // Simulate API call
+        setTimeout(() => {
+            $('#totalSessions').text('15');
+            $('#unreadNotifications').text('8');
+            $('#upcomingToday').text('3');
+            $('#highRiskSessions').text('2');
+        }, 500);
+    }
+
+    /**
+     * Load today's schedule
+     */
+    function loadTodaySchedule() {
+        console.log('Loading today\'s schedule...');
+        
+        // Load real data from bookings API
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => response.json())
+            .then(data => {
+                console.log('Schedule data received:', data);
+
+        const tbody = $('#todayScheduleTable');
+        tbody.empty();
+
+                if (data.bookings && data.bookings.length > 0) {
+                    // Show first 3 bookings as today's schedule
+                    data.bookings.slice(0, 3).forEach(booking => {
+                        const time = new Date(booking.scheduled_datetime * 1000).toLocaleTimeString('en-US', { 
+                            hour: '2-digit', 
+                            minute: '2-digit' 
+                        });
+                        const patientName = booking.user_fullname || booking.user_account || 'Unknown Patient';
+                        const sessionType = booking.session_type || 'Routine';
+                        const status = booking.booking_status;
+                        
+            const row = `
+                <tr>
+                                <td>${time}</td>
+                                <td>${patientName}</td>
+                                <td>${sessionType}</td>
+                                <td><span class="badge badge-${getStatusBadgeClass(status)}">${status}</span></td>
+                </tr>
+            `;
+            tbody.append(row);
+                    });
+                } else {
+                    tbody.html('<tr><td colspan="4" class="text-center text-muted">No sessions scheduled for today</td></tr>');
+                }
+                
+                console.log('Today\'s schedule loaded');
+            })
+            .catch(error => {
+                console.error('Error loading schedule:', error);
+                const tbody = $('#todayScheduleTable');
+                tbody.html('<tr><td colspan="4" class="text-center text-danger">Error loading schedule</td></tr>');
+        });
+    }
+
+    /**
+     * Load recent notifications
+     */
+    function loadRecentNotifications() {
+        console.log('Loading recent notifications...');
+        
+        // For now, show sample notifications
+        const notifications = [
+            {
+                id: 1,
+                title: 'New Session Booking',
+                message: 'A new session has been booked for tomorrow at 10:00 AM',
+                time: new Date().toLocaleString(),
+                type: 'info',
+                read: false
+            },
+            {
+                id: 2,
+                title: 'High Risk Alert',
+                message: 'A patient has been flagged as high risk and needs immediate attention',
+                time: new Date(Date.now() - 3600000).toLocaleString(),
+                type: 'warning',
+                read: false
+            },
+            {
+                id: 3,
+                title: 'System Update',
+                message: 'The system has been updated with new features',
+                time: new Date(Date.now() - 7200000).toLocaleString(),
+                type: 'success',
+                read: true
+            }
+        ];
+        
+        console.log('Recent notifications loaded');
+    }
+
+    /**
+     * Load sessions data
+     */
+    function loadSessions() {
+        console.log('Loading sessions...');
+
+        const tbody = $('#sessionsTableBody');
+        tbody.html('<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading sessions...</td></tr>');
+        
+        console.log('Fetching from:', `${API_ROOT}/admin/bookings`);
+        
+        fetch(`${API_ROOT}/admin/bookings`)
+            .then(response => {
+                console.log('API response status:', response.status);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Sessions data received:', data);
+                console.log('Bookings count:', data.bookings ? data.bookings.length : 0);
+        tbody.empty();
+
+                if (data.bookings && data.bookings.length > 0) {
+                    console.log('Processing bookings...');
+                    data.bookings.forEach((booking, index) => {
+                        console.log(`Processing booking ${index + 1}:`, booking.user_fullname || booking.user_account);
+                        
+                        const scheduledTime = new Date(booking.scheduled_datetime * 1000).toLocaleString();
+                        const patientName = booking.user_fullname || booking.user_account || 'Unknown Patient';
+                        
+            const row = `
+                <tr>
+                                <td>${booking.booking_id.substring(0, 8)}...</td>
+                                <td>
+                                    <div class="user-info">
+                                        <strong>${patientName}</strong>
+                                        <br><small class="text-muted">${booking.user_email || 'No email'}</small>
+                                    </div>
+                                </td>
+                                <td>${scheduledTime}</td>
+                                <td>${booking.session_type || 'Routine'}</td>
+                                <td><span class="badge badge-${getRiskBadgeClass(booking.risk_level)}">${booking.risk_level}</span></td>
+                                <td><span class="badge badge-${getStatusBadgeClass(booking.booking_status)}">${booking.booking_status}</span></td>
+                                <td>
+                                    <button class="btn btn-sm btn-info" onclick="viewSession('${booking.booking_id}')" title="View Details">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                                    <button class="btn btn-sm btn-warning" onclick="addSessionNotes('${booking.booking_id}')" title="Add Notes">
+                                        <i class="fas fa-sticky-note"></i>
+                        </button>
+                    </td>
+                </tr>
+            `;
+            tbody.append(row);
+        });
+                    console.log('All bookings processed successfully');
+                } else {
+                    console.log('No bookings found in data');
+                    tbody.html(`
+                        <tr>
+                            <td colspan="7" class="text-center text-muted">
+                                <i class="fas fa-calendar-times"></i>
+                                <br>No sessions found
+                            </td>
+                        </tr>
+                    `);
+                }
+                
+                // Update DataTable if available
+                if (dataTables.sessions && typeof $ !== 'undefined' && $.fn.DataTable) {
+                    console.log('Updating DataTable...');
+            dataTables.sessions.clear().rows.add($(tbody).find('tr')).draw();
+        }
+                
+                console.log('Sessions loaded successfully');
+            })
+            .catch(error => {
+                console.error('Error loading sessions:', error);
+                tbody.html(`
+                    <tr>
+                        <td colspan="7" class="text-center text-danger">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <br>Error loading sessions: ${error.message}
+                        </td>
+                    </tr>
+                `);
+            });
+    }
+
+
+    /**
+     * Load notifications
+     */
+    function loadNotifications() {
+        console.log('🔔 Loading notifications...');
+        
+        const container = $('#notificationsList');
+        container.html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading notifications...</div>');
+        
+        // For now, show sample notifications
+        const notifications = [
+            {
+                id: 1,
+                title: 'New Session Booking',
+                message: 'A new session has been booked for tomorrow at 10:00 AM',
+                time: new Date().toLocaleString(),
+                type: 'info',
+                read: false
+            },
+            {
+                id: 2,
+                title: 'High Risk Alert',
+                message: 'A patient has been flagged as high risk and needs immediate attention',
+                time: new Date(Date.now() - 3600000).toLocaleString(),
+                type: 'warning',
+                read: false
+            },
+            {
+                id: 3,
+                title: 'System Update',
+                message: 'The system has been updated with new features',
+                time: new Date(Date.now() - 7200000).toLocaleString(),
+                type: 'success',
+                read: true
+            }
+        ];
+
+        container.empty();
+
+        if (notifications.length > 0) {
+        notifications.forEach(notification => {
+            const notificationHtml = `
+                    <div class="alert alert-${notification.type} alert-dismissible ${notification.read ? '' : 'alert-unread'}" data-notification-id="${notification.id}">
+                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true" onclick="markNotificationRead(${notification.id})">&times;</button>
+                    <h5><i class="icon fas fa-${getNotificationIcon(notification.type)}"></i> ${notification.title}</h5>
+                    <p>${notification.message}</p>
+                    <small><i class="fas fa-clock"></i> ${notification.time}</small>
+                        ${!notification.read ? `
+                            <button class="btn btn-sm btn-outline-primary float-right" onclick="markNotificationRead(${notification.id})">
+                                Mark as Read
+                            </button>
+                        ` : ''}
+                </div>
+            `;
+            container.append(notificationHtml);
+        });
+        } else {
+            container.html(`
+                <div class="text-center text-muted">
+                    <i class="fas fa-bell-slash"></i>
+                    <br>No notifications found
+                </div>
+            `);
+        }
+        
+        console.log(' Notifications loaded successfully');
+    }
+
+    /**
+     * Load reports
+     */
+    function loadReports() {
+        // Reports are already set in HTML
+        // This function can be used to load dynamic report data
+    }
+
+    /**
+     * Load profile
+     */
+    function loadProfile() {
+        // Profile data is already set in HTML
+        // This function can be used to load dynamic profile data
+    }
+
+    /**
+     * Load settings
+     */
+    function loadSettings() {
+        // Settings are already set in HTML
+        // This function can be used to load dynamic settings
+    }
+
+    /**
+     * Save session notes
+     */
+    function saveSessionNotes() {
+        const formData = {
+            sessionId: $('#sessionId').val(),
+            patientName: $('#patientName').val(),
+            sessionNotes: $('#sessionNotes').val(),
+            followUpRequired: $('#followUpRequired').is(':checked'),
+            followUpDate: $('#followUpDate').val()
+        };
+
+        // Simulate API call
+        if (typeof Swal !== 'undefined') {
+        Swal.fire({
+            title: 'Success!',
+            text: 'Session notes saved successfully.',
+            icon: 'success',
+            timer: 2000
+        }).then(() => {
+                if (typeof $ !== 'undefined' && $.fn.modal) {
+            $('#sessionNotesModal').modal('hide');
+                } else {
+                    document.getElementById('sessionNotesModal').style.display = 'none';
+                }
+            loadSessions();
+        });
+        } else {
+            alert('Session notes saved successfully.');
+            if (typeof $ !== 'undefined' && $.fn.modal) {
+                $('#sessionNotesModal').modal('hide');
+            } else {
+                document.getElementById('sessionNotesModal').style.display = 'none';
+            }
+            loadSessions();
+        }
+    }
+
+    /**
+     * Apply filters
+     */
+    function applyFilters() {
+        const status = $('#sessionStatusFilter').val();
+        const riskLevel = $('#riskLevelFilter').val();
+
+        // Apply filters to DataTables if available
+        if (dataTables.sessions && typeof $ !== 'undefined' && $.fn.DataTable) {
+            dataTables.sessions.column(5).search(status).draw();
+        }
+    }
+
+    /**
+     * Get risk badge class
+     */
+    function getRiskBadgeClass(riskLevel) {
+        const classes = {
+            'critical': 'danger',
+            'high': 'warning',
+            'medium': 'info',
+            'low': 'success'
+        };
+        return classes[riskLevel.toLowerCase()] || 'secondary';
+    }
+
+    /**
+     * Get status badge class
+     */
+    function getStatusBadgeClass(status) {
+        const classes = {
+            'scheduled': 'info',
+            'completed': 'success',
+            'cancelled': 'danger',
+            'pending': 'warning',
+            'confirmed': 'success',
+            'high risk': 'danger'
+        };
+        return classes[status.toLowerCase()] || 'secondary';
+    }
+
+    /**
+     * Get notification icon
+     */
+    function getNotificationIcon(type) {
+        const icons = {
+            'info': 'info-circle',
+            'warning': 'exclamation-triangle',
+            'success': 'check-circle',
+            'danger': 'times-circle'
+        };
+        return icons[type] || 'info-circle';
+    }
+
+    /**
+     * Start auto-refresh
+     */
+    function startAutoRefresh() {
+        setInterval(() => {
+            if (currentSection === 'dashboard') {
+                loadDashboardData();
+            } else {
+                loadSectionData(currentSection);
+            }
+        }, 30000); // Refresh every 30 seconds
+    }
+
+    /**
+     * Session management functions
+     */
+    window.acceptSession = function(bookingId) {
+        console.log(' Accepting session:', bookingId);
+        
+        if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Session Accepted!',
+                text: 'The session has been accepted successfully.',
+                icon: 'success',
+                timer: 2000
+            });
+        } else {
+            alert('Session Accepted! The session has been accepted successfully.');
+        }
+        loadSessions(); // Refresh sessions
+    };
+
+    window.declineSession = function(bookingId) {
+        console.log(' Declining session:', bookingId);
+        
+        if (typeof Swal !== 'undefined') {
+            Swal.fire({
+                title: 'Decline Session?',
+                text: 'Are you sure you want to decline this session?',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonText: 'Yes, decline',
+                cancelButtonText: 'Cancel'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    Swal.fire('Session Declined', 'The session has been declined.', 'success');
+                    loadSessions(); // Refresh sessions
+                }
+            });
+        } else {
+            if (confirm('Are you sure you want to decline this session?')) {
+                alert('Session Declined! The session has been declined.');
+                loadSessions(); // Refresh sessions
+            }
+        }
+    };
+
+    window.addSessionNotes = function(bookingId) {
+        console.log('📝 Adding notes for session:', bookingId);
+        
+        // Populate modal with session details
+        $('#sessionId').val(bookingId);
+        $('#patientName').val('Patient Name');
+        $('#sessionNotes').val('');
+        $('#followUpRequired').prop('checked', false);
+        $('#followUpDateGroup').hide();
+        
+        // Show modal
+        $('#sessionNotesModal').modal('show');
+    };
+
+    window.markNotificationRead = function(notificationId) {
+        console.log('📖 Marking notification as read:', notificationId);
+        
+        // Remove the notification from the UI
+        $(`[data-notification-id="${notificationId}"]`).fadeOut();
+        loadDashboardStats(); // Refresh dashboard stats
+    };
+
+    /**
+     * Global functions for onclick handlers
+     */
+    window.addNewSession = function() {
+        $('#sessionNotesModal').modal('show');
+    };
+
+    window.refreshSessions = function() {
+        loadSessions();
+        Swal.fire('Refreshed!', 'Sessions data has been refreshed.', 'success');
+    };
+
+    window.markAllAsRead = function() {
+        Swal.fire('Success!', 'All notifications marked as read.', 'success');
+        $('#notificationBadge').text('0');
+        $('#notificationCount').text('0');
+    };
+
+    window.viewSession = function(id) {
+        Swal.fire('View Session', `View session with ID: ${id}`, 'info');
+    };
+
+    window.editSession = function(id) {
+        Swal.fire('Edit Session', `Edit session with ID: ${id}`, 'info');
+    };
+
+
+    // Show dashboard by default
+    showSection('dashboard');
+
+})();
+
+
+

chatbot/professional_dashboard.html

@@ -0,0 +1,762 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIMHSA Professional Dashboard</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">
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css">
+    <!-- Select2 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <!-- SweetAlert2 CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <!-- FullCalendar CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS (preserves existing styles) -->
+    <link rel="stylesheet" href="professional.css">
+</head>
+<body class="hold-transition sidebar-mini layout-fixed">
+    <div class="wrapper">
+        <!-- Navbar -->
+        <nav class="main-header navbar navbar-expand navbar-dark navbar-success">
+            <!-- Left navbar links -->
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" data-widget="pushmenu" href="#" role="button">
+                        <i class="fas fa-bars"></i>
+                    </a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link" data-section="dashboard">Dashboard</a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link" data-section="sessions">Sessions</a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link" data-section="reports">Reports</a>
+                </li>
+            </ul>
+
+            <!-- Right navbar links -->
+            <ul class="navbar-nav ml-auto">
+                <!-- Notifications Dropdown Menu -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-bell"></i>
+                        <span class="badge badge-warning navbar-badge" id="notificationBadge">8</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                        <span class="dropdown-item dropdown-header">8 Notifications</span>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-calendar mr-2"></i> New session booking
+                            <span class="float-right text-muted text-sm">3 mins</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-exclamation-triangle mr-2"></i> High risk assessment
+                            <span class="float-right text-muted text-sm">12 hours</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-user mr-2"></i> New patient assigned
+                            <span class="float-right text-muted text-sm">2 days</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+                    </div>
+                </li>
+                
+                <!-- User Account Dropdown -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-user"></i>
+                        <span class="ml-2" id="professionalName">Dr. John Doe</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-user mr-2"></i> Profile
+                        </a>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-cog mr-2"></i> Settings
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item" id="logoutBtn">
+                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                        </a>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Main Sidebar Container -->
+        <aside class="main-sidebar sidebar-dark-success elevation-4">
+            <!-- Brand Logo -->
+            <a href="#" class="brand-link">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMzIiBoZWlnaHQ9IjMzIiByeD0iMTYuNSIgZmlsbD0iIzI4YTc0NSIvPgo8dGV4dCB4PSIxNi41IiB5PSIyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1EPC90ZXh0Pgo8L3N2Zz4K" alt="AIMHSA Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
+                <span class="brand-text font-weight-light">AIMHSA Professional</span>
+            </a>
+
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <!-- Sidebar user panel -->
+                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+                    <div class="image">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE2MCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiByeD0iODAiIGZpbGw9IiMyOGE3NDUiLz4KPHRleHQgeD0iODAiIHk9Ijk1IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SlQ8L3RleHQ+Cjwvc3ZnPgo=" class="img-circle elevation-2" alt="User Image" id="userProfileImage">
+                    </div>
+                    <div class="info">
+                        <a href="#" class="d-block" id="professionalNameSidebar">Dr. John Doe</a>
+                        <small class="text-muted" id="professionalRole">Psychiatrist</small>
+                    </div>
+                </div>
+
+                <!-- Sidebar Menu -->
+                <nav class="mt-2">
+                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+                        <li class="nav-item">
+                            <a href="#dashboard" class="nav-link active" data-section="dashboard">
+                                <i class="nav-icon fas fa-tachometer-alt"></i>
+                                <p>Dashboard</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#sessions" class="nav-link" data-section="sessions">
+                                <i class="nav-icon fas fa-calendar-check"></i>
+                                <p>My Sessions</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                        </li>
+                        <li class="nav-item">
+                            <a href="#notifications" class="nav-link" data-section="notifications">
+                                <i class="nav-icon fas fa-bell"></i>
+                                <p>Notifications</p>
+                                <span class="badge badge-warning right" id="notificationCount">8</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#reports" class="nav-link" data-section="reports">
+                                <i class="nav-icon fas fa-chart-bar"></i>
+                                <p>Reports</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#profile" class="nav-link" data-section="profile">
+                                <i class="nav-icon fas fa-user"></i>
+                                <p>Profile</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#settings" class="nav-link" data-section="settings">
+                                <i class="nav-icon fas fa-cog"></i>
+                                <p>Settings</p>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </aside>
+
+        <!-- Content Wrapper -->
+        <div class="content-wrapper">
+            <!-- Content Header -->
+            <div class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1 class="m-0" id="pageTitle">Dashboard</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
+                                <li class="breadcrumb-item active" id="breadcrumbActive">Dashboard</li>
+                                <li class="breadcrumb-item">
+                                    <button type="button" class="btn btn-sm btn-primary" id="refreshDashboardBtn">
+                                        <i class="fas fa-sync"></i> Refresh Data
+                                    </button>
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <!-- Dashboard Section -->
+                    <div id="dashboard-section" class="content-section">
+                        <!-- Info boxes -->
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-info">
+                                    <div class="inner">
+                                        <h3 id="totalSessions">15</h3>
+                                        <p>Total Sessions</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-calendar-check"></i>
+                                    </div>
+                                    <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-warning">
+                                    <div class="inner">
+                                        <h3 id="unreadNotifications">8</h3>
+                                        <p>Unread Notifications</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-bell"></i>
+                                    </div>
+                                    <a href="#notifications" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-success">
+                                    <div class="inner">
+                                        <h3 id="upcomingToday">3</h3>
+                                        <p>Today's Sessions</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-clock"></i>
+                                    </div>
+                                    <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-danger">
+                                    <div class="inner">
+                                        <h3 id="highRiskSessions">2</h3>
+                                        <p>High Risk Cases</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-exclamation-triangle"></i>
+                                    </div>
+                                    <a href="#patients" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Charts Row -->
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Session Trends</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                                <i class="fas fa-minus"></i>
+                                            </button>
+                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                                <i class="fas fa-times"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="sessionTrendChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Patient Risk Distribution</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="riskDistributionChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recent Activity -->
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Today's Schedule</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="table-responsive">
+                                            <table class="table table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Time</th>
+                                                        <th>Patient</th>
+                                                        <th>Type</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="todayScheduleTable">
+                                                    <tr>
+                                                        <td>09:00</td>
+                                                        <td>John Doe</td>
+                                                        <td>Initial</td>
+                                                        <td><span class="badge badge-success">Confirmed</span></td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>11:00</td>
+                                                        <td>Jane Smith</td>
+                                                        <td>Follow-up</td>
+                                                        <td><span class="badge badge-warning">Pending</span></td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>14:00</td>
+                                                        <td>Bob Johnson</td>
+                                                        <td>Emergency</td>
+                                                        <td><span class="badge badge-danger">High Risk</span></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Recent Notifications</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="timeline">
+                                            <div class="time-label">
+                                                <span class="bg-red">Today</span>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-calendar bg-blue"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 12:05</span>
+                                                    <h3 class="timeline-header">New Session Booking</h3>
+                                                    <div class="timeline-body">
+                                                        John Doe has booked a session for tomorrow at 10:00 AM
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-exclamation-triangle bg-yellow"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 09:30</span>
+                                                    <h3 class="timeline-header">High Risk Alert</h3>
+                                                    <div class="timeline-body">
+                                                        Patient Bob Johnson has been flagged as high risk
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-user bg-green"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 08:15</span>
+                                                    <h3 class="timeline-header">New Patient</h3>
+                                                    <div class="timeline-body">
+                                                        New patient Jane Smith has been assigned to you
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sessions Section -->
+                    <div id="sessions-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">My Sessions</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-primary" onclick="addNewSession()">
+                                                <i class="fas fa-plus"></i> New Session
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row mb-3">
+                                            <div class="col-md-4">
+                                                <select class="form-control" id="sessionStatusFilter">
+                                                    <option value="">All Status</option>
+                                                    <option value="scheduled">Scheduled</option>
+                                                    <option value="completed">Completed</option>
+                                                    <option value="cancelled">Cancelled</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <input type="date" class="form-control" id="sessionDateFilter" placeholder="Filter by date">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <button class="btn btn-success" onclick="refreshSessions()">
+                                                    <i class="fas fa-sync"></i> Refresh
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="table-responsive">
+                                            <table id="sessionsTable" class="table table-bordered table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>ID</th>
+                                                        <th>Patient</th>
+                                                        <th>Date & Time</th>
+                                                        <th>Type</th>
+                                                        <th>Risk Level</th>
+                                                        <th>Status</th>
+                                                        <th>Actions</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="sessionsTableBody">
+                                                    <!-- Data will be loaded here -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <!-- Notifications Section -->
+                    <div id="notifications-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Notifications</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success" onclick="markAllAsRead()">
+                                                <i class="fas fa-check"></i> Mark All Read
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div id="notificationsList">
+                                            <!-- Notifications will be loaded here -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Reports Section -->
+                    <div id="reports-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Reports</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success">
+                                                <i class="fas fa-download"></i> Generate Report
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <div class="card card-primary">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Session Summary</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Generate monthly session summary report</p>
+                                                        <button class="btn btn-primary">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-success">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Patient Progress</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Track patient progress over time</p>
+                                                        <button class="btn btn-success">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-warning">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Risk Assessment</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Detailed risk assessment reports</p>
+                                                        <button class="btn btn-warning">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Profile Section -->
+                    <div id="profile-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <div class="card card-primary card-outline">
+                                    <div class="card-body box-profile">
+                                        <div class="text-center">
+                                            <img class="profile-user-img img-fluid img-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiByeD0iNTAiIGZpbGw9IiMyOGE3NDUiLz4KPHRleHQgeD0iNTAiIHk9IjU4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNDAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SlQ8L3RleHQ+Cjwvc3ZnPgo=" alt="User profile picture" id="profileUserImage">
+                                        </div>
+                                        <h3 class="profile-username text-center" id="profileName">Dr. John Doe</h3>
+                                        <p class="text-muted text-center" id="profileRole">Psychiatrist</p>
+                                        <ul class="list-group list-group-unbordered mb-3">
+                                            <li class="list-group-item">
+                                                <b>Specialization</b> <a class="float-right">Psychiatry</a>
+                                            </li>
+                                            <li class="list-group-item">
+                                                <b>Experience</b> <a class="float-right">8 years</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Profile Information</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <form>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>First Name</label>
+                                                        <input type="text" class="form-control" value="John">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Last Name</label>
+                                                        <input type="text" class="form-control" value="Doe">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Email</label>
+                                                        <input type="email" class="form-control" value="john.doe@aimhsa.rw">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Phone</label>
+                                                        <input type="tel" class="form-control" value="+250 788 123 456">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="form-group">
+                                                <label>Bio</label>
+                                                <textarea class="form-control" rows="3">Experienced psychiatrist specializing in trauma and anxiety disorders.</textarea>
+                                            </div>
+                                            <button type="submit" class="btn btn-primary">Update Profile</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Settings Section -->
+                    <div id="settings-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Settings</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <form>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Notification Preferences</label>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox" checked>
+                                                            <label class="form-check-label">Email Notifications</label>
+                                                        </div>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox" checked>
+                                                            <label class="form-check-label">SMS Notifications</label>
+                                                        </div>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox">
+                                                            <label class="form-check-label">Push Notifications</label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Working Hours</label>
+                                                        <div class="row">
+                                                            <div class="col-6">
+                                                                <input type="time" class="form-control" value="08:00">
+                                                            </div>
+                                                            <div class="col-6">
+                                                                <input type="time" class="form-control" value="17:00">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Session Duration (minutes)</label>
+                                                        <select class="form-control">
+                                                            <option>30</option>
+                                                            <option selected>45</option>
+                                                            <option>60</option>
+                                                            <option>90</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Auto-refresh Interval</label>
+                                                        <select class="form-control">
+                                                            <option>30 seconds</option>
+                                                            <option selected>1 minute</option>
+                                                            <option>5 minutes</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button type="submit" class="btn btn-primary">Save Settings</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+    
+    <!-- Session Notes Modal -->
+    <div class="modal fade" id="sessionNotesModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Add Session Notes</h4>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="sessionNotesForm">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="sessionId">Session ID</label>
+                                    <input type="text" class="form-control" id="sessionId" name="sessionId" readonly>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="patientName">Patient Name</label>
+                                    <input type="text" class="form-control" id="patientName" name="patientName" readonly>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="sessionNotes">Session Notes *</label>
+                            <textarea class="form-control" id="sessionNotes" name="sessionNotes" rows="5" required placeholder="Enter detailed session notes..."></textarea>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="followUpRequired" name="followUpRequired">
+                                <label class="form-check-label" for="followUpRequired">Follow-up Required</label>
+                            </div>
+                        </div>
+                        <div class="form-group" id="followUpDateGroup" style="display: none;">
+                            <label for="followUpDate">Follow-up Date</label>
+                            <input type="date" class="form-control" id="followUpDate" name="followUpDate">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="saveNotesBtn">Save Notes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Emergency Contacts Modal -->
+    <div class="modal fade" id="emergencyModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Emergency Contacts</h4>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="list-group">
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Mental Health Emergency Hotline</h5>
+                            <p class="mb-1">Phone: +250 788 123 456</p>
+                            <small>Available 24/7</small>
+                        </div>
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Rwanda National Police</h5>
+                            <p class="mb-1">Emergency: 112</p>
+                            <small>General: +250 788 831 112</small>
+                        </div>
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Kigali Hospital Emergency</h5>
+                            <p class="mb-1">Phone: +250 788 456 789</p>
+                            <small>Address: Kigali, Rwanda</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </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>
+    <!-- DataTables -->
+    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap4.min.js"></script>
+    <!-- Select2 -->
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- FullCalendar -->
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
+    
+    <!-- Custom JavaScript (preserves existing functionality) -->
+    <script src="professional_advanced.js"></script>
+</body>
+</html>

chatbot/professional_dashboard_clean.html

@@ -0,0 +1,822 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIMHSA Professional Dashboard</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">
+    <!-- Chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap4.min.css">
+    <!-- Select2 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <!-- SweetAlert2 CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <!-- FullCalendar CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS (preserves existing styles) -->
+    <link rel="stylesheet" href="professional.css">
+</head>
+<body class="hold-transition sidebar-mini layout-fixed">
+    <div class="wrapper">
+        <!-- Navbar -->
+        <nav class="main-header navbar navbar-expand navbar-dark navbar-success">
+            <!-- Left navbar links -->
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" data-widget="pushmenu" href="#" role="button">
+                        <i class="fas fa-bars"></i>
+                    </a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link">Dashboard</a>
+                </li>
+                <li class="nav-item d-none d-sm-inline-block">
+                    <a href="#" class="nav-link">Sessions</a>
+                </li>
+            </ul>
+
+            <!-- Right navbar links -->
+            <ul class="navbar-nav ml-auto">
+                <!-- Notifications Dropdown Menu -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-bell"></i>
+                        <span class="badge badge-warning navbar-badge" id="notificationBadge">8</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                        <span class="dropdown-item dropdown-header">8 Notifications</span>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-calendar mr-2"></i> New session booking
+                            <span class="float-right text-muted text-sm">3 mins</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-exclamation-triangle mr-2"></i> High risk assessment
+                            <span class="float-right text-muted text-sm">12 hours</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-user mr-2"></i> New patient assigned
+                            <span class="float-right text-muted text-sm">2 days</span>
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+                    </div>
+                </li>
+                
+                <!-- User Account Dropdown -->
+                <li class="nav-item dropdown">
+                    <a class="nav-link" data-toggle="dropdown" href="#">
+                        <i class="far fa-user"></i>
+                        <span class="ml-2" id="professionalName">Dr. John Doe</span>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-user mr-2"></i> Profile
+                        </a>
+                        <a href="#" class="dropdown-item">
+                            <i class="fas fa-cog mr-2"></i> Settings
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item" id="logoutBtn">
+                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                        </a>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Main Sidebar Container -->
+        <aside class="main-sidebar sidebar-dark-success elevation-4">
+            <!-- Brand Logo -->
+            <a href="#" class="brand-link">
+                <img src="https://via.placeholder.com/33x33/28a745/ffffff?text=MD" alt="AIMHSA Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
+                <span class="brand-text font-weight-light">AIMHSA Professional</span>
+            </a>
+
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <!-- Sidebar user panel -->
+                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+                    <div class="image">
+                        <img src="https://via.placeholder.com/160x160/28a745/ffffff?text=JD" class="img-circle elevation-2" alt="User Image">
+                    </div>
+                    <div class="info">
+                        <a href="#" class="d-block" id="professionalNameSidebar">Dr. John Doe</a>
+                        <small class="text-muted" id="professionalRole">Psychiatrist</small>
+                    </div>
+                </div>
+
+                <!-- Sidebar Menu -->
+                <nav class="mt-2">
+                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+                        <li class="nav-item">
+                            <a href="#dashboard" class="nav-link active" data-section="dashboard">
+                                <i class="nav-icon fas fa-tachometer-alt"></i>
+                                <p>Dashboard</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#sessions" class="nav-link" data-section="sessions">
+                                <i class="nav-icon fas fa-calendar-check"></i>
+                                <p>My Sessions</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#patients" class="nav-link" data-section="patients">
+                                <i class="nav-icon fas fa-users"></i>
+                                <p>My Patients</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#notifications" class="nav-link" data-section="notifications">
+                                <i class="nav-icon fas fa-bell"></i>
+                                <p>Notifications</p>
+                                <span class="badge badge-warning right" id="notificationCount">8</span>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#reports" class="nav-link" data-section="reports">
+                                <i class="nav-icon fas fa-chart-bar"></i>
+                                <p>Reports</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#profile" class="nav-link" data-section="profile">
+                                <i class="nav-icon fas fa-user"></i>
+                                <p>Profile</p>
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#settings" class="nav-link" data-section="settings">
+                                <i class="nav-icon fas fa-cog"></i>
+                                <p>Settings</p>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </aside>
+
+        <!-- Content Wrapper -->
+        <div class="content-wrapper">
+            <!-- Content Header -->
+            <div class="content-header">
+                <div class="container-fluid">
+                    <div class="row mb-2">
+                        <div class="col-sm-6">
+                            <h1 class="m-0" id="pageTitle">Dashboard</h1>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-right">
+                                <li class="breadcrumb-item"><a href="#">Home</a></li>
+                                <li class="breadcrumb-item active" id="breadcrumbActive">Dashboard</li>
+                            </ol>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main content -->
+            <section class="content">
+                <div class="container-fluid">
+                    <!-- Dashboard Section -->
+                    <div id="dashboard-section" class="content-section">
+                        <!-- Info boxes -->
+                        <div class="row">
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-info">
+                                    <div class="inner">
+                                        <h3 id="totalSessions">15</h3>
+                                        <p>Total Sessions</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-calendar-check"></i>
+                                    </div>
+                                    <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-warning">
+                                    <div class="inner">
+                                        <h3 id="unreadNotifications">8</h3>
+                                        <p>Unread Notifications</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-bell"></i>
+                                    </div>
+                                    <a href="#notifications" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-success">
+                                    <div class="inner">
+                                        <h3 id="upcomingToday">3</h3>
+                                        <p>Today's Sessions</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-clock"></i>
+                                    </div>
+                                    <a href="#sessions" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                            <div class="col-lg-3 col-6">
+                                <div class="small-box bg-danger">
+                                    <div class="inner">
+                                        <h3 id="highRiskSessions">2</h3>
+                                        <p>High Risk Cases</p>
+                                    </div>
+                                    <div class="icon">
+                                        <i class="fas fa-exclamation-triangle"></i>
+                                    </div>
+                                    <a href="#patients" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Charts Row -->
+                        <div class="row">
+                            <div class="col-lg-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Session Trends</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                                                <i class="fas fa-minus"></i>
+                                            </button>
+                                            <button type="button" class="btn btn-tool" data-card-widget="remove">
+                                                <i class="fas fa-times"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="sessionTrendChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Patient Risk Distribution</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <canvas id="riskDistributionChart" style="height: 300px;"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Recent Activity -->
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Today's Schedule</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="table-responsive">
+                                            <table class="table table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Time</th>
+                                                        <th>Patient</th>
+                                                        <th>Type</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="todayScheduleTable">
+                                                    <tr>
+                                                        <td>09:00</td>
+                                                        <td>John Doe</td>
+                                                        <td>Initial</td>
+                                                        <td><span class="badge badge-success">Confirmed</span></td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>11:00</td>
+                                                        <td>Jane Smith</td>
+                                                        <td>Follow-up</td>
+                                                        <td><span class="badge badge-warning">Pending</span></td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td>14:00</td>
+                                                        <td>Bob Johnson</td>
+                                                        <td>Emergency</td>
+                                                        <td><span class="badge badge-danger">High Risk</span></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-6">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Recent Notifications</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="timeline">
+                                            <div class="time-label">
+                                                <span class="bg-red">Today</span>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-calendar bg-blue"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 12:05</span>
+                                                    <h3 class="timeline-header">New Session Booking</h3>
+                                                    <div class="timeline-body">
+                                                        John Doe has booked a session for tomorrow at 10:00 AM
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-exclamation-triangle bg-yellow"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 09:30</span>
+                                                    <h3 class="timeline-header">High Risk Alert</h3>
+                                                    <div class="timeline-body">
+                                                        Patient Bob Johnson has been flagged as high risk
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <i class="fas fa-user bg-green"></i>
+                                                <div class="timeline-item">
+                                                    <span class="time"><i class="fas fa-clock"></i> 08:15</span>
+                                                    <h3 class="timeline-header">New Patient</h3>
+                                                    <div class="timeline-body">
+                                                        New patient Jane Smith has been assigned to you
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sessions Section -->
+                    <div id="sessions-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">My Sessions</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-primary" onclick="addNewSession()">
+                                                <i class="fas fa-plus"></i> New Session
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row mb-3">
+                                            <div class="col-md-4">
+                                                <select class="form-control" id="sessionStatusFilter">
+                                                    <option value="">All Status</option>
+                                                    <option value="scheduled">Scheduled</option>
+                                                    <option value="completed">Completed</option>
+                                                    <option value="cancelled">Cancelled</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <input type="date" class="form-control" id="sessionDateFilter" placeholder="Filter by date">
+                                            </div>
+                                            <div class="col-md-4">
+                                                <button class="btn btn-success" onclick="refreshSessions()">
+                                                    <i class="fas fa-sync"></i> Refresh
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="table-responsive">
+                                            <table id="sessionsTable" class="table table-bordered table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>ID</th>
+                                                        <th>Patient</th>
+                                                        <th>Date & Time</th>
+                                                        <th>Type</th>
+                                                        <th>Risk Level</th>
+                                                        <th>Status</th>
+                                                        <th>Actions</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="sessionsTableBody">
+                                                    <!-- Data will be loaded here -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Patients Section -->
+                    <div id="patients-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">My Patients</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-primary">
+                                                <i class="fas fa-plus"></i> Add Patient
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row mb-3">
+                                            <div class="col-md-6">
+                                                <div class="input-group">
+                                                    <input type="text" class="form-control" id="patientSearch" placeholder="Search patients...">
+                                                    <div class="input-group-append">
+                                                        <button class="btn btn-outline-secondary" type="button">
+                                                            <i class="fas fa-search"></i>
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-6">
+                                                <select class="form-control" id="riskLevelFilter">
+                                                    <option value="">All Risk Levels</option>
+                                                    <option value="low">Low</option>
+                                                    <option value="medium">Medium</option>
+                                                    <option value="high">High</option>
+                                                    <option value="critical">Critical</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                        <div class="table-responsive">
+                                            <table id="patientsTable" class="table table-bordered table-striped">
+                                                <thead>
+                                                    <tr>
+                                                        <th>ID</th>
+                                                        <th>Name</th>
+                                                        <th>Age</th>
+                                                        <th>Risk Level</th>
+                                                        <th>Last Session</th>
+                                                        <th>Next Session</th>
+                                                        <th>Actions</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="patientsTableBody">
+                                                    <!-- Data will be loaded here -->
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Notifications Section -->
+                    <div id="notifications-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Notifications</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success" onclick="markAllAsRead()">
+                                                <i class="fas fa-check"></i> Mark All Read
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div id="notificationsList">
+                                            <!-- Notifications will be loaded here -->
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Reports Section -->
+                    <div id="reports-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Reports</h3>
+                                        <div class="card-tools">
+                                            <button type="button" class="btn btn-success">
+                                                <i class="fas fa-download"></i> Generate Report
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col-md-4">
+                                                <div class="card card-primary">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Session Summary</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Generate monthly session summary report</p>
+                                                        <button class="btn btn-primary">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-success">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Patient Progress</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Track patient progress over time</p>
+                                                        <button class="btn btn-success">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="card card-warning">
+                                                    <div class="card-header">
+                                                        <h3 class="card-title">Risk Assessment</h3>
+                                                    </div>
+                                                    <div class="card-body">
+                                                        <p>Detailed risk assessment reports</p>
+                                                        <button class="btn btn-warning">Generate</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Profile Section -->
+                    <div id="profile-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <div class="card card-primary card-outline">
+                                    <div class="card-body box-profile">
+                                        <div class="text-center">
+                                            <img class="profile-user-img img-fluid img-circle" src="https://via.placeholder.com/100x100/28a745/ffffff?text=JD" alt="User profile picture">
+                                        </div>
+                                        <h3 class="profile-username text-center" id="profileName">Dr. John Doe</h3>
+                                        <p class="text-muted text-center" id="profileRole">Psychiatrist</p>
+                                        <ul class="list-group list-group-unbordered mb-3">
+                                            <li class="list-group-item">
+                                                <b>Specialization</b> <a class="float-right">Psychiatry</a>
+                                            </li>
+                                            <li class="list-group-item">
+                                                <b>Experience</b> <a class="float-right">8 years</a>
+                                            </li>
+                                            <li class="list-group-item">
+                                                <b>Patients</b> <a class="float-right">25</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Profile Information</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <form>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>First Name</label>
+                                                        <input type="text" class="form-control" value="John">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Last Name</label>
+                                                        <input type="text" class="form-control" value="Doe">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Email</label>
+                                                        <input type="email" class="form-control" value="john.doe@aimhsa.rw">
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Phone</label>
+                                                        <input type="tel" class="form-control" value="+250 788 123 456">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="form-group">
+                                                <label>Bio</label>
+                                                <textarea class="form-control" rows="3">Experienced psychiatrist specializing in trauma and anxiety disorders.</textarea>
+                                            </div>
+                                            <button type="submit" class="btn btn-primary">Update Profile</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Settings Section -->
+                    <div id="settings-section" class="content-section" style="display: none;">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3 class="card-title">Professional Settings</h3>
+                                    </div>
+                                    <div class="card-body">
+                                        <form>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Notification Preferences</label>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox" checked>
+                                                            <label class="form-check-label">Email Notifications</label>
+                                                        </div>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox" checked>
+                                                            <label class="form-check-label">SMS Notifications</label>
+                                                        </div>
+                                                        <div class="form-check">
+                                                            <input class="form-check-input" type="checkbox">
+                                                            <label class="form-check-label">Push Notifications</label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Working Hours</label>
+                                                        <div class="row">
+                                                            <div class="col-6">
+                                                                <input type="time" class="form-control" value="08:00">
+                                                            </div>
+                                                            <div class="col-6">
+                                                                <input type="time" class="form-control" value="17:00">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Session Duration (minutes)</label>
+                                                        <select class="form-control">
+                                                            <option>30</option>
+                                                            <option selected>45</option>
+                                                            <option>60</option>
+                                                            <option>90</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                                <div class="col-md-6">
+                                                    <div class="form-group">
+                                                        <label>Auto-refresh Interval</label>
+                                                        <select class="form-control">
+                                                            <option>30 seconds</option>
+                                                            <option selected>1 minute</option>
+                                                            <option>5 minutes</option>
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <button type="submit" class="btn btn-primary">Save Settings</button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+    
+    <!-- Session Notes Modal -->
+    <div class="modal fade" id="sessionNotesModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Add Session Notes</h4>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="sessionNotesForm">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="sessionId">Session ID</label>
+                                    <input type="text" class="form-control" id="sessionId" name="sessionId" readonly>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="patientName">Patient Name</label>
+                                    <input type="text" class="form-control" id="patientName" name="patientName" readonly>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="sessionNotes">Session Notes *</label>
+                            <textarea class="form-control" id="sessionNotes" name="sessionNotes" rows="5" required placeholder="Enter detailed session notes..."></textarea>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="followUpRequired" name="followUpRequired">
+                                <label class="form-check-label" for="followUpRequired">Follow-up Required</label>
+                            </div>
+                        </div>
+                        <div class="form-group" id="followUpDateGroup" style="display: none;">
+                            <label for="followUpDate">Follow-up Date</label>
+                            <input type="date" class="form-control" id="followUpDate" name="followUpDate">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="saveNotesBtn">Save Notes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Emergency Contacts Modal -->
+    <div class="modal fade" id="emergencyModal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">Emergency Contacts</h4>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span>&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="list-group">
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Mental Health Emergency Hotline</h5>
+                            <p class="mb-1">Phone: +250 788 123 456</p>
+                            <small>Available 24/7</small>
+                        </div>
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Rwanda National Police</h5>
+                            <p class="mb-1">Emergency: 112</p>
+                            <small>General: +250 788 831 112</small>
+                        </div>
+                        <div class="list-group-item">
+                            <h5 class="mb-1">Kigali Hospital Emergency</h5>
+                            <p class="mb-1">Phone: +250 788 456 789</p>
+                            <small>Address: Kigali, Rwanda</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </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>
+    <!-- DataTables -->
+    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap4.min.js"></script>
+    <!-- Select2 -->
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- FullCalendar -->
+    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
+    
+    <!-- Custom JavaScript (preserves existing functionality) -->
+    <script src="professional_advanced.js"></script>
+</body>
+</html>
+
+
+

chatbot/register.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AIMHSA - Create Account</title>
+    <link rel="stylesheet" href="auth.css" />
+</head>
+<body>
+    <div class="auth-container">
+        <div class="auth-card">
+            <div class="auth-header">
+                <h1 class="brand">AIMHSA</h1>
+                <p class="subtitle">Mental Health Companion for Rwanda</p>
+            </div>
+            
+            <form class="auth-form" id="registerForm" novalidate>
+                <div class="form-group">
+                    <label for="regUsername">Username *</label>
+                    <input type="text" id="regUsername" name="regUsername" 
+                           placeholder="Enter your username" 
+                           minlength="3" maxlength="50" 
+                           pattern="^[a-zA-Z0-9_]+$" 
+                           title="Username can only contain letters, numbers, and underscores"
+                           required />
+                    <div class="field-error" id="regUsernameError"></div>
+                    <div class="field-help">3-50 characters, letters, numbers, and underscores only</div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regEmail">Email Address *</label>
+                    <input type="email" id="regEmail" name="regEmail" 
+                           placeholder="Enter your email address" 
+                           maxlength="100"
+                           title="Enter a valid email address"
+                           required />
+                    <div class="field-error" id="regEmailError"></div>
+                    <div class="field-help">We'll use this to contact you about your account</div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regFullname">Full Name *</label>
+                    <input type="text" id="regFullname" name="regFullname" 
+                           placeholder="Enter your full name" 
+                           minlength="2" maxlength="100"
+                           pattern="^[a-zA-Z\s\-'\.]+$"
+                           title="Enter your full name (letters, spaces, hyphens, apostrophes, and periods only)"
+                           required />
+                    <div class="field-error" id="regFullnameError"></div>
+                    <div class="field-help">Enter your complete name as it appears on official documents</div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regTelephone">Phone Number *</label>
+                    <input type="tel" id="regTelephone" name="regTelephone" 
+                           placeholder="+250XXXXXXXXX or 07XXXXXXXX" 
+                           pattern="^(\+250|0)[0-9]{9}$"
+                           title="Enter a valid Rwanda phone number"
+                           required />
+                    <div class="field-error" id="regTelephoneError"></div>
+                    <div class="field-help">Rwanda format: +250XXXXXXXXX or 07XXXXXXXX</div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regProvince">Province *</label>
+                    <select id="regProvince" name="regProvince" required>
+                        <option value="">Select Province</option>
+                        <option value="Kigali">Kigali</option>
+                        <option value="Eastern">Eastern</option>
+                        <option value="Northern">Northern</option>
+                        <option value="Southern">Southern</option>
+                        <option value="Western">Western</option>
+                    </select>
+                    <div class="field-error" id="regProvinceError"></div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regDistrict">District *</label>
+                    <select id="regDistrict" name="regDistrict" required>
+                        <option value="">Select District</option>
+                    </select>
+                    <div class="field-error" id="regDistrictError"></div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regPassword">Password *</label>
+                    <input type="password" id="regPassword" name="regPassword" 
+                           placeholder="Create a strong password" 
+                           minlength="8" maxlength="128"
+                           title="Password must be at least 8 characters long"
+                           required />
+                    <div class="field-error" id="regPasswordError"></div>
+                    <div class="field-help">At least 8 characters, include letters and numbers</div>
+                    <div class="password-strength-indicator">
+                        <div class="password-strength-bar"></div>
+                    </div>
+                    <div class="password-strength"></div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="regConfirmPassword">Confirm Password *</label>
+                    <input type="password" id="regConfirmPassword" name="regConfirmPassword" 
+                           placeholder="Confirm your password" 
+                           required />
+                    <div class="field-error" id="regConfirmPasswordError"></div>
+                    <div class="field-help">Must match the password above</div>
+                </div>
+                
+                <div class="form-group">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="agreeTerms" name="agreeTerms" required />
+                        <span class="checkmark"></span>
+                        I agree to the <a href="#" target="_blank">Terms of Service</a> and <a href="#" target="_blank">Privacy Policy</a> *
+                    </label>
+                    <div class="field-error" id="agreeTermsError"></div>
+                </div>
+                
+                <button type="submit" class="auth-btn" id="registerBtn">Create Account</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Already have an account? <a href="/login">Sign In</a></p>
+            </div>
+            
+            <div class="auth-footer">
+                <p>By continuing, you agree to our Terms of Service and Privacy Policy</p>
+            </div>
+        </div>
+    </div>
+    
+    <script src="register.js"></script>
+</body>
+</html>

chatbot/register.js

@@ -0,0 +1,647 @@
+(() => {
+    const API_BASE_URL = `http://${window.location.hostname}:${window.location.port || '5057'}`;
+    
+    // Elements
+    const registerForm = document.getElementById('registerForm');
+    const registerBtn = document.getElementById('registerBtn');
+    
+    // Validation state
+    let validationErrors = {};
+    let isSubmitting = false;
+    
+    // API helper
+    async function api(path, opts) {
+        const url = API_BASE_URL + path;
+        const res = await fetch(url, opts);
+        if (!res.ok) {
+            let errorData;
+            try {
+                errorData = await res.json();
+            } catch (e) {
+                const txt = await res.text();
+                errorData = { error: txt || res.statusText };
+            }
+            throw new Error(JSON.stringify(errorData));
+        }
+        return res.json();
+    }
+    
+    // Show message
+    function showMessage(text, type = 'error') {
+        const existing = document.querySelector('.error-message, .success-message');
+        if (existing) existing.remove();
+        
+        const message = document.createElement('div');
+        message.className = type === 'error' ? 'error-message' : 'success-message';
+        message.textContent = text;
+        
+        registerForm.insertBefore(message, registerForm.firstChild);
+        
+        setTimeout(() => message.remove(), 5000);
+    }
+    
+    // Show field error
+    function showFieldError(fieldId, message) {
+        const errorElement = document.getElementById(fieldId + 'Error');
+        if (errorElement) {
+            errorElement.textContent = message;
+            errorElement.classList.add('show');
+        }
+        
+        const inputElement = document.getElementById(fieldId);
+        const formGroup = inputElement ? inputElement.closest('.form-group') : null;
+        
+        if (formGroup) {
+            formGroup.classList.add('error');
+            formGroup.classList.remove('success');
+        }
+    }
+    
+    // Show server validation errors for specific fields
+    function showServerFieldErrors(serverErrors) {
+        const fieldMapping = {
+            'username': 'regUsername',
+            'email': 'regEmail', 
+            'fullname': 'regFullname',
+            'telephone': 'regTelephone',
+            'province': 'regProvince',
+            'district': 'regDistrict',
+            'password': 'regPassword',
+            'confirmPassword': 'regConfirmPassword'
+        };
+        
+        Object.keys(serverErrors).forEach(field => {
+            const fieldId = fieldMapping[field] || 'reg' + field.charAt(0).toUpperCase() + field.slice(1);
+            showFieldError(fieldId, serverErrors[field]);
+        });
+    }
+    
+    // Clear field error
+    function clearFieldError(fieldId) {
+        const errorElement = document.getElementById(fieldId + 'Error');
+        if (errorElement) {
+            errorElement.textContent = '';
+            errorElement.classList.remove('show');
+        }
+        
+        const formGroup = document.getElementById(fieldId).closest('.form-group');
+        if (formGroup) {
+            formGroup.classList.remove('error');
+            formGroup.classList.add('success');
+        }
+    }
+    
+    // Clear all field errors
+    function clearAllFieldErrors() {
+        const fieldIds = ['regUsername', 'regEmail', 'regFullname', 'regTelephone', 'regProvince', 'regDistrict', 'regPassword', 'regConfirmPassword', 'agreeTerms'];
+        fieldIds.forEach(fieldId => clearFieldError(fieldId));
+    }
+    
+    // Clear all generic error messages
+    function clearAllGenericMessages() {
+        const existing = document.querySelector('.error-message, .success-message');
+        if (existing) existing.remove();
+    }
+    
+    // Validate username
+    function validateUsername(username) {
+        if (!username || username.trim() === '') {
+            return 'Username is required';
+        }
+        
+        if (username.length < 3) {
+            return 'Username must be at least 3 characters';
+        }
+        
+        if (username.length > 50) {
+            return 'Username must be less than 50 characters';
+        }
+        
+        if (!/^[a-zA-Z0-9_]+$/.test(username)) {
+            return 'Username can only contain letters, numbers, and underscores';
+        }
+        
+        // Check for reserved usernames
+        const reservedUsernames = ['admin', 'administrator', 'root', 'system', 'api', 'test', 'user', 'guest', 'null', 'undefined'];
+        if (reservedUsernames.includes(username.toLowerCase())) {
+            return 'This username is reserved and cannot be used';
+        }
+        
+        return null;
+    }
+    
+    // Validate email
+    function validateEmail(email) {
+        if (!email || email.trim() === '') {
+            return 'Email address is required';
+        }
+        
+        if (email.length > 100) {
+            return 'Email address must be less than 100 characters';
+        }
+        
+        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        if (!emailPattern.test(email)) {
+            return 'Please enter a valid email address';
+        }
+        
+        // Check for common email providers
+        const commonDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com'];
+        const domain = email.split('@')[1]?.toLowerCase();
+        if (domain && !commonDomains.includes(domain) && !domain.includes('.')) {
+            return 'Please enter a valid email address';
+        }
+        
+        return null;
+    }
+    
+    // Validate full name
+    function validateFullName(fullname) {
+        if (!fullname || fullname.trim() === '') {
+            return 'Full name is required';
+        }
+        
+        if (fullname.length < 2) {
+            return 'Full name must be at least 2 characters';
+        }
+        
+        if (fullname.length > 100) {
+            return 'Full name must be less than 100 characters';
+        }
+        
+        if (!/^[a-zA-Z\s\-'\.]+$/.test(fullname)) {
+            return 'Full name can only contain letters, spaces, hyphens, apostrophes, and periods';
+        }
+        
+        // Check for minimum words
+        const words = fullname.trim().split(/\s+/);
+        if (words.length < 2) {
+            return 'Please enter your complete name (first and last name)';
+        }
+        
+        return null;
+    }
+    
+    // Validate phone number
+    function validatePhone(telephone) {
+        if (!telephone || telephone.trim() === '') {
+            return 'Phone number is required';
+        }
+        
+        // Remove all spaces and special characters except + and digits
+        const cleanPhone = telephone.replace(/[^\d+]/g, '');
+        
+        // Check Rwanda phone number format
+        const phonePattern = /^(\+250|0)[0-9]{9}$/;
+        if (!phonePattern.test(cleanPhone)) {
+            return 'Please enter a valid Rwanda phone number (+250XXXXXXXXX or 07XXXXXXXX)';
+        }
+        
+        // Additional validation for specific prefixes
+        if (cleanPhone.startsWith('0')) {
+            const prefix = cleanPhone.substring(0, 3);
+            const validPrefixes = ['078', '079', '072', '073', '074', '075', '076', '077'];
+            if (!validPrefixes.includes(prefix)) {
+                return 'Please enter a valid Rwanda mobile number';
+            }
+        }
+        
+        return null;
+    }
+    
+    // Validate password
+    function validatePassword(password) {
+        if (!password || password === '') {
+            return 'Password is required';
+        }
+        
+        if (password.length < 8) {
+            return 'Password must be at least 8 characters long';
+        }
+        
+        if (password.length > 128) {
+            return 'Password must be less than 128 characters';
+        }
+        
+        // Check for at least one letter and one number
+        if (!/[a-zA-Z]/.test(password)) {
+            return 'Password must contain at least one letter';
+        }
+        
+        if (!/[0-9]/.test(password)) {
+            return 'Password must contain at least one number';
+        }
+        
+        // Check for common weak passwords
+        const weakPasswords = ['password', '123456', '12345678', 'qwerty', 'abc123', 'password123', 'admin', 'letmein'];
+        if (weakPasswords.includes(password.toLowerCase())) {
+            return 'This password is too common. Please choose a stronger password';
+        }
+        
+        return null;
+    }
+    
+    // Validate password confirmation
+    function validatePasswordConfirmation(password, confirmPassword) {
+        if (!confirmPassword || confirmPassword === '') {
+            return 'Please confirm your password';
+        }
+        
+        if (password !== confirmPassword) {
+            return 'Passwords do not match';
+        }
+        
+        return null;
+    }
+    
+    // Validate province
+    function validateProvince(province) {
+        if (!province || province === '') {
+            return 'Please select a province';
+        }
+        
+        const validProvinces = ['Kigali', 'Eastern', 'Northern', 'Southern', 'Western'];
+        if (!validProvinces.includes(province)) {
+            return 'Please select a valid province';
+        }
+        
+        return null;
+    }
+    
+    // Validate district
+    function validateDistrict(district, province) {
+        if (!district || district === '') {
+            return 'Please select a district';
+        }
+        
+        if (!province || province === '') {
+            return 'Please select a province first';
+        }
+        
+        const validDistricts = getDistrictsForProvince(province);
+        if (!validDistricts.includes(district)) {
+            return 'Please select a valid district for the selected province';
+        }
+        
+        return null;
+    }
+    
+    // Validate terms agreement
+    function validateTerms(agreeTerms) {
+        if (!agreeTerms) {
+            return 'You must agree to the Terms of Service and Privacy Policy';
+        }
+        
+        return null;
+    }
+    
+    // Get districts for province
+    function getDistrictsForProvince(province) {
+        const provinceDistricts = {
+            'Kigali': ['Gasabo', 'Kicukiro', 'Nyarugenge'],
+            'Eastern': ['Bugesera', 'Gatsibo', 'Kayonza', 'Kirehe', 'Ngoma', 'Nyagatare', 'Rwamagana'],
+            'Northern': ['Burera', 'Gakenke', 'Gicumbi', 'Musanze', 'Rulindo'],
+            'Southern': ['Gisagara', 'Huye', 'Kamonyi', 'Muhanga', 'Nyamagabe', 'Nyanza', 'Nyaruguru', 'Ruhango'],
+            'Western': ['Karongi', 'Ngororero', 'Nyabihu', 'Nyamasheke', 'Rubavu', 'Rusizi', 'Rutsiro']
+        };
+        return provinceDistricts[province] || [];
+    }
+    
+    // Calculate password strength
+    function calculatePasswordStrength(password) {
+        let score = 0;
+        
+        if (password.length >= 8) score += 1;
+        if (password.length >= 12) score += 1;
+        if (/[a-z]/.test(password)) score += 1;
+        if (/[A-Z]/.test(password)) score += 1;
+        if (/[0-9]/.test(password)) score += 1;
+        if (/[^a-zA-Z0-9]/.test(password)) score += 1;
+        
+        if (score <= 2) return 'weak';
+        if (score <= 4) return 'medium';
+        return 'strong';
+    }
+    
+    // Update password strength indicator
+    function updatePasswordStrength(password) {
+        const strength = calculatePasswordStrength(password);
+        const strengthElement = document.querySelector('.password-strength');
+        const strengthBar = document.querySelector('.password-strength-bar');
+        
+        if (strengthElement && strengthBar) {
+            strengthElement.textContent = `Password strength: ${strength}`;
+            strengthElement.className = `password-strength ${strength}`;
+            strengthBar.className = `password-strength-bar ${strength}`;
+        }
+    }
+    
+    // Real-time validation
+    function setupRealTimeValidation() {
+        // Username validation
+        document.getElementById('regUsername').addEventListener('blur', function() {
+            const error = validateUsername(this.value);
+            if (error) {
+                showFieldError('regUsername', error);
+            } else {
+                clearFieldError('regUsername');
+            }
+        });
+        
+        // Email validation
+        document.getElementById('regEmail').addEventListener('blur', function() {
+            const error = validateEmail(this.value);
+            if (error) {
+                showFieldError('regEmail', error);
+            } else {
+                clearFieldError('regEmail');
+            }
+        });
+        
+        // Full name validation
+        document.getElementById('regFullname').addEventListener('blur', function() {
+            const error = validateFullName(this.value);
+            if (error) {
+                showFieldError('regFullname', error);
+            } else {
+                clearFieldError('regFullname');
+            }
+        });
+        
+        // Phone validation
+        document.getElementById('regTelephone').addEventListener('blur', function() {
+            const error = validatePhone(this.value);
+            if (error) {
+                showFieldError('regTelephone', error);
+            } else {
+                clearFieldError('regTelephone');
+            }
+        });
+        
+        // Province validation
+        document.getElementById('regProvince').addEventListener('change', function() {
+            const error = validateProvince(this.value);
+            if (error) {
+                showFieldError('regProvince', error);
+            } else {
+                clearFieldError('regProvince');
+            }
+        });
+        
+        // District validation
+        document.getElementById('regDistrict').addEventListener('change', function() {
+            const province = document.getElementById('regProvince').value;
+            const error = validateDistrict(this.value, province);
+            if (error) {
+                showFieldError('regDistrict', error);
+            } else {
+                clearFieldError('regDistrict');
+            }
+        });
+        
+        // Password validation
+        document.getElementById('regPassword').addEventListener('input', function() {
+            updatePasswordStrength(this.value);
+            const error = validatePassword(this.value);
+            if (error) {
+                showFieldError('regPassword', error);
+            } else {
+                clearFieldError('regPassword');
+            }
+        });
+        
+        // Password confirmation validation
+        document.getElementById('regConfirmPassword').addEventListener('blur', function() {
+            const password = document.getElementById('regPassword').value;
+            const error = validatePasswordConfirmation(password, this.value);
+            if (error) {
+                showFieldError('regConfirmPassword', error);
+            } else {
+                clearFieldError('regConfirmPassword');
+            }
+        });
+        
+        // Terms validation
+        document.getElementById('agreeTerms').addEventListener('change', function() {
+            const error = validateTerms(this.checked);
+            if (error) {
+                showFieldError('agreeTerms', error);
+            } else {
+                clearFieldError('agreeTerms');
+            }
+        });
+    }
+    
+    // Validate all fields
+    function validateAllFields() {
+        const username = document.getElementById('regUsername').value.trim();
+        const email = document.getElementById('regEmail').value.trim();
+        const fullname = document.getElementById('regFullname').value.trim();
+        const telephone = document.getElementById('regTelephone').value.trim();
+        const province = document.getElementById('regProvince').value;
+        const district = document.getElementById('regDistrict').value;
+        const password = document.getElementById('regPassword').value;
+        const confirmPassword = document.getElementById('regConfirmPassword').value;
+        const agreeTerms = document.getElementById('agreeTerms').checked;
+        
+        validationErrors = {};
+        
+        // Validate each field
+        const usernameError = validateUsername(username);
+        if (usernameError) validationErrors.username = usernameError;
+        
+        const emailError = validateEmail(email);
+        if (emailError) validationErrors.email = emailError;
+        
+        const fullnameError = validateFullName(fullname);
+        if (fullnameError) validationErrors.fullname = fullnameError;
+        
+        const telephoneError = validatePhone(telephone);
+        if (telephoneError) validationErrors.telephone = telephoneError;
+        
+        const provinceError = validateProvince(province);
+        if (provinceError) validationErrors.province = provinceError;
+        
+        const districtError = validateDistrict(district, province);
+        if (districtError) validationErrors.district = districtError;
+        
+        const passwordError = validatePassword(password);
+        if (passwordError) validationErrors.password = passwordError;
+        
+        const confirmPasswordError = validatePasswordConfirmation(password, confirmPassword);
+        if (confirmPasswordError) validationErrors.confirmPassword = confirmPasswordError;
+        
+        const termsError = validateTerms(agreeTerms);
+        if (termsError) validationErrors.terms = termsError;
+        
+        // Show all errors
+        Object.keys(validationErrors).forEach(field => {
+            showFieldError('reg' + field.charAt(0).toUpperCase() + field.slice(1), validationErrors[field]);
+        });
+        
+        return Object.keys(validationErrors).length === 0;
+    }
+    
+    // Redirect to main app
+    function redirectToApp(account = null) {
+        if (account) {
+            localStorage.setItem('aimhsa_account', account);
+        }
+        window.location.href = '/index.html';
+    }
+    
+    // Registration form submission
+    registerForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        if (isSubmitting) return;
+        
+        // Clear previous errors
+        clearAllFieldErrors();
+        clearAllGenericMessages();
+        
+        // Validate all fields
+        if (!validateAllFields()) {
+            showMessage('Please correct the errors below');
+            return;
+        }
+        
+        const username = document.getElementById('regUsername').value.trim();
+        const email = document.getElementById('regEmail').value.trim();
+        const fullname = document.getElementById('regFullname').value.trim();
+        const telephone = document.getElementById('regTelephone').value.trim();
+        const province = document.getElementById('regProvince').value;
+        const district = document.getElementById('regDistrict').value;
+        const password = document.getElementById('regPassword').value;
+        
+        isSubmitting = true;
+        registerBtn.disabled = true;
+        registerBtn.textContent = 'Creating account...';
+        
+        try {
+            const response = await api('/api/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                    username, 
+                    email, 
+                    fullname, 
+                    telephone, 
+                    province, 
+                    district, 
+                    password 
+                })
+            });
+            
+            showMessage('Account created successfully! Redirecting...', 'success');
+            setTimeout(() => redirectToApp(username), 1500);
+        } catch (err) {
+            console.log('Registration error:', err);
+            
+            // Parse server error response for specific field errors
+            let serverErrors = {};
+            let genericError = 'Registration failed. Please check the errors below.';
+            
+            try {
+                // Try to parse JSON error response
+                const errorData = JSON.parse(err.message);
+                console.log('Parsed error data:', errorData);
+                
+                if (errorData.errors) {
+                    serverErrors = errorData.errors;
+                    console.log('Server errors:', serverErrors);
+                } else if (errorData.error) {
+                    genericError = errorData.error;
+                }
+            } catch (parseError) {
+                console.log('Could not parse error as JSON:', parseError);
+                // If not JSON, check for specific error patterns
+                const errorText = err.message.toLowerCase();
+                
+                if (errorText.includes('username')) {
+                    if (errorText.includes('already exists') || errorText.includes('taken')) {
+                        serverErrors.username = 'This username is already taken. Please choose another.';
+                    } else if (errorText.includes('invalid')) {
+                        serverErrors.username = 'Invalid username format.';
+                    }
+                } else if (errorText.includes('email')) {
+                    if (errorText.includes('already exists') || errorText.includes('taken')) {
+                        serverErrors.email = 'This email is already registered. Please use a different email.';
+                    } else if (errorText.includes('invalid')) {
+                        serverErrors.email = 'Invalid email format.';
+                    }
+                } else if (errorText.includes('phone') || errorText.includes('telephone')) {
+                    serverErrors.telephone = 'Invalid phone number format.';
+                } else if (errorText.includes('password')) {
+                    serverErrors.password = 'Password does not meet requirements.';
+                } else if (errorText.includes('province')) {
+                    serverErrors.province = 'Please select a valid province.';
+                } else if (errorText.includes('district')) {
+                    serverErrors.district = 'Please select a valid district.';
+                }
+            }
+            
+            // Show specific field errors
+            if (Object.keys(serverErrors).length > 0) {
+                console.log('Showing field errors:', serverErrors);
+                
+                // Clear any existing generic error messages
+                clearAllGenericMessages();
+                
+                // Show server validation errors for each field
+                showServerFieldErrors(serverErrors);
+                
+                // Show generic message if there are field errors
+                showMessage('Please correct the errors below');
+                return; // Exit after showing field errors
+            }
+            
+            // Only show generic message if no specific field errors
+            console.log('Showing generic error:', genericError);
+            showMessage(genericError);
+        } finally {
+            isSubmitting = false;
+            registerBtn.disabled = false;
+            registerBtn.textContent = 'Create Account';
+        }
+    });
+    
+    // Province/District mapping for Rwanda
+    const provinceDistricts = {
+        'Kigali': ['Gasabo', 'Kicukiro', 'Nyarugenge'],
+        'Eastern': ['Bugesera', 'Gatsibo', 'Kayonza', 'Kirehe', 'Ngoma', 'Nyagatare', 'Rwamagana'],
+        'Northern': ['Burera', 'Gakenke', 'Gicumbi', 'Musanze', 'Rulindo'],
+        'Southern': ['Gisagara', 'Huye', 'Kamonyi', 'Muhanga', 'Nyamagabe', 'Nyanza', 'Nyaruguru', 'Ruhango'],
+        'Western': ['Karongi', 'Ngororero', 'Nyabihu', 'Nyamasheke', 'Rubavu', 'Rusizi', 'Rutsiro']
+    };
+    
+    // Handle province change to filter districts
+    document.getElementById('regProvince').addEventListener('change', function() {
+        const province = this.value;
+        const districtSelect = document.getElementById('regDistrict');
+        
+        // Clear existing options except the first one
+        districtSelect.innerHTML = '<option value="">Select District</option>';
+        
+        if (province && provinceDistricts[province]) {
+            provinceDistricts[province].forEach(district => {
+                const option = document.createElement('option');
+                option.value = district;
+                option.textContent = district;
+                districtSelect.appendChild(option);
+            });
+        }
+        
+        // Clear district error when province changes
+        clearFieldError('regDistrict');
+    });
+    
+    // Initialize real-time validation
+    setupRealTimeValidation();
+    
+    // Check if already logged in
+    const account = localStorage.getItem('aimhsa_account');
+    if (account && account !== 'null') {
+        redirectToApp(account);
+    }
+})();

chatbot/style.css

@@ -0,0 +1,612 @@
+:root {
+    --primary: #7c3aed;
+    --primary-light: #a855f7;
+    --primary-dark: #5b21b6;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --card: #334155;
+    --text: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --border-light: #475569;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --composer-height: 80px;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--background);
+    color: var(--text);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.app {
+    display: flex;
+    height: 100vh;
+    background: var(--background);
+}
+
+/* Sidebar */
+.sidebar {
+    width: 320px;
+    background: linear-gradient(180deg, #111827 0%, #0f172a 60%);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.sidebar-header {
+    padding: 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    background: rgba(255,255,255,0.02);
+    padding: 10px;
+    border-radius: 12px;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    background: var(--primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: white;
+}
+
+.user-details .username {
+    font-weight: 600;
+    color: var(--text);
+    font-size: 16px;
+}
+
+.user-details .status {
+    font-size: 12px;
+    color: var(--success);
+}
+
+.new-chat-btn {
+    width: 100%;
+    padding: 12px 16px;
+    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25);
+}
+
+.new-chat-btn:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+}
+
+.history-section {
+    flex: 1;
+    padding: 20px 24px;
+    overflow-y: auto;
+}
+
+.history-section h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #a5b4fc;
+    margin-bottom: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.history-item {
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    font-size: 14px;
+    border: 1px solid transparent;
+}
+
+.history-item:hover {
+    background: rgba(124,58,237,0.12);
+    border-color: rgba(124,58,237,0.25);
+    color: var(--text);
+}
+
+.history-item.active {
+    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 6px 16px rgba(124,58,237,0.35);
+}
+
+.history-preview {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* three-dot menu */
+.history-menu-btn {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    display: none;
+    cursor: pointer;
+    padding: 4px 6px;
+    border-radius: 6px;
+}
+
+.history-item:hover .history-menu-btn,
+.history-item.active .history-menu-btn { display: inline-flex; }
+
+.history-menu-btn:hover { background: var(--card); }
+
+.history-menu {
+    position: absolute;
+    right: 8px;
+    top: calc(100% - 6px);
+    min-width: 140px;
+    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    display: none;
+    z-index: 10;
+}
+
+.history-menu.open { display: block; }
+
+.history-menu button {
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 10px 12px;
+    cursor: pointer;
+}
+
+.history-menu button:hover { background: #374151; color: var(--text); }
+.history-menu .danger { color: #f87171; }
+.history-menu .danger:hover { background: rgba(248, 113, 113, 0.15); }
+
+/* inline delete button for history items */
+.history-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    padding-right: 36px; /* reserve space for delete icon */
+}
+
+.history-delete {
+    display: none;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.history-item:hover .history-delete {
+    display: inline-flex;
+}
+
+/* Always show delete on the active item */
+.history-item.active .history-delete {
+    display: inline-flex;
+}
+
+.history-delete:hover {
+    color: #fff;
+    background: rgba(239, 68, 68, 0.18);
+}
+
+.sidebar-footer {
+    padding: 24px;
+    border-top: 1px solid var(--border);
+}
+
+.logout-btn {
+    width: 100%;
+    padding: 10px;
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.logout-btn:hover {
+    background: var(--danger);
+    color: white;
+    border-color: var(--danger);
+}
+
+/* Chat Area */
+.chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    height: 100vh;
+    position: relative;
+}
+
+.chat-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--surface);
+    flex-shrink: 0;
+}
+
+.chat-title h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary);
+    margin-bottom: 4px;
+}
+
+.chat-subtitle {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.chat-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.action-btn {
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text-secondary);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+    background: var(--card);
+    color: var(--text);
+}
+
+.action-btn.danger:hover {
+    background: var(--danger);
+    color: white;
+    border-color: var(--danger);
+}
+
+/* Messages Container - Fixed height calculation */
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px;
+    padding-bottom: calc(var(--composer-height) + 24px);
+    background: var(--background);
+}
+
+.messages {
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    min-height: 0;
+}
+
+.msg {
+    display: flex;
+    max-width: 80%;
+    animation: fadeIn 0.3s ease;
+}
+
+.msg.user {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.msg.bot {
+    align-self: flex-start;
+}
+
+.msg-content {
+    background: var(--surface);
+    padding: 16px 20px;
+    border-radius: 18px;
+    box-shadow: var(--shadow);
+    position: relative;
+    border: 1px solid var(--border);
+}
+
+.msg.user .msg-content {
+    background: var(--primary);
+    color: white;
+    border-bottom-right-radius: 6px;
+    border-color: var(--primary-dark);
+}
+
+.msg.bot .msg-content {
+    border-bottom-left-radius: 6px;
+}
+
+.msg-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.msg.user .msg-meta {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.msg-text {
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Message Composer - Fixed positioning */
+.message-composer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px 24px;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    height: var(--composer-height);
+    display: flex;
+    align-items: center;
+    z-index: 100;
+}
+
+.composer-input {
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-end;
+    gap: 12px;
+    background: var(--background);
+    border: 2px solid var(--border);
+    border-radius: 24px;
+    padding: 12px 8px 12px 20px;
+    transition: all 0.2s ease;
+    width: 100%;
+    min-height: 56px;
+}
+
+.composer-input:focus-within {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
+}
+
+.composer-input textarea,
+.composer-input input[type="text"] {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    color: var(--text);
+    outline: none;
+    resize: none;
+    min-height: 24px;
+    max-height: 120px;
+    line-height: 1.5;
+    font-family: inherit;
+    padding: 8px 0;
+}
+
+.composer-input textarea::placeholder,
+.composer-input input[type="text"]::placeholder {
+    color: var(--text-muted);
+}
+
+.composer-input textarea {
+    overflow-y: auto;
+}
+
+.file-upload-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--card);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 18px;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.file-upload-btn:hover {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+.file-upload-btn input {
+    display: none;
+}
+
+.send-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.send-btn:hover {
+    background: var(--primary-dark);
+    transform: scale(1.05);
+}
+
+.send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Typing Indicator */
+.typing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 20px;
+    background: var(--surface);
+    border-radius: 18px;
+    border-bottom-left-radius: 6px;
+    box-shadow: var(--shadow);
+    max-width: 80px;
+    border: 1px solid var(--border);
+}
+
+.typing-dots {
+    display: flex;
+    gap: 4px;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--text-muted);
+    border-radius: 50%;
+    animation: typing 1.5s infinite;
+}
+
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+/* Drag and Drop */
+.app.dragging::after {
+    content: "Drop PDF file here";
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--primary);
+    background: rgba(124, 58, 237, 0.1);
+    border: 3px dashed var(--primary);
+    z-index: 1000;
+    pointer-events: none;
+    animation: pulse 2s infinite;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes typing {
+    0%, 60%, 100% { transform: translateY(0); }
+    30% { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+    0%, 100% { background: rgba(124, 58, 237, 0.05); }
+    50% { background: rgba(124, 58, 237, 0.1); }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 280px;
+    }
+    
+    .chat-header {
+        padding: 16px;
+    }
+    
+    .messages-container {
+        padding: 16px;
+        padding-bottom: calc(var(--composer-height) + 16px);
+    }
+    
+    .message-composer {
+        padding: 16px;
+    }
+}

check_professional_data.py

@@ -0,0 +1,83 @@
+#!/usr/bin/env python3
+"""
+Check professional ID and fix the API query
+"""
+
+import sqlite3
+
+def check_professional_data():
+    """Check professional data and fix the query"""
+    
+    DB_FILE = "aimhsa.db"
+    
+    try:
+        conn = sqlite3.connect(DB_FILE)
+        
+        print("="*60)
+        print("CHECKING PROFESSIONAL DATA")
+        print("="*60)
+        
+        # Check professionals
+        professionals = conn.execute("""
+            SELECT id, username, first_name, last_name, email
+            FROM professionals 
+            ORDER BY id
+        """).fetchall()
+        
+        print(f"Found {len(professionals)} professionals:")
+        for p in professionals:
+            print(f"   ID: {p[0]} | Username: {p[1]} | Name: {p[2]} {p[3]} | Email: {p[4]}")
+        
+        # Check the specific booking
+        booking = conn.execute("""
+            SELECT booking_id, user_account, professional_id, risk_level, risk_score
+            FROM automated_bookings 
+            WHERE booking_id = 'd63a7794-a89c-452c-80a6-24691e3cb848'
+        """).fetchone()
+        
+        if booking:
+            print(f"\nBooking found:")
+            print(f"   Booking ID: {booking[0]}")
+            print(f"   User Account: {booking[1]}")
+            print(f"   Professional ID: {booking[2]}")
+            print(f"   Risk Level: {booking[3]}")
+            print(f"   Risk Score: {booking[4]}")
+        else:
+            print("\n❌ Booking not found")
+        
+        # Test the exact query from the API with the correct professional ID
+        if booking:
+            professional_id = booking[2]
+            print(f"\nTesting API query with professional ID: {professional_id}")
+            
+            test_query = conn.execute("""
+                SELECT ab.booking_id, ab.conv_id, ab.user_account, ab.user_ip, ab.risk_level, ab.risk_score,
+                       ab.detected_indicators, ab.conversation_summary, ab.booking_status, 
+                       ab.scheduled_datetime, ab.session_type, ab.created_ts, ab.updated_ts,
+                       u.fullname, u.email, u.telephone, u.province, u.district, u.created_at
+                FROM automated_bookings ab
+                LEFT JOIN users u ON ab.user_account = u.username
+                WHERE ab.booking_id = ? AND ab.professional_id = ?
+            """, ('d63a7794-a89c-452c-80a6-24691e3cb848', professional_id)).fetchone()
+            
+            if test_query:
+                print("✅ API query successful!")
+                print(f"   Booking ID: {test_query[0]}")
+                print(f"   User Account: {test_query[2]}")
+                print(f"   Full Name: {test_query[13]}")
+                print(f"   Email: {test_query[14]}")
+                print(f"   Phone: {test_query[15]}")
+                print(f"   Province: {test_query[16]}")
+                print(f"   District: {test_query[17]}")
+                print(f"   Created At: {test_query[18]}")
+            else:
+                print("❌ API query failed - no results")
+        
+        conn.close()
+        
+    except Exception as e:
+        print(f"❌ Database Error: {e}")
+
+if __name__ == "__main__":
+    check_professional_data()
+

config.py

@@ -0,0 +1,84 @@
+"""
+AIMHSA Configuration Management
+Handles environment-specific configuration for hosting
+"""
+
+import os
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+class Config:
+    """Base configuration class"""
+    
+    # Server Configuration
+    HOST = os.getenv('SERVER_HOST', '0.0.0.0')
+    PORT = int(os.getenv('SERVER_PORT', '5057'))
+    DEBUG = os.getenv('DEBUG', 'False').lower() == 'true'
+    
+    # API Configuration
+    API_BASE_URL = os.getenv('API_BASE_URL', '')  # Empty means relative URLs
+    FRONTEND_URL = os.getenv('FRONTEND_URL', '')  # Empty means same origin
+    
+    # Database Configuration
+    DB_FILE = os.getenv('DB_FILE', 'storage/conversations.db')
+    
+    # Ollama Configuration
+    OLLAMA_BASE_URL = os.getenv('OLLAMA_BASE_URL', 'http://localhost:11434/v1')
+    OLLAMA_API_KEY = os.getenv('OLLAMA_API_KEY', 'ollama')
+    
+    # AI Models
+    CHAT_MODEL = os.getenv('CHAT_MODEL', 'llama3.2:3b')
+    EMBED_MODEL = os.getenv('EMBED_MODEL', 'nomic-embed-text')
+    SENT_EMBED_MODEL = os.getenv('SENT_EMBED_MODEL', 'nomic-embed-text')
+    
+    # Email Configuration
+    SMTP_SERVER = os.getenv('SMTP_SERVER', 'smtp.gmail.com')
+    SMTP_PORT = int(os.getenv('SMTP_PORT', '587'))
+    SMTP_USERNAME = os.getenv('SMTP_USERNAME', '')
+    SMTP_PASSWORD = os.getenv('SMTP_PASSWORD', '')
+    FROM_EMAIL = os.getenv('FROM_EMAIL', 'noreply@aimhsa.rw')
+    
+    # SMS Configuration
+    HDEV_SMS_API_ID = os.getenv('HDEV_SMS_API_ID', '')
+    HDEV_SMS_API_KEY = os.getenv('HDEV_SMS_API_KEY', '')
+    
+    # Storage Configuration
+    STORAGE_DIR = os.getenv('STORAGE_DIR', 'storage')
+    DATA_DIR = os.getenv('DATA_DIR', 'data')
+    EMBED_FILE = os.path.join(STORAGE_DIR, 'embeddings.json')
+
+class DevelopmentConfig(Config):
+    """Development environment configuration"""
+    DEBUG = True
+    HOST = '0.0.0.0'
+    PORT = 5057
+
+class ProductionConfig(Config):
+    """Production environment configuration"""
+    DEBUG = False
+    HOST = '0.0.0.0'
+    PORT = int(os.getenv('PORT', '8000'))  # Common for hosting services
+
+class TestingConfig(Config):
+    """Testing environment configuration"""
+    DEBUG = True
+    HOST = '127.0.0.1'
+    PORT = 5058
+    DB_FILE = 'test_conversations.db'
+
+# Configuration mapping
+config_map = {
+    'development': DevelopmentConfig,
+    'production': ProductionConfig,
+    'testing': TestingConfig
+}
+
+def get_config():
+    """Get configuration based on environment"""
+    env = os.getenv('FLASK_ENV', 'development')
+    return config_map.get(env, DevelopmentConfig)
+
+# Export current config
+current_config = get_config()

data/mental-health-overview.txt

@@ -0,0 +1,14 @@
+Mental health refers to emotional, psychological, and social well-being. In Rwanda, depression, anxiety, and trauma-related disorders are common, especially after the 1994 genocide against the Tutsi.
+
+Common symptoms:
+- Persistent sadness or hopelessness
+- Difficulty sleeping or concentrating
+- Feeling anxious, panicked, or restless
+- Loss of interest in daily activities
+
+Healthy coping strategies:
+1. Talk to someone you trust — friend, family, or counselor.
+2. Practice relaxation techniques: deep breathing, meditation, prayer.
+3. Stay physically active: exercise improves mood.
+4. Avoid alcohol or drug abuse.
+5. Seek professional help when needed.

data/ptsd-trauma-guide.txt

@@ -0,0 +1,14 @@
+Post-Traumatic Stress Disorder (PTSD) is common in Rwanda due to the 1994 genocide, domestic violence, and conflict-related trauma.
+
+Symptoms:
+- Flashbacks or nightmares
+- Emotional numbness
+- Sudden anger or irritability
+- Fear of crowds or loud sounds
+
+Healing strategies:
+- Trauma counseling (available at CARAES Ndera & ARCT Ruhuka)
+- Group therapy for survivors
+- Writing therapy: journaling personal experiences
+- Breathing exercises for grounding
+- Social support networks in local communities

data/rwanda-helplines.txt

@@ -0,0 +1,48 @@
+🇷🇼 Rwanda Emergency Mental Health Contacts:
+
+- CARAES Ndera Hospital: +250 788 305 703
+- Mental Health Hotline: 105
+- HDI Rwanda Counseling: +250 782 290 352
+- ARCT Ruhuka Trauma Counseling: +250 788 304 454
+- Youth Helpline: 116
+
+Mental Health Facilities in Rwanda — Full District Coverage
+
+1. CARAES Ndera Neuropsychiatric Teaching Hospital located in Gasabo District, Kigali City  
+2. CARAES Butare (Ndera branch) located in – Huye District, Southern Province  
+3. Icyizere Psychotherapeutic Center (Ndera branch)located in – Kicukiro District, Kigali City  
+4. Kigali Mental Health Referral Centre located in – Gasabo District, Kigali City  
+5. Service de Consultation Psycho-Sociale (SCPS), CHUK located in – Nyarugenge District, Kigali City  
+6. Mental health departments at referral hospitals:
+   - University Teaching Hospital of Kigali (CHUK) located in – Nyarugenge District, Kigali City  
+   - University Teaching Hospital of Butare (CHUB) located in – Huye District, Southern Province  
+   - Rwanda Military Hospital located in – Kicukiro District, Kigali City  
+   - King Faisal Hospital located in – Gasabo District, Kigali City  
+7. Health facilities in all **district hospitals**—mental health departments present across every district:contentReference[oaicite:0]{index=0}  
+
+Major District-Level Facilities by Province:
+**Northern Province**:
+- Ruhengeri Hospital located in – Musanze District  
+- Butaro Hospital located in – Burera District (Butaro Sector):contentReference[oaicite:1]{index=1}  
+
+**Eastern Province**:
+- Kibungo Referral Hospital located in – Ngoma District  
+- Kiziguro District Hospital located in – Gatsibo District  
+- Rwinkwavu District Hospital located in – Kayonza District:contentReference[oaicite:2]{index=2}  
+
+**Western Province**:
+- Gisenyi District Hospital located in – Rubavu District  
+- Kibuye Referral Hospital located in – Karongi District:contentReference[oaicite:3]{index=3}  
+
+**Southern Province**:
+- Kabutare Hospital located in– Huye District  
+- Kabgayi Hospital located in– Muhanga District  
+- Byumba Hospital located in– Gicumbi District  
+- Nyanza Hospital located in– Nyanza District  
+- Nyamata Hospital located in– Bugesera District  
+- Others (Kigeme, Gitwe, etc.) offer mental health services:contentReference[oaicite:4]{index=4}  
+
+
+In case of immediate danger or suicidal thoughts:
+Call 112 for the Rwanda National Police.
+

data/rwanda-mental-health-policy.txt

@@ -0,0 +1,13 @@
+Rwanda's National Mental Health Policy (2022) aims to integrate mental health care into all levels of the health system.
+
+Key objectives:
+- Strengthen mental health services at district hospitals and health centers.
+- Train community health workers to detect and refer mental health cases.
+- Increase awareness campaigns in schools, workplaces, and communities.
+- Reduce stigma associated with seeking help.
+- Collaborate with NGOs like CARAES Ndera Hospital, HDI Rwanda, and ARCT Ruhuka.
+
+Government initiatives include:
+- Free counseling services in public hospitals.
+- Helplines for trauma survivors.
+- Mental health education in schools.

data/rwanda_mental_health_hospitals.txt

@@ -0,0 +1,35 @@
+Mental Health Facilities in Rwanda — Full District Coverage
+
+1. CARAES Ndera Neuropsychiatric Teaching Hospital located in Gasabo District, Kigali City  
+2. CARAES Butare (Ndera branch) located in – Huye District, Southern Province  
+3. Icyizere Psychotherapeutic Center (Ndera branch)located in – Kicukiro District, Kigali City  
+4. Kigali Mental Health Referral Centre located in – Gasabo District, Kigali City  
+5. Service de Consultation Psycho-Sociale (SCPS), CHUK located in – Nyarugenge District, Kigali City  
+6. Mental health departments at referral hospitals:
+   - University Teaching Hospital of Kigali (CHUK) located in – Nyarugenge District, Kigali City  
+   - University Teaching Hospital of Butare (CHUB) located in – Huye District, Southern Province  
+   - Rwanda Military Hospital located in – Kicukiro District, Kigali City  
+   - King Faisal Hospital located in – Gasabo District, Kigali City  
+7. Health facilities in all **district hospitals**—mental health departments present across every district:contentReference[oaicite:0]{index=0}  
+
+Major District-Level Facilities by Province:
+**Northern Province**:
+- Ruhengeri Hospital located in – Musanze District  
+- Butaro Hospital located in – Burera District (Butaro Sector):contentReference[oaicite:1]{index=1}  
+
+**Eastern Province**:
+- Kibungo Referral Hospital located in – Ngoma District  
+- Kiziguro District Hospital located in – Gatsibo District  
+- Rwinkwavu District Hospital located in – Kayonza District:contentReference[oaicite:2]{index=2}  
+
+**Western Province**:
+- Gisenyi District Hospital located in – Rubavu District  
+- Kibuye Referral Hospital located in – Karongi District:contentReference[oaicite:3]{index=3}  
+
+**Southern Province**:
+- Kabutare Hospital located in– Huye District  
+- Kabgayi Hospital located in– Muhanga District  
+- Byumba Hospital located in– Gicumbi District  
+- Nyanza Hospital located in– Nyanza District  
+- Nyamata Hospital located in– Bugesera District  
+- Others (Kigeme, Gitwe, etc.) offer mental health services:contentReference[oaicite:4]{index=4}  

data/self-help-coping.txt

@@ -0,0 +1,20 @@
+Effective self-help strategies for managing stress and anxiety:
+
+1. Deep Breathing Exercise:
+   - Inhale slowly for 4 seconds.
+   - Hold for 4 seconds.
+   - Exhale for 6 seconds.
+   - Repeat 5–10 times.
+
+2. Journaling:
+   Write your thoughts and emotions daily to release stress.
+
+3. Grounding Exercise:
+   - Name 5 things you see.
+   - Name 4 things you can touch.
+   - Name 3 things you hear.
+   - Name 2 things you smell.
+   - Name 1 thing you taste.
+
+4. Limit social media and avoid negative news cycles.
+5. Prioritize sleep and a balanced diet.

data/youth-mental-health.txt

@@ -0,0 +1,13 @@
+In Rwanda, 1 in 4 young people experience depression or anxiety symptoms. Social pressures, unemployment, and academic stress are major causes.
+
+Tips for youth mental well-being:
+- Talk to mentors, teachers, or counselors.
+- Join youth support groups.
+- Avoid isolation — spend time with friends and family.
+- Learn stress management techniques like mindfulness.
+- Know where to seek professional help.
+
+Organizations supporting youth:
+- Imbuto Foundation Youth Wellness Program
+- Youth Helpline: 116
+- Ndera Hospital Youth Counseling Unit

email_config.env

@@ -0,0 +1,11 @@
+# Email Configuration for AI Mental Health Chatbot
+# Copy this file to .env and update with your actual email credentials
+
+# SMTP Server Configuration
+SMTP_SERVER=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USERNAME=it.elias38@gmail.com
+SMTP_PASSWORD=your-app-password-here
+FROM_EMAIL=noreply@aimhsa.rw
+
+# Security Note: Never commit this file with real credentials to version control

ingest.py

@@ -0,0 +1,114 @@
+import os, uuid, json
+from pathlib import Path
+# Replace ollama import with OpenAI client
+from openai import OpenAI
+from pypdf import PdfReader
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+from dotenv import load_dotenv
+
+load_dotenv()
+
+DATA_DIR = Path("data")
+EMBED_FILE = Path("storage/embeddings.json")
+EMBED_MODEL = os.getenv("EMBED_MODEL", "nomic-embed-text")
+OLLAMA_BASE_URL = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434/v1")
+OLLAMA_API_KEY = os.getenv("OLLAMA_API_KEY", "ollama")
+
+# Initialize OpenAI client for Ollama
+openai_client = OpenAI(
+    base_url=OLLAMA_BASE_URL,
+    api_key=OLLAMA_API_KEY
+)
+
+# --- Load or initialize embeddings ---
+if EMBED_FILE.exists():
+    with open(EMBED_FILE, "r", encoding="utf-8") as f:
+        chunks_data = json.load(f)
+else:
+    chunks_data = []
+
+# --- Helper functions ---
+def load_text_from_file(path: Path) -> str:
+    if path.suffix.lower() in [".txt", ".md"]:
+        return path.read_text(encoding="utf-8", errors="ignore")
+    if path.suffix.lower() == ".pdf":
+        pdf = PdfReader(str(path))
+        return "\n".join((page.extract_text() or "") for page in pdf.pages)
+    return ""
+
+def chunk_text(text: str):
+    splitter = RecursiveCharacterTextSplitter(
+        chunk_size=900, chunk_overlap=150,
+        separators=["\n\n", "\n", " ", ""]
+    )
+    return splitter.split_text(text)
+
+# --- Track existing sources ---
+existing_files = {c["source"] for c in chunks_data}
+
+new_chunks = []
+for fp in DATA_DIR.glob("**/*"):
+    if fp.suffix.lower() not in [".pdf", ".txt", ".md"]:
+        continue
+    if fp.name in existing_files:
+        continue  # skip already processed files
+
+    raw = load_text_from_file(fp)
+    if not raw.strip():
+        continue
+
+    for idx, piece in enumerate(chunk_text(raw)):
+        new_chunks.append({
+            "id": str(uuid.uuid4()),
+            "text": piece,
+            "source": fp.name,
+            "chunk": idx,
+            "embedding": None  # to fill below
+        })
+
+# --- Generate embeddings with OpenAI client ---
+if new_chunks:
+    texts = [c["text"] for c in new_chunks]
+    
+    # Generate embeddings using OpenAI client
+    embeddings = []
+    batch_size = 32  # Process in batches for better performance
+    
+    for i in range(0, len(texts), batch_size):
+        batch = texts[i:i + batch_size]
+        try:
+            # OpenAI client supports batch processing
+            response = openai_client.embeddings.create(
+                model=EMBED_MODEL,
+                input=batch
+            )
+            batch_embeddings = [item.embedding for item in response.data]
+            embeddings.extend(batch_embeddings)
+            print(f"Processed batch {i//batch_size + 1}/{(len(texts) + batch_size - 1)//batch_size}")
+        except Exception as e:
+            print(f"Error embedding batch: {e}")
+            # Fallback: process individually
+            for text in batch:
+                try:
+                    response = openai_client.embeddings.create(
+                        model=EMBED_MODEL,
+                        input=text
+                    )
+                    embeddings.append(response.data[0].embedding)
+                except Exception as e2:
+                    print(f"Error embedding individual text: {e2}")
+                    embeddings.append([0.0] * 384)  # fallback with correct dimension
+    
+    for c, e in zip(new_chunks, embeddings):
+        c["embedding"] = e
+
+    chunks_data.extend(new_chunks)
+
+    # Save updated embeddings
+    EMBED_FILE.parent.mkdir(parents=True, exist_ok=True)
+    with open(EMBED_FILE, "w", encoding="utf-8") as f:
+        json.dump(chunks_data, f, ensure_ascii=False, indent=2)
+
+    print(f"Added {len(new_chunks)} new chunks to {EMBED_FILE}")
+else:
+    print("No new documents found.")

init_database.py

@@ -0,0 +1,307 @@
+#!/usr/bin/env python3
+"""
+Initialize the database with all required tables
+"""
+
+import sqlite3
+import os
+import time
+
+# Database file path
+DB_FILE = "aimhsa.db"
+
+def init_database():
+    """Initialize the database with all required tables"""
+    
+    print("="*60)
+    print("INITIALIZING DATABASE")
+    print("="*60)
+    
+    # Create directory if it doesn't exist (only if there's a directory)
+    db_dir = os.path.dirname(DB_FILE)
+    if db_dir:
+        os.makedirs(db_dir, exist_ok=True)
+    
+    conn = sqlite3.connect(DB_FILE)
+    
+    try:
+        print("Creating tables...")
+        
+        # Messages table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS messages (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                conv_id TEXT NOT NULL,
+                role TEXT NOT NULL,
+                content TEXT NOT NULL,
+                ts REAL NOT NULL
+            )
+        """)
+        print("✅ messages table created")
+        
+        # Attachments table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS attachments (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                conv_id TEXT NOT NULL,
+                filename TEXT NOT NULL,
+                text TEXT NOT NULL,
+                ts REAL NOT NULL
+            )
+        """)
+        print("✅ attachments table created")
+        
+        # Sessions table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS sessions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                key TEXT UNIQUE NOT NULL,
+                conv_id TEXT NOT NULL,
+                ts REAL NOT NULL
+            )
+        """)
+        print("✅ sessions table created")
+        
+        # Users table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS users (
+                username TEXT PRIMARY KEY,
+                password_hash TEXT NOT NULL,
+                created_ts REAL NOT NULL
+            )
+        """)
+        print("✅ users table created")
+        
+        # Add additional columns to users table
+        cursor = conn.execute("PRAGMA table_info(users)")
+        columns = [column[1] for column in cursor.fetchall()]
+        
+        if "email" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN email TEXT")
+        if "fullname" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN fullname TEXT")
+        if "telephone" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN telephone TEXT")
+        if "province" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN province TEXT")
+        if "district" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN district TEXT")
+        if "created_at" not in columns:
+            conn.execute("ALTER TABLE users ADD COLUMN created_at REAL")
+        
+        print("✅ users table columns updated")
+        
+        # Password resets table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS password_resets (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                username TEXT NOT NULL,
+                token TEXT UNIQUE NOT NULL,
+                expires_ts REAL NOT NULL,
+                used INTEGER DEFAULT 0
+            )
+        """)
+        print("✅ password_resets table created")
+        
+        # Conversations table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS conversations (
+                conv_id TEXT PRIMARY KEY,
+                owner_key TEXT,
+                preview TEXT,
+                ts REAL
+            )
+        """)
+        print("✅ conversations table created")
+        
+        # Add additional columns to conversations table
+        try:
+            cur = conn.execute("PRAGMA table_info(conversations)")
+            cols = [r[1] for r in cur.fetchall()]
+            if "archive_pw_hash" not in cols:
+                conn.execute("ALTER TABLE conversations ADD COLUMN archive_pw_hash TEXT")
+            if "booking_prompt_shown" not in cols:
+                conn.execute("ALTER TABLE conversations ADD COLUMN booking_prompt_shown INTEGER DEFAULT 0")
+        except Exception:
+            pass
+        
+        print("✅ conversations table columns updated")
+        
+        # Professionals table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS professionals (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                username TEXT UNIQUE NOT NULL,
+                password_hash TEXT NOT NULL,
+                first_name TEXT NOT NULL,
+                last_name TEXT NOT NULL,
+                email TEXT NOT NULL,
+                phone TEXT,
+                license_number TEXT,
+                specialization TEXT NOT NULL,
+                expertise_areas TEXT NOT NULL,
+                languages TEXT NOT NULL,
+                qualifications TEXT NOT NULL,
+                availability_schedule TEXT NOT NULL,
+                location_latitude REAL,
+                location_longitude REAL,
+                location_address TEXT,
+                district TEXT,
+                max_patients_per_day INTEGER DEFAULT 10,
+                consultation_fee REAL,
+                experience_years INTEGER,
+                bio TEXT,
+                profile_picture TEXT,
+                is_active BOOLEAN DEFAULT 1,
+                created_ts REAL NOT NULL,
+                updated_ts REAL NOT NULL
+            )
+        """)
+        print("✅ professionals table created")
+        
+        # Risk assessments table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS risk_assessments (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                conv_id TEXT NOT NULL,
+                user_query TEXT NOT NULL,
+                risk_score REAL NOT NULL,
+                risk_level TEXT NOT NULL,
+                detected_indicators TEXT,
+                assessment_timestamp REAL NOT NULL,
+                processed BOOLEAN DEFAULT 0,
+                booking_created BOOLEAN DEFAULT 0
+            )
+        """)
+        print("✅ risk_assessments table created")
+        
+        # Automated bookings table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS automated_bookings (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                booking_id TEXT UNIQUE NOT NULL,
+                conv_id TEXT NOT NULL,
+                user_account TEXT,
+                user_ip TEXT,
+                professional_id INTEGER NOT NULL,
+                risk_level TEXT NOT NULL,
+                risk_score REAL NOT NULL,
+                detected_indicators TEXT,
+                conversation_summary TEXT,
+                booking_status TEXT DEFAULT 'pending',
+                scheduled_datetime REAL,
+                session_type TEXT DEFAULT 'routine',
+                location_preference TEXT,
+                notes TEXT,
+                created_ts REAL NOT NULL,
+                updated_ts REAL NOT NULL,
+                FOREIGN KEY (professional_id) REFERENCES professionals (id)
+            )
+        """)
+        print("✅ automated_bookings table created")
+        
+        # Professional notifications table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS professional_notifications (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                professional_id INTEGER NOT NULL,
+                booking_id TEXT NOT NULL,
+                notification_type TEXT NOT NULL,
+                title TEXT NOT NULL,
+                message TEXT NOT NULL,
+                is_read BOOLEAN DEFAULT 0,
+                priority TEXT DEFAULT 'normal',
+                created_ts REAL NOT NULL,
+                FOREIGN KEY (professional_id) REFERENCES professionals (id)
+            )
+        """)
+        print("✅ professional_notifications table created")
+        
+        # Therapy sessions table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS therapy_sessions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                booking_id TEXT NOT NULL,
+                professional_id INTEGER NOT NULL,
+                conv_id TEXT NOT NULL,
+                session_start REAL,
+                session_end REAL,
+                session_notes TEXT,
+                treatment_plan TEXT,
+                follow_up_required BOOLEAN DEFAULT 0,
+                follow_up_date REAL,
+                session_rating INTEGER,
+                session_feedback TEXT,
+                created_ts REAL NOT NULL,
+                FOREIGN KEY (professional_id) REFERENCES professionals (id)
+            )
+        """)
+        print("✅ therapy_sessions table created")
+        
+        # Session notes table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS session_notes (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                booking_id TEXT NOT NULL,
+                professional_id INTEGER NOT NULL,
+                notes TEXT,
+                treatment_plan TEXT,
+                follow_up_required BOOLEAN DEFAULT 0,
+                follow_up_date REAL,
+                created_ts REAL NOT NULL,
+                FOREIGN KEY (professional_id) REFERENCES professionals (id)
+            )
+        """)
+        print("✅ session_notes table created")
+        
+        # Conversation messages table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS conversation_messages (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                conv_id TEXT NOT NULL,
+                sender TEXT NOT NULL,
+                content TEXT NOT NULL,
+                timestamp REAL NOT NULL
+            )
+        """)
+        print("✅ conversation_messages table created")
+        
+        # Admin users table
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS admin_users (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                username TEXT UNIQUE NOT NULL,
+                password_hash TEXT NOT NULL,
+                email TEXT NOT NULL,
+                role TEXT DEFAULT 'admin',
+                permissions TEXT,
+                created_ts REAL NOT NULL
+            )
+        """)
+        print("✅ admin_users table created")
+        
+        # Commit all changes
+        conn.commit()
+        
+        print("\n" + "="*60)
+        print("DATABASE INITIALIZATION COMPLETE!")
+        print("="*60)
+        
+        # Verify tables were created
+        tables = conn.execute("""
+            SELECT name FROM sqlite_master WHERE type='table' ORDER BY name
+        """).fetchall()
+        
+        print(f"\nCreated {len(tables)} tables:")
+        for table in tables:
+            print(f"   ✅ {table[0]}")
+        
+        conn.close()
+        
+    except Exception as e:
+        print(f"❌ Error initializing database: {e}")
+        conn.close()
+        raise
+
+if __name__ == "__main__":
+    init_database()

install.py

@@ -0,0 +1,83 @@
+#!/usr/bin/env python3
+"""
+One-click installer for AIMHSA without Ollama
+"""
+
+import subprocess
+import sys
+import os
+
+def install_requirements():
+    """Install required packages"""
+    print("📦 Installing required packages...")
+    
+    try:
+        # Upgrade pip first
+        subprocess.check_call([sys.executable, "-m", "pip", "install", "--upgrade", "pip"])
+        
+        # Install requirements
+        subprocess.check_call([sys.executable, "-m", "pip", "install", "-r", "requirements.txt"])
+        
+        print("✅ All packages installed successfully!")
+        return True
+        
+    except subprocess.CalledProcessError as e:
+        print(f"❌ Error installing packages: {e}")
+        print("\n🔧 Try installing minimal requirements instead:")
+        print("pip install -r requirements-minimal.txt")
+        return False
+
+def setup_directories():
+    """Create necessary directories"""
+    print("📁 Creating directories...")
+    
+    directories = ['storage', 'data', 'logs']
+    for directory in directories:
+        os.makedirs(directory, exist_ok=True)
+        print(f"   ✅ {directory}/")
+
+def initialize_database():
+    """Initialize the database"""
+    print("🗄️  Initializing database...")
+    
+    try:
+        subprocess.check_call([sys.executable, "init_database.py"])
+        print("✅ Database initialized!")
+        return True
+    except subprocess.CalledProcessError as e:
+        print(f"❌ Error initializing database: {e}")
+        return False
+
+def main():
+    """Main installation process"""
+    print("🚀 AIMHSA Installation (No Ollama Required)")
+    print("=" * 50)
+    
+    # Step 1: Setup directories
+    setup_directories()
+    
+    # Step 2: Install requirements
+    if not install_requirements():
+        return False
+    
+    # Step 3: Setup configuration
+    try:
+        from setup_without_ollama import setup_openai_compatible
+        setup_openai_compatible()
+    except ImportError:
+        print("⚠️  Configuration setup not available. Please run setup_without_ollama.py manually.")
+    
+    # Step 4: Initialize database
+    if not initialize_database():
+        return False
+    
+    print("\n🎉 Installation complete!")
+    print("\n🔑 Next steps:")
+    print("1. Update your API keys in .env file")
+    print("2. Run: python app.py")
+    print("3. Open: http://localhost:5057")
+    
+    return True
+
+if __name__ == "__main__":
+    main()

production.env

@@ -0,0 +1,37 @@
+# Production Environment Configuration Template
+# Copy this to .env for production deployment
+
+# Environment
+FLASK_ENV=production
+DEBUG=False
+
+# Server Configuration (will be overridden by hosting platform)
+SERVER_HOST=0.0.0.0
+PORT=8000
+
+# API Configuration (use relative URLs in production)
+API_BASE_URL=
+FRONTEND_URL=
+
+# Database Configuration
+DB_FILE=aimhsa_production.db
+STORAGE_DIR=storage
+DATA_DIR=data
+
+# Email Configuration (UPDATE WITH REAL VALUES)
+SMTP_SERVER=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USERNAME=your-production-email@gmail.com
+SMTP_PASSWORD=your-app-password
+FROM_EMAIL=noreply@yourdomain.com
+
+# SMS Configuration (UPDATE WITH REAL VALUES)
+HDEV_SMS_API_ID=your-real-api-id
+HDEV_SMS_API_KEY=your-real-api-key
+
+# AI Configuration
+CHAT_MODEL=llama3.2:3b
+EMBED_MODEL=nomic-embed-text
+SENT_EMBED_MODEL=nomic-embed-text
+OLLAMA_BASE_URL=http://localhost:11434/v1
+OLLAMA_API_KEY=ollama

requirements-cloud.txt

@@ -0,0 +1,22 @@
+# Requirements for cloud deployment with external AI APIs
+flask>=2.3.0
+flask-cors>=4.0.0
+openai>=1.3.0
+python-dotenv>=1.0.0
+numpy>=1.24.0
+werkzeug>=2.3.0
+gunicorn>=21.2.0
+requests>=2.31.0
+langdetect>=1.0.9
+deep-translator>=1.11.4
+PyPDF2>=3.0.0
+Pillow>=10.0.0
+pytesseract>=0.3.10
+langchain-text-splitters>=0.0.1
+anthropic>=0.7.0
+google-generativeai>=0.3.0
+cohere>=4.37.0
+groq>=0.4.0
+redis>=5.0.0
+sentry-sdk[flask]>=1.38.0
+waitress>=2.1.2

requirements-minimal.txt

@@ -0,0 +1,14 @@
+# Minimal requirements for basic functionality without Ollama
+flask>=2.3.0
+flask-cors>=4.0.0
+openai>=1.3.0
+python-dotenv>=1.0.0
+numpy>=1.24.0
+werkzeug>=2.3.0
+requests>=2.31.0
+langdetect>=1.0.9
+deep-translator>=1.11.4
+PyPDF2>=3.0.0
+Pillow>=10.0.0
+pytesseract>=0.3.10
+langchain-text-splitters>=0.0.1

requirements.txt

@@ -0,0 +1,134 @@
+# Core Framework
+flask>=2.3.0
+flask-cors>=4.0.0
+
+# OpenAI Client (for Ollama alternative)
+openai>=1.3.0
+
+# Environment and Configuration
+python-dotenv>=1.0.0
+
+# Data Processing and Storage
+numpy>=1.24.0
+sqlite3
+
+# Web Server
+werkzeug>=2.3.0
+gunicorn>=21.2.0
+
+# Document Processing and OCR
+PyPDF2>=3.0.0
+pdf2image>=1.16.0
+pytesseract>=0.3.10
+Pillow>=10.0.0
+PyMuPDF>=1.23.0
+
+# Text Processing and NLP
+langdetect>=1.0.9
+deep-translator>=1.11.4
+
+# Language Detection (Alternative options)
+langid.py>=1.1.6
+pycld3>=0.22
+
+# Text Splitting for RAG
+langchain-text-splitters>=0.0.1
+
+# HTTP Requests
+requests>=2.31.0
+
+# Email Support
+email-validator>=2.0.0
+
+# Password Security
+bcrypt>=4.0.1
+
+# Date and Time Utilities
+python-dateutil>=2.8.2
+
+# JSON Web Tokens (if needed for auth)
+PyJWT>=2.8.0
+
+# Database Migrations (optional)
+alembic>=1.12.0
+
+# Testing (optional)
+pytest>=7.4.0
+pytest-flask>=1.2.0
+
+# Logging and Monitoring
+structlog>=23.1.0
+
+# Alternative AI Providers (choose one or more)
+# Anthropic Claude
+anthropic>=0.7.0
+
+# Google AI
+google-generativeai>=0.3.0
+
+# Hugging Face Transformers
+transformers>=4.35.0
+torch>=2.1.0
+sentence-transformers>=2.2.2
+
+# Cohere
+cohere>=4.37.0
+
+# Together AI
+together>=0.2.0
+
+# Groq
+groq>=0.4.0
+
+# Azure OpenAI
+azure-openai>=1.0.0
+
+# AWS Bedrock
+boto3>=1.29.0
+
+# Production WSGI Server
+waitress>=2.1.2
+
+# Security
+cryptography>=41.0.0
+
+# Performance
+redis>=5.0.0
+celery>=5.3.0
+
+# Monitoring
+sentry-sdk[flask]>=1.38.0
+
+# File Upload Handling
+secure-filename>=0.1
+
+# Timezone Support
+pytz>=2023.3
+
+# UUID Generation
+uuid>=1.30
+
+# Math and Statistics
+scipy>=1.11.0
+
+# HTTP Client with better error handling
+httpx>=0.25.0
+
+# Configuration Management
+pydantic>=2.4.0
+pydantic-settings>=2.0.0
+
+# Async Support
+asyncio
+aiohttp>=3.9.0
+
+# Alternative Embeddings
+chromadb>=0.4.0
+faiss-cpu>=1.7.4
+
+# Alternative to Ollama - Local LLM serving
+llama-cpp-python>=0.2.0
+ctransformers>=0.2.0
+
+# OpenAI Alternative APIs
+replicate>=0.15.0

requirements_ollama.txt

@@ -0,0 +1,12 @@
+# AIMHSA Requirements for OpenAI Client with Ollama
+flask>=2.0.0
+flask-cors>=3.0.0
+openai>=1.0.0
+python-dotenv>=0.19.0
+numpy>=1.21.0
+werkzeug>=2.0.0
+pytesseract>=0.3.8
+Pillow>=8.0.0
+PyPDF2>=1.26.0
+pdf2image>=1.16.0
+PyMuPDF>=1.20.0