Add admin panel with dashboard, patient management, and crisis alerts

- Add admin authentication via ADMIN_EMAILS environment variable
- Create admin blueprint with page routes and API endpoints
- Add admin database methods for users, crisis flags, stats, and charts
- Create dashboard with stats cards, session trends, distortion distribution
- Add patient list with search, filters, sorting, pagination, CSV export
- Create patient detail page with Overview, Vitals, Sessions, Crisis History tabs
- Include Chart.js visualizations for distortion patterns and mood tracking
- Add responsive sidebar navigation and toast notifications

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

admin.py

@@ -0,0 +1,160 @@
+"""
+Admin Panel Module
+Handles admin routes, authentication, and dashboard functionality
+"""
+
+from flask import Blueprint, render_template, jsonify, request
+from auth import admin_required, login_user, is_admin, generate_token
+from database import get_db
+
+admin_bp = Blueprint('admin', __name__, url_prefix='/admin')
+
+
+# ==================== PAGE ROUTES ====================
+
+@admin_bp.route('/login')
+def admin_login_page():
+    """Render admin login page."""
+    return render_template('admin_login.html')
+
+
+@admin_bp.route('/dashboard')
+def admin_dashboard_page():
+    """Render admin dashboard page."""
+    return render_template('admin_dashboard.html')
+
+
+@admin_bp.route('/patients')
+def admin_patients_page():
+    """Render patient list page."""
+    return render_template('admin_patients.html')
+
+
+@admin_bp.route('/patients/<user_id>')
+def admin_patient_detail_page(user_id):
+    """Render patient detail page."""
+    return render_template('admin_patient_detail.html', user_id=user_id)
+
+
+# ==================== API ROUTES ====================
+
+@admin_bp.route('/api/login', methods=['POST'])
+def admin_login():
+    """Admin login endpoint."""
+    data = request.json
+    email = data.get('email', '')
+    password = data.get('password', '')
+
+    # Use existing login logic
+    result = login_user(email, password)
+
+    if 'error' in result:
+        return jsonify(result), 401
+
+    # Check if user is admin
+    if not is_admin(email):
+        return jsonify({'error': 'Admin access required'}), 403
+
+    return jsonify(result)
+
+
+@admin_bp.route('/api/stats')
+@admin_required
+def get_dashboard_stats():
+    """Get dashboard statistics."""
+    db = get_db()
+    stats = db.get_dashboard_stats()
+    return jsonify(stats)
+
+
+@admin_bp.route('/api/alerts')
+@admin_required
+def get_alerts():
+    """Get crisis alerts."""
+    reviewed = request.args.get('reviewed')
+
+    if reviewed is not None:
+        reviewed = reviewed.lower() == 'true'
+
+    db = get_db()
+    alerts = db.get_all_crisis_flags(reviewed=reviewed)
+    return jsonify({'alerts': alerts})
+
+
+@admin_bp.route('/api/alerts/<flag_id>/review', methods=['POST'])
+@admin_required
+def review_alert(flag_id):
+    """Mark an alert as reviewed."""
+    db = get_db()
+    db.mark_crisis_reviewed(flag_id)
+    return jsonify({'success': True})
+
+
+@admin_bp.route('/api/patients')
+@admin_required
+def get_patients():
+    """Get all patients."""
+    db = get_db()
+    patients = db.get_all_users()
+    return jsonify({'patients': patients})
+
+
+@admin_bp.route('/api/patients/<user_id>')
+@admin_required
+def get_patient_detail(user_id):
+    """Get full patient data."""
+    db = get_db()
+    patient = db.get_user_full_details(user_id)
+
+    if not patient:
+        return jsonify({'error': 'Patient not found'}), 404
+
+    # Add distortion pattern for radar chart
+    patient['distortion_pattern'] = db.get_user_distortion_pattern(user_id)
+
+    # Add mood history
+    patient['mood_history'] = db.get_user_mood_history(user_id)
+
+    # Add wearable summary
+    patient['wearable_summary'] = db.get_user_wearable_summary(user_id)
+
+    return jsonify(patient)
+
+
+@admin_bp.route('/api/charts/sessions')
+@admin_required
+def get_session_chart_data():
+    """Get session trend data for chart."""
+    days = request.args.get('days', 30, type=int)
+    db = get_db()
+    data = db.get_daily_session_counts(days)
+    return jsonify({'data': data})
+
+
+@admin_bp.route('/api/charts/distortions')
+@admin_required
+def get_distortion_chart_data():
+    """Get distortion distribution for chart."""
+    db = get_db()
+    data = db.get_distortion_distribution()
+    return jsonify(data)
+
+
+@admin_bp.route('/api/charts/vitals/<user_id>')
+@admin_required
+def get_vitals_chart_data(user_id):
+    """Get vitals time-series for charts."""
+    hours = request.args.get('hours', 24, type=int)
+    db = get_db()
+    data = db.get_wearable_timeseries(user_id, hours)
+    return jsonify({'data': data})
+
+
+@admin_bp.route('/api/charts/mood/<user_id>')
+@admin_required
+def get_mood_chart_data(user_id):
+    """Get mood history for charts."""
+    limit = request.args.get('limit', 20, type=int)
+    db = get_db()
+    data = db.get_user_mood_history(user_id, limit)
+    return jsonify({'data': data})

app.py

@@ -13,11 +13,19 @@ from auth import register_user, login_user, token_required
 from crisis_detector import check_for_crisis, get_crisis_response, get_crisis_resources
 from prompts import STAGE_GOALS, SUMMARIES, NATURAL_ENDINGS
 from exercises import get_exercise_for_group
+from wearable import wearable_bp
+from admin import admin_bp
 import os
 
-app = Flask(__name__)
+app = Flask(__name__,
+            template_folder='templates',
+            static_folder='static')
 CORS(app)
 
+# Register blueprints
+app.register_blueprint(wearable_bp)
+app.register_blueprint(admin_bp)
+
 # Initialize components
 classifier = DistortionClassifier()
 groq_client = GroqClient(api_key=os.environ.get("GROQ_API_KEY"))
@@ -28,8 +36,8 @@ def home():
     return jsonify({
         "status": "online",
         "app": "CBT Companion",
-        "version": "2.0.0",
-        "features": ["multi-user", "auth", "crisis-detection"]
+        "version": "2.1.0",
+        "features": ["multi-user", "auth", "crisis-detection", "wearable-integration"]
     })
 
 

auth.py

@@ -16,6 +16,14 @@ from database import get_db
 JWT_SECRET = os.environ.get("JWT_SECRET", "your-secret-key-change-in-production")
 JWT_EXPIRY_HOURS = 24 * 7  # 7 days
 
+# Admin Configuration
+# Comma-separated list of admin emails
+ADMIN_EMAILS = [
+    email.strip().lower()
+    for email in os.environ.get("ADMIN_EMAILS", "").split(",")
+    if email.strip()
+]
+
 
 def hash_password(password: str) -> str:
     """Hash password using SHA-256."""
@@ -128,24 +136,24 @@ def register_user(email: str, password: str, name: str, context: str = "person")
 def login_user(email: str, password: str) -> dict:
     """
     Login a user.
-    
+
     Returns:
         dict with user info and token, or error
     """
     if not email or not password:
         return {"error": "Email and password are required"}
-    
+
     db = get_db()
     user = db.get_user_by_email(email)
-    
+
     if not user:
         return {"error": "Invalid email or password"}
-    
+
     if not verify_password(password, user["password_hash"]):
         return {"error": "Invalid email or password"}
-    
+
     token = generate_token(user["id"], user["email"])
-    
+
     return {
         "success": True,
         "user": {
@@ -156,3 +164,45 @@ def login_user(email: str, password: str) -> dict:
         },
         "token": token
     }
+
+
+def is_admin(email: str) -> bool:
+    """Check if an email is in the admin list."""
+    return email.lower() in ADMIN_EMAILS
+
+
+def admin_required(f):
+    """Decorator to require valid JWT token AND admin privileges."""
+    @wraps(f)
+    def decorated(*args, **kwargs):
+        token = None
+
+        # Get token from header
+        auth_header = request.headers.get("Authorization")
+        if auth_header and auth_header.startswith("Bearer "):
+            token = auth_header.split(" ")[1]
+
+        if not token:
+            return jsonify({"error": "Token is missing"}), 401
+
+        # Decode token
+        payload = decode_token(token)
+        if not payload:
+            return jsonify({"error": "Token is invalid or expired"}), 401
+
+        # Get user from database
+        db = get_db()
+        user = db.get_user_by_id(payload["user_id"])
+        if not user:
+            return jsonify({"error": "User not found"}), 401
+
+        # Check if user is admin
+        if not is_admin(user["email"]):
+            return jsonify({"error": "Admin access required"}), 403
+
+        # Add user to request context
+        request.current_user = user
+
+        return f(*args, **kwargs)
+
+    return decorated

database.py

@@ -119,7 +119,29 @@ class Database:
                 FOREIGN KEY (user_id) REFERENCES users(id)
             )
         """)
-        
+
+        # Wearable sensor data
+        self.conn.execute("""
+            CREATE TABLE IF NOT EXISTS wearable_data (
+                id TEXT PRIMARY KEY,
+                user_id TEXT NOT NULL,
+                ppg REAL NOT NULL,
+                gsr REAL NOT NULL,
+                acc_x REAL NOT NULL,
+                acc_y REAL NOT NULL,
+                acc_z REAL NOT NULL,
+                device_timestamp TEXT,
+                recorded_at TEXT DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (user_id) REFERENCES users(id)
+            )
+        """)
+
+        # Create index for faster queries on wearable data
+        self.conn.execute("""
+            CREATE INDEX IF NOT EXISTS idx_wearable_user_time
+            ON wearable_data(user_id, recorded_at DESC)
+        """)
+
         self.conn.commit()
     
     # ==================== USER OPERATIONS ====================
@@ -431,6 +453,414 @@ class Database:
         )
         self.conn.commit()
 
+    # ==================== WEARABLE DATA OPERATIONS ====================
+
+    def save_wearable_data(self, user_id: str, ppg: float, gsr: float,
+                           acc_x: float, acc_y: float, acc_z: float,
+                           device_timestamp: str = None) -> str:
+        """Save wearable sensor data."""
+        record_id = str(uuid.uuid4())
+
+        self.conn.execute(
+            """INSERT INTO wearable_data
+               (id, user_id, ppg, gsr, acc_x, acc_y, acc_z, device_timestamp)
+               VALUES (?, ?, ?, ?, ?, ?, ?, ?)""",
+            (record_id, user_id, ppg, gsr, acc_x, acc_y, acc_z, device_timestamp)
+        )
+        self.conn.commit()
+
+        return record_id
+
+    def get_latest_wearable_data(self, user_id: str) -> dict:
+        """Get the most recent wearable data for a user."""
+        result = self.conn.execute(
+            """SELECT id, ppg, gsr, acc_x, acc_y, acc_z, device_timestamp, recorded_at
+               FROM wearable_data WHERE user_id = ?
+               ORDER BY recorded_at DESC LIMIT 1""",
+            (user_id,)
+        ).fetchone()
+
+        if result:
+            return {
+                "id": result[0],
+                "ppg": result[1],
+                "gsr": result[2],
+                "acc_x": result[3],
+                "acc_y": result[4],
+                "acc_z": result[5],
+                "device_timestamp": result[6],
+                "recorded_at": result[7]
+            }
+        return None
+
+    def get_wearable_history(self, user_id: str, limit: int = 100,
+                             offset: int = 0, start_date: str = None,
+                             end_date: str = None) -> list:
+        """Get wearable data history for a user."""
+        query = """SELECT id, ppg, gsr, acc_x, acc_y, acc_z, device_timestamp, recorded_at
+                   FROM wearable_data WHERE user_id = ?"""
+        params = [user_id]
+
+        if start_date:
+            query += " AND recorded_at >= ?"
+            params.append(start_date)
+
+        if end_date:
+            query += " AND recorded_at <= ?"
+            params.append(end_date)
+
+        query += " ORDER BY recorded_at DESC LIMIT ? OFFSET ?"
+        params.extend([limit, offset])
+
+        results = self.conn.execute(query, tuple(params)).fetchall()
+
+        return [
+            {
+                "id": r[0],
+                "ppg": r[1],
+                "gsr": r[2],
+                "acc_x": r[3],
+                "acc_y": r[4],
+                "acc_z": r[5],
+                "device_timestamp": r[6],
+                "recorded_at": r[7]
+            }
+            for r in results
+        ]
+
+    def get_wearable_stats(self, user_id: str, period: str = "day") -> dict:
+        """Get aggregated statistics for wearable data."""
+        # Calculate date filter based on period
+        if period == "day":
+            date_filter = "datetime('now', '-1 day')"
+        elif period == "week":
+            date_filter = "datetime('now', '-7 days')"
+        else:  # month
+            date_filter = "datetime('now', '-30 days')"
+
+        result = self.conn.execute(
+            f"""SELECT
+                COUNT(*) as count,
+                AVG(ppg) as avg_ppg,
+                MIN(ppg) as min_ppg,
+                MAX(ppg) as max_ppg,
+                AVG(gsr) as avg_gsr,
+                MIN(gsr) as min_gsr,
+                MAX(gsr) as max_gsr,
+                AVG(acc_x) as avg_acc_x,
+                AVG(acc_y) as avg_acc_y,
+                AVG(acc_z) as avg_acc_z
+               FROM wearable_data
+               WHERE user_id = ? AND recorded_at >= {date_filter}""",
+            (user_id,)
+        ).fetchone()
+
+        if result and result[0] > 0:
+            return {
+                "reading_count": result[0],
+                "ppg": {
+                    "avg": round(result[1], 2) if result[1] else None,
+                    "min": round(result[2], 2) if result[2] else None,
+                    "max": round(result[3], 2) if result[3] else None
+                },
+                "gsr": {
+                    "avg": round(result[4], 4) if result[4] else None,
+                    "min": round(result[5], 4) if result[5] else None,
+                    "max": round(result[6], 4) if result[6] else None
+                },
+                "accelerometer": {
+                    "avg_x": round(result[7], 4) if result[7] else None,
+                    "avg_y": round(result[8], 4) if result[8] else None,
+                    "avg_z": round(result[9], 4) if result[9] else None
+                }
+            }
+
+        return {
+            "reading_count": 0,
+            "ppg": {"avg": None, "min": None, "max": None},
+            "gsr": {"avg": None, "min": None, "max": None},
+            "accelerometer": {"avg_x": None, "avg_y": None, "avg_z": None}
+        }
+
+    # ==================== ADMIN OPERATIONS ====================
+
+    def get_all_users(self) -> list:
+        """Get all users with basic info for admin panel."""
+        results = self.conn.execute(
+            """SELECT u.id, u.email, u.name, u.context, u.created_at,
+                      s.total_sessions, s.total_exercises, s.current_streak, s.last_session_date
+               FROM users u
+               LEFT JOIN user_stats s ON u.id = s.user_id
+               ORDER BY u.created_at DESC"""
+        ).fetchall()
+
+        users = []
+        for r in results:
+            # Count crisis flags for this user
+            flag_count = self.conn.execute(
+                "SELECT COUNT(*) FROM crisis_flags WHERE user_id = ? AND reviewed = 0",
+                (r[0],)
+            ).fetchone()[0]
+
+            users.append({
+                "id": r[0],
+                "email": r[1],
+                "name": r[2],
+                "context": r[3],
+                "created_at": r[4],
+                "total_sessions": r[5] or 0,
+                "total_exercises": r[6] or 0,
+                "current_streak": r[7] or 0,
+                "last_session_date": r[8],
+                "unreviewed_alerts": flag_count
+            })
+
+        return users
+
+    def get_user_full_details(self, user_id: str) -> dict:
+        """Get complete user data for admin patient detail view."""
+        user = self.get_user_by_id(user_id)
+        if not user:
+            return None
+
+        # Get user stats
+        stats = self.get_user_stats(user_id)
+
+        # Get created_at
+        created_at = self.conn.execute(
+            "SELECT created_at FROM users WHERE id = ?",
+            (user_id,)
+        ).fetchone()
+
+        # Get sessions
+        sessions = self.get_user_sessions(user_id, limit=50)
+
+        # Get crisis history
+        crisis_flags = self.conn.execute(
+            """SELECT id, session_id, message_content, trigger_word, flagged_at, reviewed
+               FROM crisis_flags WHERE user_id = ?
+               ORDER BY flagged_at DESC""",
+            (user_id,)
+        ).fetchall()
+
+        crisis_history = [
+            {
+                "id": r[0],
+                "session_id": r[1],
+                "message_content": r[2],
+                "trigger_word": r[3],
+                "flagged_at": r[4],
+                "reviewed": bool(r[5])
+            }
+            for r in crisis_flags
+        ]
+
+        # Get latest wearable data
+        latest_wearable = self.get_latest_wearable_data(user_id)
+
+        return {
+            **user,
+            "created_at": created_at[0] if created_at else None,
+            "stats": stats,
+            "sessions": sessions,
+            "crisis_history": crisis_history,
+            "latest_wearable": latest_wearable
+        }
+
+    def get_all_crisis_flags(self, reviewed: bool = None) -> list:
+        """Get all crisis flags, optionally filtered by reviewed status."""
+        query = """SELECT cf.id, cf.user_id, cf.user_name, cf.user_email,
+                          cf.session_id, cf.message_content, cf.trigger_word,
+                          cf.flagged_at, cf.reviewed
+                   FROM crisis_flags cf
+                   ORDER BY cf.flagged_at DESC"""
+
+        if reviewed is not None:
+            query = """SELECT cf.id, cf.user_id, cf.user_name, cf.user_email,
+                              cf.session_id, cf.message_content, cf.trigger_word,
+                              cf.flagged_at, cf.reviewed
+                       FROM crisis_flags cf
+                       WHERE cf.reviewed = ?
+                       ORDER BY cf.flagged_at DESC"""
+            results = self.conn.execute(query, (1 if reviewed else 0,)).fetchall()
+        else:
+            results = self.conn.execute(query).fetchall()
+
+        return [
+            {
+                "id": r[0],
+                "user_id": r[1],
+                "user_name": r[2],
+                "user_email": r[3],
+                "session_id": r[4],
+                "message_content": r[5],
+                "trigger_word": r[6],
+                "flagged_at": r[7],
+                "reviewed": bool(r[8])
+            }
+            for r in results
+        ]
+
+    def mark_crisis_reviewed(self, flag_id: str) -> bool:
+        """Mark a crisis flag as reviewed."""
+        self.conn.execute(
+            "UPDATE crisis_flags SET reviewed = 1 WHERE id = ?",
+            (flag_id,)
+        )
+        self.conn.commit()
+        return True
+
+    def get_dashboard_stats(self) -> dict:
+        """Get overview statistics for admin dashboard."""
+        # Total users
+        total_users = self.conn.execute(
+            "SELECT COUNT(*) FROM users"
+        ).fetchone()[0]
+
+        # Sessions today
+        sessions_today = self.conn.execute(
+            """SELECT COUNT(*) FROM sessions
+               WHERE DATE(started_at) = DATE('now')"""
+        ).fetchone()[0]
+
+        # Unreviewed crisis flags
+        unreviewed_alerts = self.conn.execute(
+            "SELECT COUNT(*) FROM crisis_flags WHERE reviewed = 0"
+        ).fetchone()[0]
+
+        # Average mood improvement (mood_end - mood_start for completed sessions)
+        mood_result = self.conn.execute(
+            """SELECT AVG(mood_end - mood_start)
+               FROM sessions
+               WHERE mood_start IS NOT NULL
+               AND mood_end IS NOT NULL
+               AND completed = 1"""
+        ).fetchone()
+        avg_mood_change = round(mood_result[0], 2) if mood_result[0] else 0
+
+        # Total sessions
+        total_sessions = self.conn.execute(
+            "SELECT COUNT(*) FROM sessions"
+        ).fetchone()[0]
+
+        # Completed sessions
+        completed_sessions = self.conn.execute(
+            "SELECT COUNT(*) FROM sessions WHERE completed = 1"
+        ).fetchone()[0]
+
+        return {
+            "total_users": total_users,
+            "sessions_today": sessions_today,
+            "unreviewed_alerts": unreviewed_alerts,
+            "avg_mood_change": avg_mood_change,
+            "total_sessions": total_sessions,
+            "completed_sessions": completed_sessions
+        }
+
+    def get_user_wearable_summary(self, user_id: str) -> dict:
+        """Get vitals summary for a patient."""
+        # Get stats for day, week, month
+        day_stats = self.get_wearable_stats(user_id, "day")
+        week_stats = self.get_wearable_stats(user_id, "week")
+        month_stats = self.get_wearable_stats(user_id, "month")
+
+        # Get latest reading
+        latest = self.get_latest_wearable_data(user_id)
+
+        return {
+            "latest": latest,
+            "day": day_stats,
+            "week": week_stats,
+            "month": month_stats
+        }
+
+    def get_wearable_timeseries(self, user_id: str, hours: int = 24) -> list:
+        """Get time-series wearable data for charts."""
+        results = self.conn.execute(
+            """SELECT ppg, gsr, acc_x, acc_y, acc_z, recorded_at
+               FROM wearable_data
+               WHERE user_id = ?
+               AND recorded_at >= datetime('now', ? || ' hours')
+               ORDER BY recorded_at ASC""",
+            (user_id, -hours)
+        ).fetchall()
+
+        return [
+            {
+                "ppg": r[0],
+                "gsr": r[1],
+                "acc_x": r[2],
+                "acc_y": r[3],
+                "acc_z": r[4],
+                "recorded_at": r[5]
+            }
+            for r in results
+        ]
+
+    def get_daily_session_counts(self, days: int = 30) -> list:
+        """Get daily session counts for trend chart."""
+        results = self.conn.execute(
+            """SELECT DATE(started_at) as day, COUNT(*) as count
+               FROM sessions
+               WHERE started_at >= datetime('now', ? || ' days')
+               GROUP BY DATE(started_at)
+               ORDER BY day ASC""",
+            (-days,)
+        ).fetchall()
+
+        return [{"date": r[0], "count": r[1]} for r in results]
+
+    def get_distortion_distribution(self) -> dict:
+        """Get aggregate distortion group distribution."""
+        results = self.conn.execute(
+            """SELECT locked_group, COUNT(*) as count
+               FROM sessions
+               WHERE locked_group IS NOT NULL AND locked_group != 'G0'
+               GROUP BY locked_group"""
+        ).fetchall()
+
+        distribution = {"G1": 0, "G2": 0, "G3": 0, "G4": 0}
+        for r in results:
+            if r[0] in distribution:
+                distribution[r[0]] = r[1]
+
+        return distribution
+
+    def get_user_mood_history(self, user_id: str, limit: int = 20) -> list:
+        """Get mood history for a user's sessions."""
+        results = self.conn.execute(
+            """SELECT started_at, mood_start, mood_end, locked_group, completed
+               FROM sessions
+               WHERE user_id = ?
+               AND mood_start IS NOT NULL
+               ORDER BY started_at DESC
+               LIMIT ?""",
+            (user_id, limit)
+        ).fetchall()
+
+        return [
+            {
+                "date": r[0],
+                "mood_start": r[1],
+                "mood_end": r[2],
+                "locked_group": r[3],
+                "completed": bool(r[4])
+            }
+            for r in reversed(results)  # Chronological order
+        ]
+
+    def get_user_distortion_pattern(self, user_id: str) -> dict:
+        """Get distortion pattern for radar chart."""
+        stats = self.get_user_stats(user_id)
+        counts = stats.get("distortion_counts", {})
+
+        return {
+            "G1": counts.get("G1", 0),
+            "G2": counts.get("G2", 0),
+            "G3": counts.get("G3", 0),
+            "G4": counts.get("G4", 0)
+        }
+
 
 # Singleton instance
 _db_instance = None

static/css/admin.css

@@ -0,0 +1,480 @@
+/* CBT Companion Admin Panel Styles */
+
+/* CSS Variables */
+:root {
+    --primary: #3B82F6;
+    --primary-dark: #2563EB;
+    --secondary: #10B981;
+    --danger: #EF4444;
+    --warning: #F59E0B;
+    --background: #F3F4F6;
+    --card-bg: #FFFFFF;
+    --text-primary: #1F2937;
+    --text-secondary: #6B7280;
+    --border-color: #E5E7EB;
+}
+
+/* Base Styles */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--background);
+    color: var(--text-primary);
+}
+
+/* Background Pattern */
+.bg-grid-pattern {
+    background-image:
+        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+
+/* Card Styles */
+.card {
+    background: var(--card-bg);
+    border-radius: 0.75rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.card:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Toast Notifications */
+.toast {
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    animation: slideIn 0.3s ease-out;
+    max-width: 24rem;
+}
+
+.toast-success {
+    background-color: #ECFDF5;
+    border: 1px solid #A7F3D0;
+    color: #065F46;
+}
+
+.toast-error {
+    background-color: #FEF2F2;
+    border: 1px solid #FECACA;
+    color: #991B1B;
+}
+
+.toast-warning {
+    background-color: #FFFBEB;
+    border: 1px solid #FDE68A;
+    color: #92400E;
+}
+
+.toast-info {
+    background-color: #EFF6FF;
+    border: 1px solid #BFDBFE;
+    color: #1E40AF;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+.toast-exit {
+    animation: slideOut 0.3s ease-in forwards;
+}
+
+/* Loading Spinner */
+.spinner {
+    border: 3px solid rgba(59, 130, 246, 0.2);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Table Styles */
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th {
+    background-color: #F9FAFB;
+    padding: 0.75rem 1.5rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-table td {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-table tbody tr:hover {
+    background-color: #F9FAFB;
+}
+
+.data-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+/* Badge Styles */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 9999px;
+}
+
+.badge-success {
+    background-color: #D1FAE5;
+    color: #065F46;
+}
+
+.badge-danger {
+    background-color: #FEE2E2;
+    color: #991B1B;
+}
+
+.badge-warning {
+    background-color: #FEF3C7;
+    color: #92400E;
+}
+
+.badge-info {
+    background-color: #DBEAFE;
+    color: #1E40AF;
+}
+
+.badge-gray {
+    background-color: #F3F4F6;
+    color: #374151;
+}
+
+/* Alert Panel Styles */
+.alert-item {
+    padding: 1rem;
+    border-left: 4px solid var(--danger);
+    background-color: #FEF2F2;
+    transition: background-color 0.2s;
+}
+
+.alert-item:hover {
+    background-color: #FEE2E2;
+}
+
+/* Chart Container */
+.chart-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+/* Stats Card */
+.stat-card {
+    background: white;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card .stat-icon {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stat-card .stat-value {
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.stat-card .stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+/* Sidebar Styles */
+.sidebar {
+    background: white;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar-nav-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+}
+
+.sidebar-nav-item:hover {
+    background-color: #F3F4F6;
+    color: var(--text-primary);
+}
+
+.sidebar-nav-item.active {
+    background-color: #EFF6FF;
+    color: var(--primary);
+}
+
+/* Tab Styles */
+.tab-container {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.tab-item {
+    padding: 1rem 1.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.tab-item:hover {
+    color: var(--text-primary);
+}
+
+.tab-item.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+/* Responsive Table Scroll */
+.table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Line Clamp */
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Pulse Animation for Alerts */
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Gradient Backgrounds */
+.gradient-blue {
+    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
+}
+
+.gradient-green {
+    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+}
+
+.gradient-red {
+    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+}
+
+.gradient-purple {
+    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
+}
+
+/* Form Inputs */
+.input-field {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+}
+
+.input-field:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Button Styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 0.5rem;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    color: white;
+    border: none;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: white;
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    background: #F9FAFB;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
+    color: white;
+    border: none;
+}
+
+.btn-danger:hover {
+    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
+}
+
+/* Avatar */
+.avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.avatar-sm {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.75rem;
+}
+
+.avatar-lg {
+    width: 4rem;
+    height: 4rem;
+    font-size: 1.25rem;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #F3F4F6;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #D1D5DB;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #9CA3AF;
+}
+
+/* Responsive Utilities */
+@media (max-width: 768px) {
+    .hide-mobile {
+        display: none !important;
+    }
+
+    .stat-card .stat-value {
+        font-size: 1.5rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .hide-desktop {
+        display: none !important;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .sidebar,
+    .no-print {
+        display: none !important;
+    }
+
+    body {
+        background: white;
+    }
+
+    .card {
+        box-shadow: none;
+        border: 1px solid #E5E7EB;
+    }
+}

static/js/admin.js

@@ -0,0 +1,244 @@
+/**
+ * CBT Companion Admin Panel JavaScript
+ * Handles authentication, API calls, and UI interactions
+ */
+
+const AdminPanel = {
+    // Token Management
+    getToken() {
+        return localStorage.getItem('admin_token');
+    },
+
+    setToken(token) {
+        localStorage.setItem('admin_token', token);
+    },
+
+    removeToken() {
+        localStorage.removeItem('admin_token');
+        localStorage.removeItem('admin_user');
+    },
+
+    getUser() {
+        const user = localStorage.getItem('admin_user');
+        return user ? JSON.parse(user) : null;
+    },
+
+    isAuthenticated() {
+        return !!this.getToken();
+    },
+
+    // API Fetch Wrapper
+    async fetchAPI(url, options = {}) {
+        const token = this.getToken();
+
+        const config = {
+            ...options,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options.headers,
+            }
+        };
+
+        if (token) {
+            config.headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        try {
+            const response = await fetch(url, config);
+
+            // Handle 401 - redirect to login
+            if (response.status === 401) {
+                this.removeToken();
+                window.location.href = '/admin/login';
+                throw new Error('Session expired');
+            }
+
+            // Handle 403 - not admin
+            if (response.status === 403) {
+                this.showToast('Admin access required', 'error');
+                throw new Error('Admin access required');
+            }
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Request failed');
+            }
+
+            return data;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    },
+
+    // Logout
+    logout() {
+        this.removeToken();
+        window.location.href = '/admin/login';
+    },
+
+    // Toast Notifications
+    showToast(message, type = 'info', duration = 4000) {
+        const container = document.getElementById('toast-container');
+        if (!container) return;
+
+        const toast = document.createElement('div');
+        toast.className = `toast toast-${type}`;
+
+        // Icon based on type
+        const icons = {
+            success: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+            error: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+            warning: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
+            info: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
+        };
+
+        toast.innerHTML = `
+            ${icons[type] || icons.info}
+            <span>${this.escapeHtml(message)}</span>
+            <button onclick="this.parentElement.remove()" class="ml-2 text-current opacity-50 hover:opacity-100">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        `;
+
+        container.appendChild(toast);
+
+        // Auto remove after duration
+        setTimeout(() => {
+            toast.classList.add('toast-exit');
+            setTimeout(() => toast.remove(), 300);
+        }, duration);
+    },
+
+    // Utility Functions
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    },
+
+    formatDate(dateString) {
+        if (!dateString) return '--';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    },
+
+    formatDateTime(dateString) {
+        if (!dateString) return '--';
+        const date = new Date(dateString);
+        return date.toLocaleString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    },
+
+    formatTimeAgo(dateString) {
+        if (!dateString) return '--';
+
+        const date = new Date(dateString);
+        const now = new Date();
+        const seconds = Math.floor((now - date) / 1000);
+
+        if (seconds < 60) return 'just now';
+        if (seconds < 3600) return Math.floor(seconds / 60) + ' minutes ago';
+        if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
+        if (seconds < 604800) return Math.floor(seconds / 86400) + ' days ago';
+
+        return this.formatDate(dateString);
+    },
+
+    // Generate initials from name
+    getInitials(name) {
+        if (!name) return '??';
+        return name.split(' ')
+            .map(n => n[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    },
+
+    // Generate avatar color from name
+    getAvatarColor(name) {
+        if (!name) return 'from-gray-400 to-gray-500';
+
+        const colors = [
+            'from-blue-400 to-indigo-500',
+            'from-green-400 to-emerald-500',
+            'from-purple-400 to-violet-500',
+            'from-pink-400 to-rose-500',
+            'from-yellow-400 to-orange-500',
+            'from-cyan-400 to-teal-500',
+            'from-red-400 to-pink-500',
+            'from-indigo-400 to-purple-500'
+        ];
+
+        // Simple hash function
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+
+        return colors[Math.abs(hash) % colors.length];
+    },
+
+    // Debounce utility
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+
+    // Throttle utility
+    throttle(func, limit) {
+        let inThrottle;
+        return function(...args) {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+};
+
+// Chart.js Default Configuration
+if (typeof Chart !== 'undefined') {
+    Chart.defaults.font.family = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+    Chart.defaults.color = '#6B7280';
+
+    // Custom tooltip styling
+    Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(31, 41, 55, 0.9)';
+    Chart.defaults.plugins.tooltip.titleColor = '#fff';
+    Chart.defaults.plugins.tooltip.bodyColor = '#fff';
+    Chart.defaults.plugins.tooltip.borderWidth = 0;
+    Chart.defaults.plugins.tooltip.cornerRadius = 8;
+    Chart.defaults.plugins.tooltip.padding = 12;
+}
+
+// Global error handler for unhandled promise rejections
+window.addEventListener('unhandledrejection', event => {
+    console.error('Unhandled promise rejection:', event.reason);
+    AdminPanel.showToast('An unexpected error occurred', 'error');
+});
+
+// Export for module usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AdminPanel;
+}

templates/admin_dashboard.html

@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - CBT Companion Admin</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        danger: '#EF4444',
+                        warning: '#F59E0B',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform transition-transform duration-300 lg:relative lg:translate-x-0">
+            <!-- Logo -->
+            <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                        </svg>
+                    </div>
+                    <span class="text-lg font-bold text-gray-800">CBT Admin</span>
+                </div>
+                <button id="close-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="px-4 py-6 space-y-2">
+                <a href="/admin/dashboard" class="flex items-center px-4 py-3 text-blue-600 bg-blue-50 rounded-lg">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Dashboard
+                </a>
+                <a href="/admin/patients" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                    </svg>
+                    Patients
+                </a>
+            </nav>
+
+            <!-- User Info -->
+            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
+                        <span id="user-initials" class="text-white font-semibold text-sm">AD</span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <p id="user-name" class="text-sm font-medium text-gray-900 truncate">Admin</p>
+                        <p id="user-email" class="text-xs text-gray-500 truncate">admin@example.com</p>
+                    </div>
+                    <button id="logout-btn" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Logout">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-y-auto">
+            <!-- Top Bar -->
+            <header class="bg-white shadow-sm sticky top-0 z-30">
+                <div class="flex items-center justify-between h-16 px-6">
+                    <div class="flex items-center space-x-4">
+                        <button id="open-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                            </svg>
+                        </button>
+                        <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <span id="last-updated" class="text-sm text-gray-500">Updated just now</span>
+                        <button id="refresh-btn" class="p-2 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-lg transition-colors" title="Refresh">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Dashboard Content -->
+            <div class="p-6 space-y-6">
+                <!-- Stats Cards Row -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <!-- Total Patients Card -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500">Total Patients</p>
+                                <p id="stat-patients" class="text-3xl font-bold text-gray-800 mt-1">-</p>
+                            </div>
+                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Sessions Today Card -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500">Sessions Today</p>
+                                <p id="stat-sessions" class="text-3xl font-bold text-gray-800 mt-1">-</p>
+                            </div>
+                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
+                                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Crisis Alerts Card -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow border-l-4 border-red-500">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500">Crisis Alerts</p>
+                                <p id="stat-alerts" class="text-3xl font-bold text-red-600 mt-1">-</p>
+                            </div>
+                            <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
+                                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Avg Mood Change Card -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500">Avg Mood Change</p>
+                                <p id="stat-mood" class="text-3xl font-bold text-gray-800 mt-1">-</p>
+                            </div>
+                            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
+                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts Row -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <!-- Session Trends Chart -->
+                    <div class="bg-white rounded-xl shadow-sm p-6">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Session Trends (30 Days)</h3>
+                        <div class="h-64">
+                            <canvas id="sessionsChart"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- Distortion Distribution Chart -->
+                    <div class="bg-white rounded-xl shadow-sm p-6">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-4">Distortion Distribution</h3>
+                        <div class="h-64 flex items-center justify-center">
+                            <canvas id="distortionChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Crisis Alerts Panel -->
+                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-red-500 to-red-600">
+                        <div class="flex items-center justify-between">
+                            <h3 class="text-lg font-semibold text-white flex items-center">
+                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                                </svg>
+                                Crisis Alerts
+                            </h3>
+                            <span id="alert-badge" class="px-3 py-1 bg-white text-red-600 text-sm font-semibold rounded-full">0 pending</span>
+                        </div>
+                    </div>
+
+                    <div id="alerts-container" class="divide-y divide-gray-100">
+                        <!-- Alerts will be populated here -->
+                        <div id="alerts-loading" class="p-8 text-center text-gray-500">
+                            <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            Loading alerts...
+                        </div>
+                        <div id="no-alerts" class="hidden p-8 text-center">
+                            <svg class="w-12 h-12 mx-auto text-green-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                            <p class="text-gray-500">No pending alerts</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Recent Patients -->
+                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+                    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+                        <h3 class="text-lg font-semibold text-gray-800">Recent Patients</h3>
+                        <a href="/admin/patients" class="text-blue-600 hover:text-blue-700 text-sm font-medium">View All</a>
+                    </div>
+                    <div id="recent-patients" class="divide-y divide-gray-100">
+                        <!-- Recent patients will be populated here -->
+                        <div id="patients-loading" class="p-8 text-center text-gray-500">
+                            <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            Loading patients...
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>
+
+    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+    <script>
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', () => {
+            // Check authentication
+            if (!AdminPanel.isAuthenticated()) {
+                window.location.href = '/admin/login';
+                return;
+            }
+
+            // Set user info
+            const user = AdminPanel.getUser();
+            if (user) {
+                document.getElementById('user-name').textContent = user.name;
+                document.getElementById('user-email').textContent = user.email;
+                document.getElementById('user-initials').textContent = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+            }
+
+            // Initialize charts and data
+            initializeDashboard();
+
+            // Setup event listeners
+            setupEventListeners();
+
+            // Start auto-refresh
+            setInterval(refreshData, 30000); // 30 seconds
+        });
+
+        let sessionsChart = null;
+        let distortionChart = null;
+
+        async function initializeDashboard() {
+            await Promise.all([
+                loadStats(),
+                loadAlerts(),
+                loadRecentPatients(),
+                loadSessionsChart(),
+                loadDistortionChart()
+            ]);
+        }
+
+        async function refreshData() {
+            await Promise.all([
+                loadStats(),
+                loadAlerts()
+            ]);
+            document.getElementById('last-updated').textContent = 'Updated just now';
+        }
+
+        async function loadStats() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/stats');
+                document.getElementById('stat-patients').textContent = data.total_users;
+                document.getElementById('stat-sessions').textContent = data.sessions_today;
+                document.getElementById('stat-alerts').textContent = data.unreviewed_alerts;
+
+                const moodChange = data.avg_mood_change;
+                const moodEl = document.getElementById('stat-mood');
+                if (moodChange > 0) {
+                    moodEl.textContent = '+' + moodChange;
+                    moodEl.classList.add('text-green-600');
+                } else if (moodChange < 0) {
+                    moodEl.textContent = moodChange;
+                    moodEl.classList.add('text-red-600');
+                } else {
+                    moodEl.textContent = '0';
+                }
+            } catch (error) {
+                console.error('Error loading stats:', error);
+            }
+        }
+
+        async function loadAlerts() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/alerts?reviewed=false');
+                const container = document.getElementById('alerts-container');
+                const loading = document.getElementById('alerts-loading');
+                const noAlerts = document.getElementById('no-alerts');
+                const badge = document.getElementById('alert-badge');
+
+                loading.classList.add('hidden');
+
+                if (data.alerts.length === 0) {
+                    noAlerts.classList.remove('hidden');
+                    badge.textContent = '0 pending';
+                    return;
+                }
+
+                noAlerts.classList.add('hidden');
+                badge.textContent = data.alerts.length + ' pending';
+
+                // Clear and populate alerts
+                container.innerHTML = '';
+                data.alerts.slice(0, 5).forEach(alert => {
+                    container.appendChild(createAlertElement(alert));
+                });
+
+            } catch (error) {
+                console.error('Error loading alerts:', error);
+            }
+        }
+
+        function createAlertElement(alert) {
+            const div = document.createElement('div');
+            div.className = 'p-4 hover:bg-red-50 transition-colors';
+            div.innerHTML = `
+                <div class="flex items-start justify-between">
+                    <div class="flex items-start space-x-3">
+                        <div class="w-2 h-2 bg-red-500 rounded-full mt-2 animate-pulse"></div>
+                        <div>
+                            <a href="/admin/patients/${alert.user_id}" class="font-medium text-gray-900 hover:text-blue-600">
+                                ${AdminPanel.escapeHtml(alert.user_name)}
+                            </a>
+                            <span class="ml-2 px-2 py-0.5 bg-red-100 text-red-700 text-xs font-medium rounded">${AdminPanel.escapeHtml(alert.trigger_word)}</span>
+                            <p class="text-sm text-gray-600 mt-1 line-clamp-2">${AdminPanel.escapeHtml(alert.message_content)}</p>
+                            <p class="text-xs text-gray-400 mt-1">${AdminPanel.formatTimeAgo(alert.flagged_at)}</p>
+                        </div>
+                    </div>
+                    <button onclick="reviewAlert('${alert.id}')" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
+                        Review
+                    </button>
+                </div>
+            `;
+            return div;
+        }
+
+        async function reviewAlert(alertId) {
+            try {
+                await AdminPanel.fetchAPI(`/admin/api/alerts/${alertId}/review`, { method: 'POST' });
+                AdminPanel.showToast('Alert marked as reviewed', 'success');
+                await loadAlerts();
+                await loadStats();
+            } catch (error) {
+                AdminPanel.showToast('Failed to review alert', 'error');
+            }
+        }
+
+        async function loadRecentPatients() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/patients');
+                const container = document.getElementById('recent-patients');
+                const loading = document.getElementById('patients-loading');
+
+                loading.classList.add('hidden');
+
+                if (data.patients.length === 0) {
+                    container.innerHTML = '<div class="p-8 text-center text-gray-500">No patients yet</div>';
+                    return;
+                }
+
+                container.innerHTML = '';
+                data.patients.slice(0, 5).forEach(patient => {
+                    const div = document.createElement('div');
+                    div.className = 'p-4 hover:bg-gray-50 transition-colors cursor-pointer';
+                    div.onclick = () => window.location.href = `/admin/patients/${patient.id}`;
+                    div.innerHTML = `
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center">
+                                    <span class="text-white font-semibold text-sm">${patient.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}</span>
+                                </div>
+                                <div>
+                                    <p class="font-medium text-gray-900">${AdminPanel.escapeHtml(patient.name)}</p>
+                                    <p class="text-sm text-gray-500">${patient.total_sessions} sessions</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                ${patient.unreviewed_alerts > 0 ? `<span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-medium rounded-full">${patient.unreviewed_alerts} alerts</span>` : ''}
+                                <span class="text-sm text-gray-400">${patient.last_session_date ? AdminPanel.formatDate(patient.last_session_date) : 'Never'}</span>
+                            </div>
+                        </div>
+                    `;
+                    container.appendChild(div);
+                });
+
+            } catch (error) {
+                console.error('Error loading patients:', error);
+            }
+        }
+
+        async function loadSessionsChart() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/charts/sessions');
+
+                const ctx = document.getElementById('sessionsChart').getContext('2d');
+
+                // Fill missing dates with 0
+                const dates = [];
+                const counts = [];
+                const today = new Date();
+
+                for (let i = 29; i >= 0; i--) {
+                    const date = new Date(today);
+                    date.setDate(date.getDate() - i);
+                    const dateStr = date.toISOString().split('T')[0];
+                    dates.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
+
+                    const found = data.data.find(d => d.date === dateStr);
+                    counts.push(found ? found.count : 0);
+                }
+
+                if (sessionsChart) {
+                    sessionsChart.destroy();
+                }
+
+                sessionsChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: dates,
+                        datasets: [{
+                            label: 'Sessions',
+                            data: counts,
+                            borderColor: '#3B82F6',
+                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                            fill: true,
+                            tension: 0.4,
+                            pointRadius: 0,
+                            pointHoverRadius: 6,
+                            pointHoverBackgroundColor: '#3B82F6',
+                            pointHoverBorderColor: '#fff',
+                            pointHoverBorderWidth: 2
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: { display: false }
+                        },
+                        scales: {
+                            x: {
+                                grid: { display: false },
+                                ticks: {
+                                    maxRotation: 0,
+                                    maxTicksLimit: 7
+                                }
+                            },
+                            y: {
+                                beginAtZero: true,
+                                grid: { color: 'rgba(0,0,0,0.05)' },
+                                ticks: { stepSize: 1 }
+                            }
+                        },
+                        interaction: {
+                            intersect: false,
+                            mode: 'index'
+                        }
+                    }
+                });
+
+            } catch (error) {
+                console.error('Error loading sessions chart:', error);
+            }
+        }
+
+        async function loadDistortionChart() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/charts/distortions');
+
+                const ctx = document.getElementById('distortionChart').getContext('2d');
+
+                if (distortionChart) {
+                    distortionChart.destroy();
+                }
+
+                const labels = {
+                    'G1': 'Binary Thinking',
+                    'G2': 'Overgeneralization',
+                    'G3': 'Attention Bias',
+                    'G4': 'Emotion-Driven'
+                };
+
+                const colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444'];
+
+                distortionChart = new Chart(ctx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: Object.keys(data).map(k => labels[k] || k),
+                        datasets: [{
+                            data: Object.values(data),
+                            backgroundColor: colors,
+                            borderWidth: 0,
+                            hoverOffset: 8
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'right',
+                                labels: {
+                                    usePointStyle: true,
+                                    padding: 16
+                                }
+                            }
+                        },
+                        cutout: '65%'
+                    }
+                });
+
+            } catch (error) {
+                console.error('Error loading distortion chart:', error);
+            }
+        }
+
+        function setupEventListeners() {
+            // Sidebar toggle
+            document.getElementById('open-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.remove('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.remove('hidden');
+            });
+
+            document.getElementById('close-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            document.getElementById('sidebar-overlay').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            // Logout
+            document.getElementById('logout-btn').addEventListener('click', () => {
+                AdminPanel.logout();
+            });
+
+            // Refresh
+            document.getElementById('refresh-btn').addEventListener('click', async () => {
+                const btn = document.getElementById('refresh-btn');
+                btn.classList.add('animate-spin');
+                await refreshData();
+                btn.classList.remove('animate-spin');
+                AdminPanel.showToast('Data refreshed', 'success');
+            });
+        }
+    </script>
+</body>
+</html>

templates/admin_login.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Login - CBT Companion</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        danger: '#EF4444',
+                        warning: '#F59E0B',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 flex items-center justify-center p-4">
+    <!-- Background Pattern -->
+    <div class="absolute inset-0 bg-grid-pattern opacity-10"></div>
+
+    <!-- Login Card -->
+    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 transform transition-all">
+        <!-- Logo & Branding -->
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg mb-4">
+                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                </svg>
+            </div>
+            <h1 class="text-2xl font-bold text-gray-800">CBT Companion</h1>
+            <p class="text-gray-500 mt-1">Admin Portal</p>
+        </div>
+
+        <!-- Error Message -->
+        <div id="error-message" class="hidden mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+            <div class="flex items-center">
+                <svg class="w-5 h-5 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+                <span id="error-text" class="text-red-700 text-sm"></span>
+            </div>
+        </div>
+
+        <!-- Login Form -->
+        <form id="login-form" class="space-y-6">
+            <!-- Email Input -->
+            <div>
+                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
+                <div class="relative">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
+                        </svg>
+                    </div>
+                    <input type="email" id="email" name="email" required
+                        class="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        placeholder="admin@example.com">
+                </div>
+            </div>
+
+            <!-- Password Input -->
+            <div>
+                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
+                <div class="relative">
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                        </svg>
+                    </div>
+                    <input type="password" id="password" name="password" required
+                        class="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        placeholder="Enter your password">
+                </div>
+            </div>
+
+            <!-- Submit Button -->
+            <button type="submit" id="submit-btn"
+                class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform transition-all hover:scale-[1.02] active:scale-[0.98]">
+                <span id="btn-text">Sign In</span>
+                <svg id="btn-spinner" class="hidden animate-spin ml-2 h-5 w-5 text-white inline" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            </button>
+        </form>
+
+        <!-- Footer -->
+        <p class="mt-8 text-center text-sm text-gray-500">
+            Protected area. Authorized personnel only.
+        </p>
+    </div>
+
+    <script>
+        // Check if already logged in
+        const token = localStorage.getItem('admin_token');
+        if (token) {
+            window.location.href = '/admin/dashboard';
+        }
+
+        // Handle form submission
+        document.getElementById('login-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            const errorDiv = document.getElementById('error-message');
+            const errorText = document.getElementById('error-text');
+            const submitBtn = document.getElementById('submit-btn');
+            const btnText = document.getElementById('btn-text');
+            const btnSpinner = document.getElementById('btn-spinner');
+
+            // Show loading state
+            submitBtn.disabled = true;
+            btnText.textContent = 'Signing in...';
+            btnSpinner.classList.remove('hidden');
+            errorDiv.classList.add('hidden');
+
+            try {
+                const response = await fetch('/admin/api/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ email, password })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    // Store token and redirect
+                    localStorage.setItem('admin_token', data.token);
+                    localStorage.setItem('admin_user', JSON.stringify(data.user));
+                    window.location.href = '/admin/dashboard';
+                } else {
+                    // Show error
+                    errorText.textContent = data.error || 'Login failed. Please try again.';
+                    errorDiv.classList.remove('hidden');
+                }
+            } catch (error) {
+                errorText.textContent = 'Network error. Please check your connection.';
+                errorDiv.classList.remove('hidden');
+            } finally {
+                // Reset button state
+                submitBtn.disabled = false;
+                btnText.textContent = 'Sign In';
+                btnSpinner.classList.add('hidden');
+            }
+        });
+    </script>
+</body>
+</html>

templates/admin_patient_detail.html

@@ -0,0 +1,750 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patient Details - CBT Companion Admin</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        danger: '#EF4444',
+                        warning: '#F59E0B',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full transition-transform duration-300 lg:relative lg:translate-x-0">
+            <!-- Logo -->
+            <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                        </svg>
+                    </div>
+                    <span class="text-lg font-bold text-gray-800">CBT Admin</span>
+                </div>
+                <button id="close-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="px-4 py-6 space-y-2">
+                <a href="/admin/dashboard" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Dashboard
+                </a>
+                <a href="/admin/patients" class="flex items-center px-4 py-3 text-blue-600 bg-blue-50 rounded-lg">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                    </svg>
+                    Patients
+                </a>
+            </nav>
+
+            <!-- User Info -->
+            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
+                        <span id="admin-initials" class="text-white font-semibold text-sm">AD</span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <p id="admin-name" class="text-sm font-medium text-gray-900 truncate">Admin</p>
+                        <p id="admin-email" class="text-xs text-gray-500 truncate">admin@example.com</p>
+                    </div>
+                    <button id="logout-btn" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Logout">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-y-auto">
+            <!-- Top Bar -->
+            <header class="bg-white shadow-sm sticky top-0 z-30">
+                <div class="flex items-center justify-between h-16 px-6">
+                    <div class="flex items-center space-x-4">
+                        <button id="open-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                            </svg>
+                        </button>
+                        <a href="/admin/patients" class="text-gray-400 hover:text-gray-600">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                            </svg>
+                        </a>
+                        <h1 class="text-xl font-semibold text-gray-800">Patient Details</h1>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Loading State -->
+            <div id="loading-state" class="flex items-center justify-center h-64">
+                <svg class="animate-spin h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            </div>
+
+            <!-- Patient Content (hidden until loaded) -->
+            <div id="patient-content" class="hidden p-6 space-y-6">
+                <!-- Patient Header -->
+                <div class="bg-white rounded-xl shadow-sm p-6">
+                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
+                        <div class="flex items-center space-x-4">
+                            <div id="patient-avatar" class="w-16 h-16 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center">
+                                <span id="patient-initials" class="text-white font-bold text-xl">--</span>
+                            </div>
+                            <div>
+                                <h2 id="patient-name" class="text-2xl font-bold text-gray-800">Loading...</h2>
+                                <p id="patient-email" class="text-gray-500">loading@example.com</p>
+                                <p id="patient-member-since" class="text-sm text-gray-400 mt-1">Member since --</p>
+                            </div>
+                        </div>
+                        <div class="mt-4 md:mt-0 flex flex-wrap gap-4">
+                            <div class="text-center px-4 py-2 bg-blue-50 rounded-lg">
+                                <p id="stat-sessions" class="text-2xl font-bold text-blue-600">-</p>
+                                <p class="text-xs text-gray-500">Sessions</p>
+                            </div>
+                            <div class="text-center px-4 py-2 bg-green-50 rounded-lg">
+                                <p id="stat-exercises" class="text-2xl font-bold text-green-600">-</p>
+                                <p class="text-xs text-gray-500">Exercises</p>
+                            </div>
+                            <div class="text-center px-4 py-2 bg-purple-50 rounded-lg">
+                                <p id="stat-streak" class="text-2xl font-bold text-purple-600">-</p>
+                                <p class="text-xs text-gray-500">Day Streak</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Tabs -->
+                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+                    <div class="border-b border-gray-200">
+                        <nav class="flex -mb-px overflow-x-auto">
+                            <button class="tab-btn active px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap" data-tab="overview">
+                                Overview
+                            </button>
+                            <button class="tab-btn px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap" data-tab="vitals">
+                                Vitals
+                            </button>
+                            <button class="tab-btn px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap" data-tab="sessions">
+                                Sessions
+                            </button>
+                            <button class="tab-btn px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap" data-tab="crisis">
+                                Crisis History
+                            </button>
+                        </nav>
+                    </div>
+
+                    <!-- Tab Content -->
+                    <div class="p-6">
+                        <!-- Overview Tab -->
+                        <div id="tab-overview" class="tab-content">
+                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                                <!-- Distortion Pattern Radar Chart -->
+                                <div class="bg-gray-50 rounded-lg p-4">
+                                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Distortion Pattern</h3>
+                                    <div class="h-64">
+                                        <canvas id="distortionRadarChart"></canvas>
+                                    </div>
+                                </div>
+
+                                <!-- Mood Tracking Line Chart -->
+                                <div class="bg-gray-50 rounded-lg p-4">
+                                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Mood Tracking</h3>
+                                    <div class="h-64">
+                                        <canvas id="moodChart"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Distortion Legend -->
+                            <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
+                                <div class="bg-blue-50 p-4 rounded-lg">
+                                    <h4 class="font-semibold text-blue-700">G1: Binary Thinking</h4>
+                                    <p class="text-sm text-gray-600 mt-1">All-or-nothing, black-and-white patterns</p>
+                                </div>
+                                <div class="bg-green-50 p-4 rounded-lg">
+                                    <h4 class="font-semibold text-green-700">G2: Overgeneralization</h4>
+                                    <p class="text-sm text-gray-600 mt-1">Broad conclusions from single events</p>
+                                </div>
+                                <div class="bg-yellow-50 p-4 rounded-lg">
+                                    <h4 class="font-semibold text-yellow-700">G3: Attention Bias</h4>
+                                    <p class="text-sm text-gray-600 mt-1">Focus on negatives, filtering positives</p>
+                                </div>
+                                <div class="bg-red-50 p-4 rounded-lg">
+                                    <h4 class="font-semibold text-red-700">G4: Emotion-Driven</h4>
+                                    <p class="text-sm text-gray-600 mt-1">Feelings treated as facts</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Vitals Tab -->
+                        <div id="tab-vitals" class="tab-content hidden">
+                            <!-- Current Readings -->
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                                <div class="bg-red-50 rounded-lg p-4">
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <p class="text-sm text-gray-500">Heart Rate (PPG)</p>
+                                            <p id="vital-ppg" class="text-2xl font-bold text-red-600">--</p>
+                                        </div>
+                                        <svg class="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                                        </svg>
+                                    </div>
+                                    <p id="vital-ppg-time" class="text-xs text-gray-400 mt-2">Last updated: --</p>
+                                </div>
+                                <div class="bg-blue-50 rounded-lg p-4">
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <p class="text-sm text-gray-500">Skin Conductance (GSR)</p>
+                                            <p id="vital-gsr" class="text-2xl font-bold text-blue-600">--</p>
+                                        </div>
+                                        <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                        </svg>
+                                    </div>
+                                    <p id="vital-gsr-time" class="text-xs text-gray-400 mt-2">Last updated: --</p>
+                                </div>
+                                <div class="bg-green-50 rounded-lg p-4">
+                                    <div class="flex items-center justify-between">
+                                        <div>
+                                            <p class="text-sm text-gray-500">Activity Level</p>
+                                            <p id="vital-activity" class="text-2xl font-bold text-green-600">--</p>
+                                        </div>
+                                        <svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                                        </svg>
+                                    </div>
+                                    <p id="vital-activity-time" class="text-xs text-gray-400 mt-2">X: -- Y: -- Z: --</p>
+                                </div>
+                            </div>
+
+                            <!-- Vitals Charts -->
+                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                                <div class="bg-gray-50 rounded-lg p-4">
+                                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Heart Rate Trend (24h)</h3>
+                                    <div class="h-64">
+                                        <canvas id="ppgChart"></canvas>
+                                    </div>
+                                </div>
+                                <div class="bg-gray-50 rounded-lg p-4">
+                                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Skin Conductance (24h)</h3>
+                                    <div class="h-64">
+                                        <canvas id="gsrChart"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Vitals Summary Table -->
+                            <div class="mt-6 bg-gray-50 rounded-lg p-4">
+                                <h3 class="text-lg font-semibold text-gray-800 mb-4">Vitals Summary</h3>
+                                <div class="overflow-x-auto">
+                                    <table class="min-w-full">
+                                        <thead>
+                                            <tr class="border-b border-gray-200">
+                                                <th class="text-left py-2 text-sm font-medium text-gray-500">Metric</th>
+                                                <th class="text-center py-2 text-sm font-medium text-gray-500">Min</th>
+                                                <th class="text-center py-2 text-sm font-medium text-gray-500">Avg</th>
+                                                <th class="text-center py-2 text-sm font-medium text-gray-500">Max</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody id="vitals-summary-body">
+                                            <tr>
+                                                <td colspan="4" class="py-4 text-center text-gray-500">Loading...</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Sessions Tab -->
+                        <div id="tab-sessions" class="tab-content hidden">
+                            <div id="sessions-timeline" class="space-y-4">
+                                <!-- Sessions will be populated here -->
+                                <div class="text-center text-gray-500 py-8">Loading sessions...</div>
+                            </div>
+                        </div>
+
+                        <!-- Crisis History Tab -->
+                        <div id="tab-crisis" class="tab-content hidden">
+                            <div id="crisis-history" class="space-y-4">
+                                <!-- Crisis history will be populated here -->
+                                <div class="text-center text-gray-500 py-8">Loading crisis history...</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>
+
+    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+    <script>
+        const userId = '{{ user_id }}';
+        let patientData = null;
+        let distortionRadarChart = null;
+        let moodChart = null;
+        let ppgChart = null;
+        let gsrChart = null;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Check authentication
+            if (!AdminPanel.isAuthenticated()) {
+                window.location.href = '/admin/login';
+                return;
+            }
+
+            // Set admin user info
+            const user = AdminPanel.getUser();
+            if (user) {
+                document.getElementById('admin-name').textContent = user.name;
+                document.getElementById('admin-email').textContent = user.email;
+                document.getElementById('admin-initials').textContent = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+            }
+
+            // Load patient data
+            loadPatientData();
+
+            // Setup event listeners
+            setupEventListeners();
+        });
+
+        async function loadPatientData() {
+            try {
+                patientData = await AdminPanel.fetchAPI(`/admin/api/patients/${userId}`);
+
+                // Update header
+                document.getElementById('patient-name').textContent = patientData.name;
+                document.getElementById('patient-email').textContent = patientData.email;
+                document.getElementById('patient-initials').textContent = patientData.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+                document.getElementById('patient-member-since').textContent = `Member since ${AdminPanel.formatDate(patientData.created_at)}`;
+
+                // Update stats
+                document.getElementById('stat-sessions').textContent = patientData.stats.total_sessions;
+                document.getElementById('stat-exercises').textContent = patientData.stats.total_exercises;
+                document.getElementById('stat-streak').textContent = patientData.stats.current_streak;
+
+                // Show content
+                document.getElementById('loading-state').classList.add('hidden');
+                document.getElementById('patient-content').classList.remove('hidden');
+
+                // Load charts
+                loadDistortionRadarChart();
+                loadMoodChart();
+                loadVitalsData();
+                loadSessionsTimeline();
+                loadCrisisHistory();
+
+            } catch (error) {
+                console.error('Error loading patient:', error);
+                AdminPanel.showToast('Failed to load patient data', 'error');
+            }
+        }
+
+        function loadDistortionRadarChart() {
+            const ctx = document.getElementById('distortionRadarChart').getContext('2d');
+            const pattern = patientData.distortion_pattern;
+
+            if (distortionRadarChart) distortionRadarChart.destroy();
+
+            distortionRadarChart = new Chart(ctx, {
+                type: 'radar',
+                data: {
+                    labels: ['Binary Thinking (G1)', 'Overgeneralization (G2)', 'Attention Bias (G3)', 'Emotion-Driven (G4)'],
+                    datasets: [{
+                        label: 'Occurrences',
+                        data: [pattern.G1, pattern.G2, pattern.G3, pattern.G4],
+                        backgroundColor: 'rgba(59, 130, 246, 0.2)',
+                        borderColor: '#3B82F6',
+                        borderWidth: 2,
+                        pointBackgroundColor: '#3B82F6',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        r: {
+                            beginAtZero: true,
+                            ticks: { stepSize: 1 }
+                        }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        }
+
+        function loadMoodChart() {
+            const ctx = document.getElementById('moodChart').getContext('2d');
+            const moodHistory = patientData.mood_history || [];
+
+            if (moodChart) moodChart.destroy();
+
+            const labels = moodHistory.map(m => AdminPanel.formatDate(m.date));
+            const moodStart = moodHistory.map(m => m.mood_start);
+            const moodEnd = moodHistory.map(m => m.mood_end);
+
+            moodChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Mood Start',
+                            data: moodStart,
+                            borderColor: '#EF4444',
+                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                            tension: 0.4,
+                            fill: false
+                        },
+                        {
+                            label: 'Mood End',
+                            data: moodEnd,
+                            borderColor: '#10B981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            tension: 0.4,
+                            fill: false
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 10,
+                            title: { display: true, text: 'Mood Level' }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    }
+                }
+            });
+        }
+
+        async function loadVitalsData() {
+            try {
+                const vitalsData = await AdminPanel.fetchAPI(`/admin/api/charts/vitals/${userId}?hours=24`);
+                const summary = patientData.wearable_summary;
+
+                // Update current readings
+                if (summary.latest) {
+                    document.getElementById('vital-ppg').textContent = summary.latest.ppg.toFixed(1);
+                    document.getElementById('vital-gsr').textContent = summary.latest.gsr.toFixed(4);
+                    const magnitude = Math.sqrt(
+                        Math.pow(summary.latest.acc_x, 2) +
+                        Math.pow(summary.latest.acc_y, 2) +
+                        Math.pow(summary.latest.acc_z, 2)
+                    ).toFixed(2);
+                    document.getElementById('vital-activity').textContent = magnitude;
+                    document.getElementById('vital-ppg-time').textContent = `Last updated: ${AdminPanel.formatTimeAgo(summary.latest.recorded_at)}`;
+                    document.getElementById('vital-gsr-time').textContent = `Last updated: ${AdminPanel.formatTimeAgo(summary.latest.recorded_at)}`;
+                    document.getElementById('vital-activity-time').textContent = `X: ${summary.latest.acc_x.toFixed(2)} Y: ${summary.latest.acc_y.toFixed(2)} Z: ${summary.latest.acc_z.toFixed(2)}`;
+                }
+
+                // Update summary table
+                const dayStats = summary.day;
+                const summaryBody = document.getElementById('vitals-summary-body');
+                summaryBody.innerHTML = `
+                    <tr class="border-b border-gray-100">
+                        <td class="py-2 text-sm text-gray-900">Heart Rate (PPG)</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.ppg.min ?? '--'}</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.ppg.avg ?? '--'}</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.ppg.max ?? '--'}</td>
+                    </tr>
+                    <tr class="border-b border-gray-100">
+                        <td class="py-2 text-sm text-gray-900">Skin Conductance (GSR)</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.gsr.min ?? '--'}</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.gsr.avg ?? '--'}</td>
+                        <td class="py-2 text-sm text-center text-gray-600">${dayStats.gsr.max ?? '--'}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-2 text-sm text-gray-900">Readings (24h)</td>
+                        <td colspan="3" class="py-2 text-sm text-center text-gray-600">${dayStats.reading_count} readings</td>
+                    </tr>
+                `;
+
+                // Load charts
+                loadPPGChart(vitalsData.data);
+                loadGSRChart(vitalsData.data);
+
+            } catch (error) {
+                console.error('Error loading vitals:', error);
+            }
+        }
+
+        function loadPPGChart(data) {
+            const ctx = document.getElementById('ppgChart').getContext('2d');
+
+            if (ppgChart) ppgChart.destroy();
+
+            if (data.length === 0) {
+                ctx.font = '14px sans-serif';
+                ctx.fillStyle = '#9CA3AF';
+                ctx.textAlign = 'center';
+                ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
+                return;
+            }
+
+            ppgChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(d => new Date(d.recorded_at).toLocaleTimeString()),
+                    datasets: [{
+                        label: 'PPG',
+                        data: data.map(d => d.ppg),
+                        borderColor: '#EF4444',
+                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                        fill: true,
+                        tension: 0.4,
+                        pointRadius: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { display: false },
+                        y: { beginAtZero: false }
+                    }
+                }
+            });
+        }
+
+        function loadGSRChart(data) {
+            const ctx = document.getElementById('gsrChart').getContext('2d');
+
+            if (gsrChart) gsrChart.destroy();
+
+            if (data.length === 0) {
+                ctx.font = '14px sans-serif';
+                ctx.fillStyle = '#9CA3AF';
+                ctx.textAlign = 'center';
+                ctx.fillText('No data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
+                return;
+            }
+
+            gsrChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(d => new Date(d.recorded_at).toLocaleTimeString()),
+                    datasets: [{
+                        label: 'GSR',
+                        data: data.map(d => d.gsr),
+                        borderColor: '#3B82F6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        fill: true,
+                        tension: 0.4,
+                        pointRadius: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { display: false },
+                        y: { beginAtZero: false }
+                    }
+                }
+            });
+        }
+
+        function loadSessionsTimeline() {
+            const container = document.getElementById('sessions-timeline');
+            const sessions = patientData.sessions || [];
+
+            if (sessions.length === 0) {
+                container.innerHTML = `
+                    <div class="text-center py-8">
+                        <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                        </svg>
+                        <p class="text-gray-500">No sessions yet</p>
+                    </div>
+                `;
+                return;
+            }
+
+            const groupNames = {
+                'G1': 'Binary Thinking',
+                'G2': 'Overgeneralization',
+                'G3': 'Attention Bias',
+                'G4': 'Emotion-Driven',
+                'G0': 'No Distortion'
+            };
+
+            container.innerHTML = sessions.map(session => {
+                const moodChange = session.mood_end && session.mood_start ? session.mood_end - session.mood_start : null;
+                const moodArrow = moodChange !== null
+                    ? (moodChange > 0 ? '<span class="text-green-500">+' + moodChange + '</span>' : (moodChange < 0 ? '<span class="text-red-500">' + moodChange + '</span>' : '<span class="text-gray-500">0</span>'))
+                    : '<span class="text-gray-400">--</span>';
+
+                return `
+                    <div class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center space-x-4">
+                                <div class="w-10 h-10 rounded-full flex items-center justify-center ${session.completed ? 'bg-green-100' : 'bg-gray-200'}">
+                                    ${session.completed
+                                        ? '<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'
+                                        : '<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'}
+                                </div>
+                                <div>
+                                    <p class="font-medium text-gray-900">${AdminPanel.formatDate(session.started_at)}</p>
+                                    <p class="text-sm text-gray-500">${session.locked_group ? groupNames[session.locked_group] || session.locked_group : 'N/A'}</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-6 text-sm">
+                                <div class="text-center">
+                                    <p class="text-gray-500">Mood</p>
+                                    <p class="font-medium">${moodArrow}</p>
+                                </div>
+                                <div class="text-center">
+                                    <p class="text-gray-500">Stage</p>
+                                    <p class="font-medium text-gray-900">${session.stages_reached || 1}/3</p>
+                                </div>
+                                <span class="px-2 py-1 text-xs font-medium rounded-full ${session.completed ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}">
+                                    ${session.completed ? 'Completed' : 'Incomplete'}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        function loadCrisisHistory() {
+            const container = document.getElementById('crisis-history');
+            const crisisHistory = patientData.crisis_history || [];
+
+            if (crisisHistory.length === 0) {
+                container.innerHTML = `
+                    <div class="text-center py-8">
+                        <svg class="w-12 h-12 mx-auto text-green-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <p class="text-gray-500">No crisis flags recorded</p>
+                    </div>
+                `;
+                return;
+            }
+
+            container.innerHTML = crisisHistory.map(crisis => `
+                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+                    <div class="flex items-start justify-between">
+                        <div class="flex items-start space-x-3">
+                            <div class="w-2 h-2 bg-red-500 rounded-full mt-2 ${!crisis.reviewed ? 'animate-pulse' : ''}"></div>
+                            <div>
+                                <div class="flex items-center space-x-2">
+                                    <span class="px-2 py-0.5 bg-red-100 text-red-700 text-xs font-medium rounded">${AdminPanel.escapeHtml(crisis.trigger_word)}</span>
+                                    <span class="text-sm text-gray-500">${AdminPanel.formatTimeAgo(crisis.flagged_at)}</span>
+                                </div>
+                                <p class="text-gray-700 mt-2">${AdminPanel.escapeHtml(crisis.message_content)}</p>
+                            </div>
+                        </div>
+                        <span class="px-2 py-1 text-xs font-medium rounded-full ${crisis.reviewed ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}">
+                            ${crisis.reviewed ? 'Reviewed' : 'Pending'}
+                        </span>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function setupEventListeners() {
+            // Tab switching
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    // Update buttons
+                    document.querySelectorAll('.tab-btn').forEach(b => {
+                        b.classList.remove('active', 'text-blue-600', 'border-blue-600');
+                        b.classList.add('text-gray-500', 'border-transparent', 'hover:text-gray-700');
+                    });
+                    btn.classList.add('active', 'text-blue-600', 'border-blue-600');
+                    btn.classList.remove('text-gray-500', 'border-transparent', 'hover:text-gray-700');
+
+                    // Update content
+                    document.querySelectorAll('.tab-content').forEach(content => {
+                        content.classList.add('hidden');
+                    });
+                    document.getElementById(`tab-${btn.dataset.tab}`).classList.remove('hidden');
+                });
+            });
+
+            // Sidebar toggle
+            document.getElementById('open-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.remove('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.remove('hidden');
+            });
+
+            document.getElementById('close-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            document.getElementById('sidebar-overlay').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            // Logout
+            document.getElementById('logout-btn').addEventListener('click', () => {
+                AdminPanel.logout();
+            });
+        }
+    </script>
+
+    <style>
+        .tab-btn {
+            border-color: transparent;
+            color: #6B7280;
+        }
+        .tab-btn:hover {
+            color: #374151;
+        }
+        .tab-btn.active {
+            color: #3B82F6;
+            border-color: #3B82F6;
+        }
+    </style>
+</body>
+</html>

templates/admin_patients.html

@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Patients - CBT Companion Admin</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        danger: '#EF4444',
+                        warning: '#F59E0B',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transform -translate-x-full transition-transform duration-300 lg:relative lg:translate-x-0">
+            <!-- Logo -->
+            <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+                        </svg>
+                    </div>
+                    <span class="text-lg font-bold text-gray-800">CBT Admin</span>
+                </div>
+                <button id="close-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="px-4 py-6 space-y-2">
+                <a href="/admin/dashboard" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                    </svg>
+                    Dashboard
+                </a>
+                <a href="/admin/patients" class="flex items-center px-4 py-3 text-blue-600 bg-blue-50 rounded-lg">
+                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+                    </svg>
+                    Patients
+                </a>
+            </nav>
+
+            <!-- User Info -->
+            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
+                        <span id="user-initials" class="text-white font-semibold text-sm">AD</span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <p id="user-name" class="text-sm font-medium text-gray-900 truncate">Admin</p>
+                        <p id="user-email" class="text-xs text-gray-500 truncate">admin@example.com</p>
+                    </div>
+                    <button id="logout-btn" class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Logout">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-y-auto">
+            <!-- Top Bar -->
+            <header class="bg-white shadow-sm sticky top-0 z-30">
+                <div class="flex items-center justify-between h-16 px-6">
+                    <div class="flex items-center space-x-4">
+                        <button id="open-sidebar" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
+                            <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                            </svg>
+                        </button>
+                        <h1 class="text-xl font-semibold text-gray-800">Patients</h1>
+                    </div>
+                    <button id="export-btn" class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        Export CSV
+                    </button>
+                </div>
+            </header>
+
+            <!-- Patients Content -->
+            <div class="p-6">
+                <!-- Search and Filters -->
+                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
+                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                        <!-- Search -->
+                        <div class="relative flex-1 max-w-md">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                </svg>
+                            </div>
+                            <input type="text" id="search-input" placeholder="Search patients..."
+                                class="block w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+
+                        <!-- Filters -->
+                        <div class="flex items-center gap-4">
+                            <select id="filter-status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">All Status</option>
+                                <option value="active">Active (7 days)</option>
+                                <option value="inactive">Inactive</option>
+                            </select>
+                            <select id="filter-alerts" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">All Alerts</option>
+                                <option value="has-alerts">Has Alerts</option>
+                                <option value="no-alerts">No Alerts</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Patients Table -->
+                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50">
+                                <tr>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="name">
+                                        <div class="flex items-center">
+                                            Patient
+                                            <svg class="w-4 h-4 ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Email
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="sessions">
+                                        <div class="flex items-center">
+                                            Sessions
+                                            <svg class="w-4 h-4 ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" data-sort="last_active">
+                                        <div class="flex items-center">
+                                            Last Active
+                                            <svg class="w-4 h-4 ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
+                                            </svg>
+                                        </div>
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Alerts
+                                    </th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                        Status
+                                    </th>
+                                    <th scope="col" class="relative px-6 py-3">
+                                        <span class="sr-only">Actions</span>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody id="patients-table-body" class="bg-white divide-y divide-gray-200">
+                                <!-- Loading state -->
+                                <tr id="loading-row">
+                                    <td colspan="7" class="px-6 py-12 text-center">
+                                        <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24">
+                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                        </svg>
+                                        <p class="text-gray-500">Loading patients...</p>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <!-- Pagination -->
+                    <div id="pagination" class="hidden px-6 py-4 border-t border-gray-200 flex items-center justify-between">
+                        <p class="text-sm text-gray-500">
+                            Showing <span id="showing-start">1</span> to <span id="showing-end">10</span> of <span id="total-count">0</span> patients
+                        </p>
+                        <div class="flex items-center space-x-2">
+                            <button id="prev-page" class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+                                Previous
+                            </button>
+                            <span id="page-info" class="text-sm text-gray-600">Page 1</span>
+                            <button id="next-page" class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div>
+
+    <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+    <script>
+        let allPatients = [];
+        let filteredPatients = [];
+        let currentPage = 1;
+        const pageSize = 10;
+        let sortField = 'name';
+        let sortDirection = 'asc';
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Check authentication
+            if (!AdminPanel.isAuthenticated()) {
+                window.location.href = '/admin/login';
+                return;
+            }
+
+            // Set user info
+            const user = AdminPanel.getUser();
+            if (user) {
+                document.getElementById('user-name').textContent = user.name;
+                document.getElementById('user-email').textContent = user.email;
+                document.getElementById('user-initials').textContent = user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+            }
+
+            // Load patients
+            loadPatients();
+
+            // Setup event listeners
+            setupEventListeners();
+        });
+
+        async function loadPatients() {
+            try {
+                const data = await AdminPanel.fetchAPI('/admin/api/patients');
+                allPatients = data.patients;
+                applyFilters();
+            } catch (error) {
+                console.error('Error loading patients:', error);
+                AdminPanel.showToast('Failed to load patients', 'error');
+            }
+        }
+
+        function applyFilters() {
+            const search = document.getElementById('search-input').value.toLowerCase();
+            const statusFilter = document.getElementById('filter-status').value;
+            const alertsFilter = document.getElementById('filter-alerts').value;
+
+            filteredPatients = allPatients.filter(patient => {
+                // Search filter
+                const matchesSearch = !search ||
+                    patient.name.toLowerCase().includes(search) ||
+                    patient.email.toLowerCase().includes(search);
+
+                // Status filter
+                let matchesStatus = true;
+                if (statusFilter === 'active') {
+                    const lastActive = patient.last_session_date ? new Date(patient.last_session_date) : null;
+                    const sevenDaysAgo = new Date();
+                    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+                    matchesStatus = lastActive && lastActive >= sevenDaysAgo;
+                } else if (statusFilter === 'inactive') {
+                    const lastActive = patient.last_session_date ? new Date(patient.last_session_date) : null;
+                    const sevenDaysAgo = new Date();
+                    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+                    matchesStatus = !lastActive || lastActive < sevenDaysAgo;
+                }
+
+                // Alerts filter
+                let matchesAlerts = true;
+                if (alertsFilter === 'has-alerts') {
+                    matchesAlerts = patient.unreviewed_alerts > 0;
+                } else if (alertsFilter === 'no-alerts') {
+                    matchesAlerts = patient.unreviewed_alerts === 0;
+                }
+
+                return matchesSearch && matchesStatus && matchesAlerts;
+            });
+
+            // Sort
+            sortPatients();
+
+            // Reset to first page
+            currentPage = 1;
+            renderPatients();
+        }
+
+        function sortPatients() {
+            filteredPatients.sort((a, b) => {
+                let valA, valB;
+
+                switch (sortField) {
+                    case 'name':
+                        valA = a.name.toLowerCase();
+                        valB = b.name.toLowerCase();
+                        break;
+                    case 'sessions':
+                        valA = a.total_sessions;
+                        valB = b.total_sessions;
+                        break;
+                    case 'last_active':
+                        valA = a.last_session_date ? new Date(a.last_session_date) : new Date(0);
+                        valB = b.last_session_date ? new Date(b.last_session_date) : new Date(0);
+                        break;
+                    default:
+                        return 0;
+                }
+
+                if (valA < valB) return sortDirection === 'asc' ? -1 : 1;
+                if (valA > valB) return sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+
+        function renderPatients() {
+            const tbody = document.getElementById('patients-table-body');
+            const loadingRow = document.getElementById('loading-row');
+            const pagination = document.getElementById('pagination');
+
+            if (loadingRow) loadingRow.remove();
+
+            // Calculate pagination
+            const totalPages = Math.ceil(filteredPatients.length / pageSize);
+            const start = (currentPage - 1) * pageSize;
+            const end = Math.min(start + pageSize, filteredPatients.length);
+            const pagePatients = filteredPatients.slice(start, end);
+
+            // Clear table
+            tbody.innerHTML = '';
+
+            if (pagePatients.length === 0) {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="7" class="px-6 py-12 text-center text-gray-500">
+                            No patients found
+                        </td>
+                    </tr>
+                `;
+                pagination.classList.add('hidden');
+                return;
+            }
+
+            // Render patients
+            pagePatients.forEach(patient => {
+                const row = createPatientRow(patient);
+                tbody.appendChild(row);
+            });
+
+            // Update pagination
+            pagination.classList.remove('hidden');
+            document.getElementById('showing-start').textContent = start + 1;
+            document.getElementById('showing-end').textContent = end;
+            document.getElementById('total-count').textContent = filteredPatients.length;
+            document.getElementById('page-info').textContent = `Page ${currentPage} of ${totalPages || 1}`;
+            document.getElementById('prev-page').disabled = currentPage === 1;
+            document.getElementById('next-page').disabled = currentPage >= totalPages;
+        }
+
+        function createPatientRow(patient) {
+            const row = document.createElement('tr');
+            row.className = 'hover:bg-gray-50 cursor-pointer transition-colors';
+            row.onclick = () => window.location.href = `/admin/patients/${patient.id}`;
+
+            const lastActive = patient.last_session_date ? new Date(patient.last_session_date) : null;
+            const sevenDaysAgo = new Date();
+            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+            const isActive = lastActive && lastActive >= sevenDaysAgo;
+
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                        <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center flex-shrink-0">
+                            <span class="text-white font-semibold text-sm">${patient.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}</span>
+                        </div>
+                        <div class="ml-4">
+                            <div class="text-sm font-medium text-gray-900">${AdminPanel.escapeHtml(patient.name)}</div>
+                            <div class="text-sm text-gray-500">${patient.context || 'person'}</div>
+                        </div>
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    ${AdminPanel.escapeHtml(patient.email)}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    ${patient.total_sessions}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    ${lastActive ? AdminPanel.formatDate(patient.last_session_date) : 'Never'}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    ${patient.unreviewed_alerts > 0
+                        ? `<span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-700 rounded-full">${patient.unreviewed_alerts} pending</span>`
+                        : '<span class="text-gray-400">-</span>'}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    ${isActive
+                        ? '<span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">Active</span>'
+                        : '<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">Inactive</span>'}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button onclick="event.stopPropagation(); window.location.href='/admin/patients/${patient.id}'" class="text-blue-600 hover:text-blue-900">
+                        View
+                    </button>
+                </td>
+            `;
+
+            return row;
+        }
+
+        function exportCSV() {
+            if (filteredPatients.length === 0) {
+                AdminPanel.showToast('No patients to export', 'warning');
+                return;
+            }
+
+            const headers = ['Name', 'Email', 'Context', 'Total Sessions', 'Total Exercises', 'Current Streak', 'Last Session', 'Unreviewed Alerts', 'Created At'];
+            const rows = filteredPatients.map(p => [
+                p.name,
+                p.email,
+                p.context,
+                p.total_sessions,
+                p.total_exercises,
+                p.current_streak,
+                p.last_session_date || '',
+                p.unreviewed_alerts,
+                p.created_at
+            ]);
+
+            const csvContent = [headers, ...rows]
+                .map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+                .join('\n');
+
+            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `patients_export_${new Date().toISOString().split('T')[0]}.csv`;
+            link.click();
+
+            AdminPanel.showToast('CSV exported successfully', 'success');
+        }
+
+        function setupEventListeners() {
+            // Search
+            let searchTimeout;
+            document.getElementById('search-input').addEventListener('input', () => {
+                clearTimeout(searchTimeout);
+                searchTimeout = setTimeout(applyFilters, 300);
+            });
+
+            // Filters
+            document.getElementById('filter-status').addEventListener('change', applyFilters);
+            document.getElementById('filter-alerts').addEventListener('change', applyFilters);
+
+            // Sort headers
+            document.querySelectorAll('[data-sort]').forEach(header => {
+                header.addEventListener('click', () => {
+                    const field = header.dataset.sort;
+                    if (sortField === field) {
+                        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+                    } else {
+                        sortField = field;
+                        sortDirection = 'asc';
+                    }
+                    applyFilters();
+                });
+            });
+
+            // Pagination
+            document.getElementById('prev-page').addEventListener('click', () => {
+                if (currentPage > 1) {
+                    currentPage--;
+                    renderPatients();
+                }
+            });
+
+            document.getElementById('next-page').addEventListener('click', () => {
+                const totalPages = Math.ceil(filteredPatients.length / pageSize);
+                if (currentPage < totalPages) {
+                    currentPage++;
+                    renderPatients();
+                }
+            });
+
+            // Export
+            document.getElementById('export-btn').addEventListener('click', exportCSV);
+
+            // Sidebar toggle
+            document.getElementById('open-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.remove('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.remove('hidden');
+            });
+
+            document.getElementById('close-sidebar').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            document.getElementById('sidebar-overlay').addEventListener('click', () => {
+                document.getElementById('sidebar').classList.add('-translate-x-full');
+                document.getElementById('sidebar-overlay').classList.add('hidden');
+            });
+
+            // Logout
+            document.getElementById('logout-btn').addEventListener('click', () => {
+                AdminPanel.logout();
+            });
+        }
+    </script>
+</body>
+</html>

wearable.py

@@ -0,0 +1,241 @@
+"""
+Wearable Device Module
+Handles sensor data from wearable devices (PPG, GSR, Accelerometer)
+"""
+
+from flask import Blueprint, request, jsonify
+from auth import token_required
+from database import get_db
+from datetime import datetime
+
+wearable_bp = Blueprint('wearable', __name__)
+
+
+@wearable_bp.route("/api/wearable/data", methods=["POST"])
+@token_required
+def receive_sensor_data():
+    """
+    Receive sensor data from wearable device.
+
+    Expected JSON payload:
+    {
+        "ppg": 75.5,           # Photoplethysmography value (heart rate/pulse)
+        "gsr": 2.3,            # Galvanic Skin Response (skin conductance)
+        "acc_x": 0.12,         # Accelerometer X-axis
+        "acc_y": -0.05,        # Accelerometer Y-axis
+        "acc_z": 9.81,         # Accelerometer Z-axis
+        "timestamp": "2024-01-31T12:00:00Z"  # Optional: device timestamp
+    }
+    """
+    try:
+        user = request.current_user
+        db = get_db()
+
+        data = request.json
+
+        if not data:
+            return jsonify({"error": "No data provided"}), 400
+
+        # Extract sensor values
+        ppg = data.get("ppg")
+        gsr = data.get("gsr")
+        acc_x = data.get("acc_x")
+        acc_y = data.get("acc_y")
+        acc_z = data.get("acc_z")
+        device_timestamp = data.get("timestamp")
+
+        # Validate required fields
+        if ppg is None or gsr is None:
+            return jsonify({"error": "ppg and gsr values are required"}), 400
+
+        if acc_x is None or acc_y is None or acc_z is None:
+            return jsonify({"error": "acc_x, acc_y, and acc_z values are required"}), 400
+
+        # Save to database
+        record_id = db.save_wearable_data(
+            user_id=user["id"],
+            ppg=float(ppg),
+            gsr=float(gsr),
+            acc_x=float(acc_x),
+            acc_y=float(acc_y),
+            acc_z=float(acc_z),
+            device_timestamp=device_timestamp
+        )
+
+        return jsonify({
+            "success": True,
+            "record_id": record_id,
+            "message": "Sensor data saved successfully"
+        })
+
+    except ValueError as e:
+        return jsonify({"error": f"Invalid data format: {str(e)}"}), 400
+    except Exception as e:
+        print(f"Error saving wearable data: {str(e)}")
+        return jsonify({"error": "Failed to save sensor data"}), 500
+
+
+@wearable_bp.route("/api/wearable/batch", methods=["POST"])
+@token_required
+def receive_batch_data():
+    """
+    Receive batch sensor data from wearable device.
+    Useful for sending multiple readings at once (e.g., when device reconnects).
+
+    Expected JSON payload:
+    {
+        "readings": [
+            {"ppg": 75.5, "gsr": 2.3, "acc_x": 0.1, "acc_y": -0.05, "acc_z": 9.81, "timestamp": "..."},
+            {"ppg": 76.0, "gsr": 2.4, "acc_x": 0.2, "acc_y": -0.04, "acc_z": 9.80, "timestamp": "..."},
+            ...
+        ]
+    }
+    """
+    try:
+        user = request.current_user
+        db = get_db()
+
+        data = request.json
+        readings = data.get("readings", [])
+
+        if not readings:
+            return jsonify({"error": "No readings provided"}), 400
+
+        if len(readings) > 1000:
+            return jsonify({"error": "Maximum 1000 readings per batch"}), 400
+
+        saved_count = 0
+        errors = []
+
+        for i, reading in enumerate(readings):
+            try:
+                ppg = reading.get("ppg")
+                gsr = reading.get("gsr")
+                acc_x = reading.get("acc_x")
+                acc_y = reading.get("acc_y")
+                acc_z = reading.get("acc_z")
+                device_timestamp = reading.get("timestamp")
+
+                if None in (ppg, gsr, acc_x, acc_y, acc_z):
+                    errors.append(f"Reading {i}: missing required fields")
+                    continue
+
+                db.save_wearable_data(
+                    user_id=user["id"],
+                    ppg=float(ppg),
+                    gsr=float(gsr),
+                    acc_x=float(acc_x),
+                    acc_y=float(acc_y),
+                    acc_z=float(acc_z),
+                    device_timestamp=device_timestamp
+                )
+                saved_count += 1
+
+            except (ValueError, TypeError) as e:
+                errors.append(f"Reading {i}: {str(e)}")
+
+        return jsonify({
+            "success": True,
+            "saved_count": saved_count,
+            "total_readings": len(readings),
+            "errors": errors if errors else None
+        })
+
+    except Exception as e:
+        print(f"Error saving batch wearable data: {str(e)}")
+        return jsonify({"error": "Failed to save batch data"}), 500
+
+
+@wearable_bp.route("/api/wearable/history", methods=["GET"])
+@token_required
+def get_sensor_history():
+    """
+    Get user's sensor data history.
+
+    Query parameters:
+    - limit: Number of records to return (default: 100, max: 1000)
+    - offset: Number of records to skip (for pagination)
+    - start_date: Filter records from this date (ISO format)
+    - end_date: Filter records until this date (ISO format)
+    """
+    try:
+        user = request.current_user
+        db = get_db()
+
+        limit = min(int(request.args.get("limit", 100)), 1000)
+        offset = int(request.args.get("offset", 0))
+        start_date = request.args.get("start_date")
+        end_date = request.args.get("end_date")
+
+        records = db.get_wearable_history(
+            user_id=user["id"],
+            limit=limit,
+            offset=offset,
+            start_date=start_date,
+            end_date=end_date
+        )
+
+        return jsonify({
+            "records": records,
+            "count": len(records),
+            "limit": limit,
+            "offset": offset
+        })
+
+    except Exception as e:
+        print(f"Error fetching wearable history: {str(e)}")
+        return jsonify({"error": "Failed to fetch sensor history"}), 500
+
+
+@wearable_bp.route("/api/wearable/latest", methods=["GET"])
+@token_required
+def get_latest_reading():
+    """Get the most recent sensor reading for the user."""
+    try:
+        user = request.current_user
+        db = get_db()
+
+        record = db.get_latest_wearable_data(user["id"])
+
+        if not record:
+            return jsonify({
+                "record": None,
+                "message": "No sensor data found"
+            })
+
+        return jsonify({
+            "record": record
+        })
+
+    except Exception as e:
+        print(f"Error fetching latest wearable data: {str(e)}")
+        return jsonify({"error": "Failed to fetch latest reading"}), 500
+
+
+@wearable_bp.route("/api/wearable/stats", methods=["GET"])
+@token_required
+def get_sensor_stats():
+    """
+    Get aggregated statistics for user's sensor data.
+
+    Query parameters:
+    - period: 'day', 'week', 'month' (default: 'day')
+    """
+    try:
+        user = request.current_user
+        db = get_db()
+
+        period = request.args.get("period", "day")
+        if period not in ("day", "week", "month"):
+            return jsonify({"error": "Invalid period. Use 'day', 'week', or 'month'"}), 400
+
+        stats = db.get_wearable_stats(user["id"], period)
+
+        return jsonify({
+            "period": period,
+            "stats": stats
+        })
+
+    except Exception as e:
+        print(f"Error fetching wearable stats: {str(e)}")
+        return jsonify({"error": "Failed to fetch sensor statistics"}), 500