Upload 7 files

.env

@@ -0,0 +1,19 @@
+# Airtable Configuration
+# Replace these values with your actual Airtable credentials
+
+# Your Airtable Base ID (found in your Airtable API documentation)
+AIRTABLE_BASE_ID=appY1hTlYJdRIT7WK
+
+# Your Airtable API Key (Personal Access Token)
+# Generate one at: https://airtable.com/create/tokens
+AIRTABLE_API_KEY=patufvuN6E4aLRdWT.16c88f6ae1fd7df77568673ebc0a9b62671b73df4a98ac313870b47008be7ce5
+
+# Table names in your Airtable base
+AIRTABLE_APPOINTMENTS_TABLE=Appointments
+AIRTABLE_CALLS_TABLE=Call Recording
+
+# Optional: CORS origin for development
+# CORS_ORIGIN=http://localhost:3000
+
+FLASK_SECRET_KEY="a-very-secret-key-change-in-production"
+RESULT_LIMIT=50

Dockerfile

@@ -0,0 +1,45 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy the requirements file
+COPY requirements.txt requirements.txt
+
+# Install Python packages with timeout increase
+RUN pip install --no-cache-dir --timeout=1000 -r requirements.txt
+
+# Copy application code
+COPY . /app
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+
+# Change ownership
+RUN chown -R user:user /app
+
+# Switch to the non-root user
+USER user
+
+# Expose the port
+EXPOSE 7860
+
+# Set environment variables
+ENV FLASK_HOST=0.0.0.0
+ENV FLASK_PORT=7860
+ENV FLASK_DEBUG=False
+
+# CRITICAL: Set HF-specific env vars
+ENV TRANSFORMERS_CACHE=/tmp/transformers_cache
+ENV HF_HOME=/tmp/hf_home
+ENV TORCH_HOME=/tmp/torch_home
+
+# Command to run the app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,260 @@
+import os
+import requests
+import csv
+from flask import Flask, jsonify, render_template, request, redirect, url_for, session
+from flask_socketio import SocketIO, emit
+from dotenv import load_dotenv
+from datetime import datetime
+import logging
+
+# --- App Configuration ---
+load_dotenv()
+app = Flask(__name__)
+app.secret_key = os.getenv('FLASK_SECRET_KEY', 'a-very-secret-key-change-in-production')
+socketio = SocketIO(app)
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# --- File & Airtable Configuration ---
+DATA_DIR = 'data'
+USERS_FILE = os.path.join(DATA_DIR, 'users.csv')
+AIRTABLE_API_KEY = os.getenv('AIRTABLE_API_KEY')
+AIRTABLE_BASE_ID = os.getenv('AIRTABLE_BASE_ID')
+APPOINTMENTS_TABLE = os.getenv('AIRTABLE_APPOINTMENTS_TABLE', 'Appointments')
+CALLS_TABLE = os.getenv('AIRTABLE_CALLS_TABLE', 'CallRecording')
+AIRTABLE_API_URL = f"https://api.airtable.com/v0/{AIRTABLE_BASE_ID}"
+RESULTS_PER_PAGE = int(os.getenv('RESULT_LIMIT', 50))
+N8N_WEBHOOK_SECRET = os.getenv('N8N_WEBHOOK_SECRET') # Optional secret for webhook security
+
+# --- Helper Functions ---
+def airtable_request(table_name, record_id=None, method='GET', params=None, json_data=None):
+    """Generic function to make requests to the Airtable API."""
+    url = f"{AIRTABLE_API_URL}/{table_name}"
+    if record_id:
+        url += f"/{record_id}"
+        
+    if not AIRTABLE_API_KEY or not AIRTABLE_BASE_ID:
+        logger.error("Airtable credentials are not set in the .env file.")
+        return None
+        
+    headers = {
+        'Authorization': f'Bearer {AIRTABLE_API_KEY}',
+        'Content-Type': 'application/json'
+    }
+    
+    try:
+        response = requests.request(method, url, headers=headers, params=params, json=json_data, timeout=10)
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.Timeout:
+        logger.error(f"Airtable API timeout for {table_name}")
+        return None
+    except requests.exceptions.RequestException as e:
+        logger.error(f"Airtable API Error: {e}")
+        if hasattr(e, 'response') and e.response is not None:
+            logger.error(f"Response content: {e.response.text}")
+        return None
+
+def flatten_airtable_records(records):
+    """Flatten Airtable records for easier use in frontend."""
+    if not records: 
+        return []
+    return [dict(id=rec.get('id'), **rec.get('fields', {})) for rec in records]
+
+def get_all_records(table_name):
+    """Fetch all records from an Airtable table, handling pagination."""
+    all_records = []
+    params = {'pageSize': 100}
+    
+    while True:
+        data = airtable_request(table_name, params=params)
+        if not data:
+            break
+            
+        records = data.get('records', [])
+        all_records.extend(records)
+        
+        # Check for more pages
+        offset = data.get('offset')
+        if not offset:
+            break
+        params['offset'] = offset
+    
+    return all_records
+
+def validate_user_credentials(username, password):
+    """Validate user credentials from CSV file."""
+    try:
+        if not os.path.exists(USERS_FILE):
+            logger.error(f"Users file not found: {USERS_FILE}")
+            return False
+            
+        with open(USERS_FILE, mode='r', encoding='utf-8') as infile:
+            reader = csv.DictReader(infile)
+            for row in reader:
+                if row.get('username') == username and row.get('password') == password:
+                    return True
+        return False
+    except Exception as e:
+        logger.error(f"Error validating credentials: {e}")
+        return False
+
+def create_default_users_file():
+    """Create a default users.csv file if it doesn't exist."""
+    if not os.path.exists(USERS_FILE):
+        os.makedirs(DATA_DIR, exist_ok=True)
+        with open(USERS_FILE, 'w', newline='', encoding='utf-8') as f:
+            writer = csv.writer(f)
+            writer.writerow(['username', 'password'])
+            writer.writerow(['admin', 'admin123'])  # Default credentials
+        logger.info(f"Created default users file at {USERS_FILE}")
+
+# --- Authentication Routes ---
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    error = None
+    if request.method == 'POST':
+        username = request.form.get('username', '').strip()
+        password = request.form.get('password', '').strip()
+        
+        if not username or not password:
+            error = 'Please enter both username and password.'
+        elif validate_user_credentials(username, password):
+            session['logged_in'] = True
+            session['username'] = username
+            session.permanent = True  # Make session persistent
+            logger.info(f"Successful login for user: {username}")
+            return redirect(url_for('dashboard'))
+        else:
+            error = 'Invalid username or password.'
+            logger.warning(f"Failed login attempt for user: {username}")
+    
+    return render_template('login.html', error=error)
+
+@app.route('/logout')
+def logout():
+    username = session.get('username', 'Unknown')
+    session.clear()
+    logger.info(f"User logged out: {username}")
+    return redirect(url_for('login'))
+
+# --- Main Application Routes ---
+@app.route('/')
+def dashboard():
+    if not session.get('logged_in'):
+        return redirect(url_for('login'))
+    return render_template(
+        'dashboard.html', 
+        username=session.get('username', 'User'),
+        results_per_page=RESULTS_PER_PAGE
+    )
+
+# --- API Endpoints ---
+@app.route('/api/data')
+def get_data():
+    """Fetch all data from Airtable tables."""
+    if not session.get('logged_in'):
+        return jsonify({'error': 'Unauthorized'}), 401
+    
+    try:
+        if not AIRTABLE_API_KEY or not AIRTABLE_BASE_ID:
+            logger.warning("Airtable not configured, returning empty data")
+            return jsonify({
+                'appointments': [],
+                'calls': [],
+                'error': 'Airtable not configured. Please check your .env file.'
+            })
+        
+        appointments_records = get_all_records(APPOINTMENTS_TABLE)
+        calls_records = get_all_records(CALLS_TABLE)
+        
+        return jsonify({
+            'appointments': flatten_airtable_records(appointments_records),
+            'calls': flatten_airtable_records(calls_records)
+        })
+    except Exception as e:
+        logger.error(f"Error fetching data: {e}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/webhook/refresh', methods=['POST'])
+def webhook_refresh():
+    """Webhook endpoint for n8n to trigger a refresh."""
+    # Optional: Secure webhook with a secret key
+    if N8N_WEBHOOK_SECRET:
+        webhook_secret = request.headers.get('X-N8N-Webhook-Secret')
+        if webhook_secret != N8N_WEBHOOK_SECRET:
+            logger.warning("Unauthorized webhook attempt.")
+            return jsonify({'error': 'Unauthorized'}), 401
+
+    logger.info("Webhook received. Triggering client refresh via Socket.IO.")
+    socketio.emit('refresh_data', {'message': 'Airtable data has changed.'})
+    return jsonify({'success': True, 'message': 'Refresh event emitted to all clients.'}), 200
+
+@app.route('/api/appointments/update_status/<record_id>', methods=['PATCH'])
+def update_appointment_status(record_id):
+    """Update the status of an appointment."""
+    if not session.get('logged_in'):
+        return jsonify({'error': 'Unauthorized'}), 401
+    
+    try:
+        data = request.json
+        new_status = data.get('Status')
+        
+        if not new_status:
+            return jsonify({'error': 'Status not provided'}), 400
+        
+        valid_statuses = ['incomplete', 'complete', 'missed']
+        if new_status.lower() not in valid_statuses:
+            return jsonify({'error': f'Invalid status. Must be one of: {", ".join(valid_statuses)}'}), 400
+        
+        payload = {'fields': {'Status': new_status}}
+        response = airtable_request(APPOINTMENTS_TABLE, record_id=record_id, method='PATCH', json_data=payload)
+        
+        if response:
+            logger.info(f"Updated appointment {record_id} status to {new_status}")
+            return jsonify({
+                'success': True,
+                'record': flatten_airtable_records([response])[0]
+            }), 200
+        else:
+            return jsonify({'error': 'Failed to update status in Airtable'}), 500
+            
+    except Exception as e:
+        logger.error(f"Error updating appointment status: {e}")
+        return jsonify({'error': str(e)}), 500
+
+# --- Error Handlers ---
+@app.errorhandler(404)
+def not_found(error):
+    if request.path.startswith('/api/'):
+        return jsonify({'error': 'Endpoint not found'}), 404
+    return render_template('404.html'), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    logger.error(f"Internal server error: {error}")
+    if request.path.startswith('/api/'):
+        return jsonify({'error': 'Internal server error'}), 500
+    return render_template('500.html'), 500
+
+# --- Main Execution ---
+if __name__ == '__main__':
+    os.makedirs(DATA_DIR, exist_ok=True)
+    create_default_users_file()
+    
+    print("=" * 50)
+    print("     DENTAL ADMIN APPLICATION")
+    print("=" * 50)
+    
+    if not (AIRTABLE_API_KEY and AIRTABLE_BASE_ID):
+        print("⚠️  WARNING: Airtable credentials not configured!")
+    else:
+        print("✅ Airtable configuration loaded")
+
+    print(f"🚀 Starting server on http://localhost:5000")
+    print("   Default login: admin / admin123")
+    print("=" * 50)
+    
+    socketio.run(app, debug=True, host='0.0.0.0', port=5000)

data/users.csv

@@ -0,0 +1,4 @@
+username,password
+admin,password
+jennifer,dentaladmin123
+ali786,1234

requirements.txt

@@ -0,0 +1,4 @@
+Flask==3.1.2
+Flask_SocketIO==5.5.1
+python-dotenv==1.1.1
+Requests==2.32.5

templates/dashboard.html

@@ -0,0 +1,1003 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dental Admin Dashboard</title>
+    <!-- Libraries -->
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1"></script>
+
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :root {
+            --primary-bg: #F8F8F8; --sidebar-bg: #FFFFFF; --card-bg: #FFFFFF; --text-dark: #333333; --text-medium: #666666; --text-light: #AAAAAA; --border-color: #EDEDED; --accent-green: #4CAF50; --accent-blue: #2196F3; --accent-red: #F44336; --accent-yellow: #FFC107; --accent-gray: #9E9E9E; --shadow: 0 4px 20px rgba(0, 0, 0, 0.05); --border-radius-lg: 20px; --border-radius-md: 12px;
+        }
+
+        html.dark-mode {
+            --primary-bg: #121212; --sidebar-bg: #1E1E1E; --card-bg: #1E1E1E; --text-dark: #E0E0E0; --text-medium: #A0A0A0; --text-light: #707070; --border-color: #333333;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
+        
+        body { font-family: 'Inter', sans-serif; background-color: var(--primary-bg); min-height: 100vh; display: flex; color: var(--text-dark); }
+        
+        .sidebar { width: 280px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); padding: 25px; display: flex; flex-direction: column; box-shadow: var(--shadow); border-radius: var(--border-radius-lg); margin: 20px; position: sticky; top: 20px; align-self: flex-start; height: calc(100vh - 40px); }
+        
+        .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-weight: 700; font-size: 1.2rem; }
+        .logo-icon { width: 36px; height: 36px; background: var(--accent-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; }
+        
+        .user-profile { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
+        .avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(45deg, #FFD700, #FF69B4); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; text-transform: uppercase; }
+        .user-info div { font-weight: 600; font-size: 1rem; }
+        .user-info span { font-size: 0.85rem; color: var(--text-medium); }
+        
+        .nav-menu { list-style: none; flex-grow: 1; }
+        .nav-item { margin-bottom: 8px; }
+        .nav-link { display: flex; align-items: center; gap: 15px; padding: 12px 18px; color: var(--text-medium); text-decoration: none; border-radius: 12px; font-weight: 500; cursor: pointer; }
+        .nav-link:hover, .nav-link.active { background: #2195f320; color: var(--accent-blue); }
+        .nav-icon { font-size: 1.2rem; width: 24px; text-align: center; }
+        .logout-link { color: var(--accent-red) !important; margin-top: auto; }
+        .logout-link:hover { background: #f4433620 !important; }
+        
+        .main-content { flex: 1; padding: 30px; }
+        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
+        .header h1 { font-size: 2rem; font-weight: 700; }
+        .header-controls { display: flex; align-items: center; gap: 10px; }
+        
+        .icon-button { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-medium); padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
+        .icon-button:hover { background-color: #80808030; color: var(--text-dark); }
+        .icon-button:disabled { cursor: not-allowed; opacity: 0.5; }
+        .icon-button svg { width: 24px; height: 24px; }
+        
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        .spinning { animation: spin 1s linear infinite; }
+
+        .content-view { display: none; animation: fadeIn 0.5s; }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        .content-view.active { display: block; }
+        
+        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 30px; }
+        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 25px; }
+        
+        .card { background: var(--card-bg); border-radius: var(--border-radius-lg); padding: 25px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
+        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;}
+        .chart-title-section { display: flex; flex-direction: column; }
+        .chart-title { font-size: 1.1rem; font-weight: 600; }
+        .chart-subtitle { font-size: 0.8rem; color: var(--text-medium); margin-top: 4px; }
+        .card-content { font-size: 2.2rem; font-weight: 700; margin-bottom: 5px; }
+        .card-footer { font-size: 0.85rem; color: var(--text-medium); }
+        
+        .table-container { background: var(--card-bg); padding: 20px; border-radius: 20px; box-shadow: var(--shadow); overflow-x: auto; }
+        .table-controls { margin-bottom: 15px; display: flex; gap: 15px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
+        #filter-input { width: 100%; max-width: 300px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--primary-bg); color: var(--text-dark); }
+        
+        .column-controls { position: relative; }
+        .column-menu { position: absolute; top: 100%; right: 0; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; box-shadow: var(--shadow); z-index: 1000; min-width: 200px; }
+        .column-menu label { display: block; padding: 5px 0; cursor: pointer; font-size: 0.9rem; color: var(--text-dark); }
+        .column-menu label:hover { background: var(--primary-bg); padding-left: 5px; padding-right: 5px; border-radius: 4px; }
+        .column-menu input[type="checkbox"] { margin-right: 8px; }
+        
+        table { width: 100%; border-collapse: collapse; }
+        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
+        th { font-weight: 600; font-size: 0.9rem; color: var(--text-medium); }
+        th.sortable { cursor: pointer; user-select: none; }
+        th.sortable:hover { color: var(--text-dark); }
+        th .sort-icon { margin-left: 5px; opacity: 0.5; }
+        td { font-size: 0.95rem; }
+        td.summary-cell { white-space: normal; min-width: 250px; }
+        
+        th.resizable { position: relative; }
+        .resizer { position: absolute; top: 0; right: -2px; width: 5px; cursor: col-resize; user-select: none; height: 100%; z-index: 10; }
+        .resizer:hover, .resizing { border-right: 2px solid var(--accent-blue); }
+        
+        .status-dropdown { background: none; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-color); font-family: 'Inter', sans-serif; font-size: 0.9rem; cursor: pointer; color: var(--text-dark);}
+        .status-dropdown.status-complete { background-color: #4caf5020; color: #4CAF50; }
+        .status-dropdown.status-incomplete { background-color: #f4433620; color: #F44336; }
+        .status-dropdown.status-missed { background-color: #9e9e9e20; color: #9E9E9E; }
+        
+        .loading { text-align: center; padding: 50px; font-size: 1.2rem; color: var(--text-medium); }
+        .time-filter-group { display: flex; align-items: center; gap: 10px; }
+        .time-filter button { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--text-medium); }
+        .time-filter button.active, .time-filter button:hover { background-color: var(--accent-blue); color: white; border-color: var(--accent-blue); }
+        .chart-canvas-container { position: relative; height: 100%; flex-grow: 1; min-height: 300px; }
+        .no-data-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-medium); font-size: 0.9rem; text-align: center; pointer-events: none; }
+        
+        .upcoming-appointments-container { margin-top: 30px; }
+        .upcoming-appointments-list { display: flex; flex-direction: column; gap: 15px; min-height: 200px; }
+        .appointment-item { display: flex; align-items: center; gap: 15px; padding: 10px; border-radius: var(--border-radius-md); background-color: var(--primary-bg); }
+        .appointment-time { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--accent-blue); color: white; border-radius: 8px; width: 50px; height: 50px; font-weight: 600; flex-shrink: 0; }
+        .appointment-time span:first-child { font-size: 0.75rem; }
+        .appointment-time span:last-child { font-size: 1.2rem; line-height: 1; }
+        .appointment-details { display: flex; flex-direction: column; overflow: hidden; }
+        .appointment-details strong { font-weight: 600; color: var(--text-dark); }
+        .appointment-details span { font-size: 0.9rem; color: var(--text-medium); }
+        .appointment-description { font-size: 0.85rem; color: var(--text-medium); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        #upcoming-appointments-list:empty::after { content: "No upcoming appointments found for this period."; color: var(--text-medium); padding: 20px 0; text-align: center; display: block; width: 100%; }
+
+        .pagination-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color); }
+        .pagination-controls button { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--text-medium); }
+        .pagination-controls button:hover:not(:disabled) { background-color: var(--accent-blue); color: white; border-color: var(--accent-blue); }
+        .pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
+        #upcoming-page-info { font-size: 0.9rem; font-weight: 500; color: var(--text-medium); }
+        
+        .card-controls-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
+        .items-per-page-group { display: flex; align-items: center; gap: 8px; }
+        .items-per-page-group label { font-size: 0.85rem; color: var(--text-medium); font-weight: 500; }
+        .items-per-page-group input { width: 60px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background-color: var(--primary-bg); color: var(--text-dark); text-align: center; }
+
+        .cancelled-toggle-btn { background-color: var(--accent-red); color: white; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.85rem; }
+        .cancelled-toggle-btn:hover { background-color: #d32f2f; }
+        .cancelled-toggle-btn.showing-cancelled { background-color: var(--accent-gray); }
+        
+        .cancelled-row { background-color: rgba(244, 67, 54, 0.1); opacity: 0.6; }
+        .cancelled-row.hidden { display: none; }
+
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <div class="logo"><div class="logo-icon">🦷</div><span>DentalAdmin</span></div>
+        <div class="user-profile">
+            <div class="avatar" id="user-avatar"></div>
+            <div class="user-info">
+                <div id="username-display"></div>
+                <span>Administrator</span>
+            </div>
+        </div>
+        <nav>
+            <ul class="nav-menu">
+                <li class="nav-item"><a class="nav-link active" data-view="dashboard-view"><span class="nav-icon">📊</span> Dashboard</a></li>
+                <li class="nav-item"><a class="nav-link" data-view="appointments-view"><span class="nav-icon">🗓️</span> Appointments</a></li>
+                <li class="nav-item"><a class="nav-link" data-view="calls-view"><span class="nav-icon">📞</span> Call Logs</a></li>
+                <li class="nav-item"><a class="nav-link logout-link" href="/logout"><span class="nav-icon">🚪</span> Logout</a></li>
+            </ul>
+        </nav>
+    </div>
+
+    <div class="main-content">
+        <div class="header">
+            <h1 id="header-title">Dashboard</h1>
+            <div class="header-controls">
+                <button id="refresh-data" class="icon-button" title="Refresh data">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-4.518a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75v-5.25a.75.75 0 00-.75-.75h-.008a.75.75 0 00-.75.75v4.518l-1.903-1.903a9 9 0 00-15.057 4.042.75.75 0 00.58 1.157 7.5 7.5 0 01.548-2.223z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M19.245 13.941a7.5 7.5 0 01-12.548 3.364l-1.903-1.903h4.518a.75.75 0 00.75-.75v-.008a.75.75 0 00-.75-.75h-5.25a.75.75 0 00-.75.75v5.25a.75.75 0 00.75.75h.008a.75.75 0 00.75-.75v-4.518l1.903 1.903a9 9 0 0015.057-4.042.75.75 0 00-.58-1.157 7.5 7.5 0 01-.548 2.223z" clip-rule="evenodd" /></svg>
+                </button>
+                <button id="theme-toggle" class="icon-button" title="Toggle dark mode">
+                    <svg id="theme-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 010 1.06l-1.591 1.59a.75.75 0 11-1.06-1.06l1.59-1.59a.75.75 0 011.06 0zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 01-1.06 0l-1.59-1.591a.75.75 0 111.06-1.06l1.59 1.59a.75.75 0 010 1.061zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM6.106 17.894a.75.75 0 010-1.06l1.59-1.59a.75.75 0 111.06 1.06l-1.59 1.59a.75.75 0 01-1.06 0zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 011.06 0l1.591 1.59a.75.75 0 01-1.06 1.06l-1.59-1.59a.75.75 0 010-1.06z"></path></svg>
+                    <svg id="theme-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg>
+                </button>
+            </div>
+        </div>
+
+        <div id="loading" class="loading">Loading data from Airtable... Please wait.</div>
+
+        <!-- Dashboard View -->
+        <div id="dashboard-view" class="content-view">
+            <div id="dashboard-summary-grid" class="dashboard-grid"></div>
+            <div id="dashboard-charts-grid" class="charts-grid"></div>
+            <div class="upcoming-appointments-container card">
+                <div class="card-header">
+                     <h2 class="chart-title">Upcoming Appointments</h2>
+                     <div class="card-controls-group">
+                        <div class="time-filter-group">
+                            <div class="time-filter" id="upcoming-appointments-filter">
+                                <button data-period="this-week" class="active">This Week</button>
+                                <button data-period="this-month">This Month</button>
+                                <button data-period="this-year">This Year</button>
+                            </div>
+                        </div>
+                        <div class="items-per-page-group">
+                            <label for="max-items-input">Items/Page:</label>
+                            <input type="number" id="max-items-input" min="1" max="100" value="50">
+                        </div>
+                    </div>
+                </div>
+                <div id="upcoming-appointments-list" class="upcoming-appointments-list"></div>
+                <div class="pagination-controls" id="upcoming-pagination-controls">
+                    <button id="upcoming-prev-btn" disabled>&lt; Previous</button>
+                    <span id="upcoming-page-info"></span>
+                    <button id="upcoming-next-btn">Next &gt;</button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- All Appointments View -->
+        <div id="appointments-view" class="content-view">
+            <div class="table-container">
+                <div class="table-controls">
+                    <input type="text" id="filter-input" placeholder="Filter appointments...">
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <button id="toggle-cancelled-btn" class="cancelled-toggle-btn">Show Cancelled</button>
+                        <div class="column-controls">
+                            <button id="toggle-columns-btn" class="icon-button" title="Show/Hide Columns">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z"/></svg>
+                            </button>
+                            <div id="column-visibility-menu" class="column-menu" style="display: none;">
+                                <label><input type="checkbox" data-column="sl" checked> Sl</label>
+                                <label><input type="checkbox" data-column="Name" checked> Patient Name</label>
+                                <label><input type="checkbox" data-column="starttime" checked> Start Time</label>
+                                <label><input type="checkbox" data-column="meetdescription" checked> Description</label>
+                                <label><input type="checkbox" data-column="Booking Status" checked> Booking Status</label>
+                                <label><input type="checkbox" data-column="Phone Number" checked> Phone</label>
+                                <label><input type="checkbox" data-column="Caller Phone Number"> Caller Phone Number</label>
+                                <label><input type="checkbox" data-column="eventId" checked> Event ID</label>
+                                <label><input type="checkbox" data-column="Status" checked> Status</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <table id="appointments-table">
+                    <thead>
+                        <tr>
+                            <th class="sortable" data-column="sl">Sl <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="Name">Patient Name <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="starttime">Start Time <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="meetdescription">Description <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="Booking Status">Booking Status <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="Phone Number">Phone <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="Caller Phone Number" style="display: none;">Caller Phone Number <span class="sort-icon"></span></th>
+                            <th class="sortable" data-column="eventId">Event ID <span class="sort-icon"></span></th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </div>
+        
+        <!-- Call Logs View -->
+        <div id="calls-view" class="content-view">
+            <div class="table-container">
+                <table id="calls-table">
+                    <thead>
+                        <tr>
+                            <th class="resizable" style="width:200px;">Caller Number<div class="resizer"></div></th>
+                            <th class="resizable" style="width:220px;">Started At<div class="resizer"></div></th>
+                            <th class="resizable" style="width:180px;">Ended At<div class="resizer"></div></th>
+                            <th class="resizable">Summary<div class="resizer"></div></th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    // Register Chart.js plugins globally
+    Chart.register(ChartDataLabels, ChartZoom);
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // --- State Management ---
+        let allData = { appointments: [], calls: [] };
+        let charts = {};
+        let currentPieChartFilter = 'today';
+        let scheduleTimelineView = 'week';
+        let upcomingAppointmentsFilter = 'this-week';
+        let upcomingAppointmentsPage = 1;
+        let appointmentsSort = { column: 'starttime', direction: 'asc' };
+        let appointmentsFilter = '';
+        let currentResultsPerPage = 50;
+        let showCancelled = false;
+        let socket;
+
+        // --- DOM Elements ---
+        const loadingDiv = document.getElementById('loading');
+        const headerTitle = document.getElementById('header-title');
+        const username = "User";
+        const contentViews = document.querySelectorAll('.content-view');
+        const navLinks = document.querySelectorAll('.nav-link');
+        const maxItemsInput = document.getElementById('max-items-input');
+        
+        // --- Initialization ---
+        function initialize() {
+            setupTheme();
+            setupNavigation();
+            setupEventListeners();
+            fetchData();
+        }
+
+        // --- Real-time Communication ---
+        function setupSocketIO() {
+            if (socket) return; // Prevent multiple connections
+            socket = io();
+            socket.on('connect', () => {
+                console.log('Connected to real-time server.');
+            });
+            socket.on('refresh_data', (data) => {
+                console.log('Refresh event received:', data.message);
+                fetchData(true); // Trigger a manual-style refresh
+            });
+            socket.on('disconnect', () => {
+                console.log('Disconnected from real-time server.');
+            });
+        }
+
+        // --- Theme Management ---
+        function setupTheme() {
+            const themeToggle = document.getElementById('theme-toggle');
+            const sunIcon = document.getElementById('theme-icon-sun');
+            const moonIcon = document.getElementById('theme-icon-moon');
+            document.getElementById('username-display').textContent = username;
+            document.getElementById('user-avatar').textContent = username.charAt(0);
+            
+            const applyTheme = (theme) => {
+                if (theme === 'dark') {
+                    document.documentElement.classList.add('dark-mode');
+                    sunIcon.style.display = 'block';
+                    moonIcon.style.display = 'none';
+                } else {
+                    document.documentElement.classList.remove('dark-mode');
+                    sunIcon.style.display = 'none';
+                    moonIcon.style.display = 'block';
+                }
+            };
+            
+            let currentTheme = localStorage.getItem('theme') || 'light';
+            applyTheme(currentTheme);
+
+            themeToggle.addEventListener('click', () => {
+                currentTheme = document.documentElement.classList.contains('dark-mode') ? 'light' : 'dark';
+                localStorage.setItem('theme', currentTheme);
+                applyTheme(currentTheme);
+            });
+        }
+
+        // --- Navigation ---
+        function setupNavigation() {
+            navLinks.forEach(link => {
+                if (!link.href.includes('/logout')) {
+                    link.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        const viewId = link.getAttribute('data-view');
+                        navLinks.forEach(l => l.classList.remove('active'));
+                        link.classList.add('active');
+                        contentViews.forEach(view => view.classList.remove('active'));
+                        const viewEl = document.getElementById(viewId);
+                        if(viewEl) {
+                           viewEl.classList.add('active');
+                           if(viewId === 'calls-view') {
+                                makeTableResizable(document.getElementById('calls-table'));
+                           }
+                        }
+                        headerTitle.textContent = link.textContent.trim();
+                    });
+                }
+            });
+        }
+
+        // --- Data Fetching ---
+        async function fetchData(isManualRefresh = false) {
+            const refreshButton = document.getElementById('refresh-data');
+            if (isManualRefresh) {
+                refreshButton.classList.add('spinning');
+                refreshButton.disabled = true;
+            } else {
+                loadingDiv.style.display = 'block';
+                contentViews.forEach(view => view.classList.remove('active'));
+            }
+
+            try {
+                const response = await fetch('/api/data');
+                if (!response.ok) throw new Error(`Network response was not ok: ${response.statusText}`);
+                allData = await response.json();
+
+                if(allData.error) throw new Error(allData.error);
+                
+                if (!isManualRefresh) {
+                    loadingDiv.style.display = 'none';
+                    document.querySelector('.nav-link.active')?.click();
+                    // Connect to WebSocket only after initial data is loaded
+                    setupSocketIO();
+                }
+                renderAll();
+            } catch (error) {
+                loadingDiv.textContent = `Failed to load data. ${error.message}`;
+                console.error('Fetch error:', error);
+            } finally {
+                 if (isManualRefresh) {
+                    refreshButton.classList.remove('spinning');
+                    refreshButton.disabled = false;
+                }
+            }
+        }
+        
+        // --- Event Listeners ---
+        function setupEventListeners() {
+            document.getElementById('refresh-data').addEventListener('click', () => fetchData(true));
+            
+            document.getElementById('upcoming-appointments-filter').addEventListener('click', (e) => {
+                if (e.target.tagName === 'BUTTON') {
+                    document.querySelectorAll('#upcoming-appointments-filter button').forEach(btn => btn.classList.remove('active'));
+                    e.target.classList.add('active');
+                    upcomingAppointmentsFilter = e.target.dataset.period;
+                    upcomingAppointmentsPage = 1; 
+                    renderUpcomingAppointments();
+                }
+            });
+            
+            maxItemsInput.addEventListener('change', () => {
+                const newValue = parseInt(maxItemsInput.value, 10);
+                if (newValue && newValue > 0) {
+                    currentResultsPerPage = newValue;
+                    upcomingAppointmentsPage = 1;
+                    renderUpcomingAppointments();
+                }
+            });
+
+            document.getElementById('upcoming-prev-btn').addEventListener('click', () => {
+                if (upcomingAppointmentsPage > 1) {
+                    upcomingAppointmentsPage--;
+                    renderUpcomingAppointments();
+                }
+            });
+            document.getElementById('upcoming-next-btn').addEventListener('click', () => {
+                upcomingAppointmentsPage++;
+                renderUpcomingAppointments();
+            });
+
+            document.getElementById('filter-input').addEventListener('input', (e) => {
+                appointmentsFilter = e.target.value.toLowerCase();
+                renderAppointmentsTable();
+            });
+
+            // Toggle cancelled appointments
+            document.getElementById('toggle-cancelled-btn').addEventListener('click', () => {
+                showCancelled = !showCancelled;
+                const btn = document.getElementById('toggle-cancelled-btn');
+                if (showCancelled) {
+                    btn.textContent = 'Hide Cancelled';
+                    btn.classList.add('showing-cancelled');
+                } else {
+                    btn.textContent = 'Show Cancelled';
+                    btn.classList.remove('showing-cancelled');
+                }
+                renderAppointmentsTable();
+            });
+
+            // Column visibility toggle
+            document.getElementById('toggle-columns-btn').addEventListener('click', () => {
+                const menu = document.getElementById('column-visibility-menu');
+                menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
+            });
+
+            document.getElementById('column-visibility-menu').addEventListener('change', (e) => {
+                if (e.target.type === 'checkbox') {
+                    const column = e.target.dataset.column;
+                    const isVisible = e.target.checked;
+                    toggleColumnVisibility(column, isVisible);
+                }
+            });
+
+            // Close column menu when clicking outside
+            document.addEventListener('click', (e) => {
+                const menu = document.getElementById('column-visibility-menu');
+                const toggleBtn = document.getElementById('toggle-columns-btn');
+                if (!menu.contains(e.target) && !toggleBtn.contains(e.target)) {
+                    menu.style.display = 'none';
+                }
+            });
+
+            document.querySelector('#appointments-table thead').addEventListener('click', (e) => {
+                const header = e.target.closest('th.sortable');
+                if (!header) return;
+                const column = header.dataset.column;
+                if (appointmentsSort.column === column) {
+                    appointmentsSort.direction = appointmentsSort.direction === 'asc' ? 'desc' : 'asc';
+                } else {
+                    appointmentsSort.column = column;
+                    appointmentsSort.direction = 'asc';
+                }
+                renderAppointmentsTable();
+            });
+
+            document.querySelector('#appointments-table tbody').addEventListener('change', async (e) => {
+                if (e.target.classList.contains('status-dropdown')) {
+                    const dropdown = e.target;
+                    const recordId = dropdown.dataset.id;
+                    const newStatus = dropdown.value;
+                    const oldClass = dropdown.className;
+                    try {
+                        dropdown.className = `status-dropdown status-${newStatus}`;
+                        const response = await fetch(`/api/appointments/update_status/${recordId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ Status: newStatus }) });
+                        const result = await response.json();
+                        if (!result.success) throw new Error(result.error);
+                        const appointment = allData.appointments.find(a => a.id === recordId);
+                        if (appointment) appointment.Status = newStatus;
+                    } catch (error) {
+                        console.error('Update error:', error);
+                        dropdown.className = oldClass;
+                        dropdown.value = oldClass.match(/status-(\w+)/)[1];
+                        console.error('Could not update status.');
+                    }
+                }
+            });
+        }
+
+        // --- Column Visibility Management ---
+        function toggleColumnVisibility(columnName, isVisible) {
+            const table = document.getElementById('appointments-table');
+            const headers = table.querySelectorAll('th');
+            const rows = table.querySelectorAll('tbody tr');
+
+            let columnIndex = -1;
+            headers.forEach((header, index) => {
+                if (header.dataset && header.dataset.column === columnName) {
+                    columnIndex = index;
+                    header.style.display = isVisible ? '' : 'none';
+                } else if (header.textContent.includes(columnName)) {
+                    columnIndex = index;
+                    header.style.display = isVisible ? '' : 'none';
+                }
+            });
+
+            if (columnIndex !== -1) {
+                rows.forEach(row => {
+                    const cell = row.cells[columnIndex];
+                    if (cell) cell.style.display = isVisible ? '' : 'none';
+                });
+            }
+        }
+
+        // --- Rendering ---
+        function renderAll() {
+            renderUpcomingAppointments();
+            renderDashboard();
+            renderAppointmentsTable();
+            renderCallsTable();
+        }
+
+        function renderUpcomingAppointments() {
+            const listContainer = document.getElementById('upcoming-appointments-list');
+            const pageInfo = document.getElementById('upcoming-page-info');
+            const prevBtn = document.getElementById('upcoming-prev-btn');
+            const nextBtn = document.getElementById('upcoming-next-btn');
+            const paginationControls = document.getElementById('upcoming-pagination-controls');
+            
+            const now = new Date();
+            let allUpcoming = allData.appointments
+                .filter(a => {
+                    // Filter out cancelled appointments
+                    const bookingStatus = (a['Booking Status'] || '').toLowerCase();
+                    return a.starttime && 
+                           new Date(a.starttime) > now && 
+                           bookingStatus !== 'cancelled';
+                })
+                .sort((a, b) => new Date(a.starttime) - new Date(b.starttime));
+
+            const { end } = getPeriodRange(upcomingAppointmentsFilter);
+            let filteredUpcoming = allUpcoming.filter(a => new Date(a.starttime) <= end);
+
+            const totalPages = Math.ceil(filteredUpcoming.length / currentResultsPerPage);
+            if (upcomingAppointmentsPage > totalPages) upcomingAppointmentsPage = totalPages || 1;
+            
+            const startIndex = (upcomingAppointmentsPage - 1) * currentResultsPerPage;
+            const endIndex = startIndex + currentResultsPerPage;
+            const paginatedItems = filteredUpcoming.slice(startIndex, endIndex);
+
+            listContainer.innerHTML = '';
+            paginatedItems.forEach(a => {
+                const appDate = new Date(a.starttime);
+                const month = appDate.toLocaleString('en-US', { month: 'short' }).toUpperCase();
+                const day = appDate.getDate();
+                const details = appDate.toLocaleString('en-US', { weekday: 'long', hour: 'numeric', minute: '2-digit', hour12: true });
+
+                const item = document.createElement('div');
+                item.className = 'appointment-item';
+                item.innerHTML = `
+                    <div class="appointment-time">
+                        <span>${month}</span>
+                        <span>${day}</span>
+                    </div>
+                    <div class="appointment-details">
+                        <strong>${a.Name || 'N/A'}</strong>
+                        <span>${details}</span>
+                        <span class="appointment-description">${a.meetdescription || ''}</span>
+                    </div>
+                `;
+                listContainer.appendChild(item);
+            });
+
+            if (totalPages > 1) {
+                paginationControls.style.display = 'flex';
+                pageInfo.textContent = `Page ${upcomingAppointmentsPage} of ${totalPages}`;
+                prevBtn.disabled = upcomingAppointmentsPage === 1;
+                nextBtn.disabled = upcomingAppointmentsPage === totalPages;
+            } else {
+                 paginationControls.style.display = 'none';
+            }
+        }
+
+        function renderDashboard() {
+            const summaryGrid = document.getElementById('dashboard-summary-grid');
+            const chartsGrid = document.getElementById('dashboard-charts-grid');
+            const today = new Date().toISOString().split('T')[0];
+            
+            // Filter out cancelled appointments for dashboard summary
+            const todaysAppointments = allData.appointments.filter(a => {
+                const bookingStatus = (a['Booking Status'] || '').toLowerCase();
+                return a.starttime && 
+                       a.starttime.startsWith(today) && 
+                       bookingStatus !== 'cancelled';
+            });
+            
+            const uniquePatients = [...new Set(allData.appointments.map(a => a.Name).filter(Boolean))];
+            
+            summaryGrid.innerHTML = `
+                <div class="card"><div class="card-header"><div class="chart-title">Today's Appointments</div></div><div class="card-content">${todaysAppointments.length}</div><div class="card-footer">Confirmed appointments only</div></div>
+                <div class="card"><div class="card-header"><div class="chart-title">Total Patients</div></div><div class="card-content">${uniquePatients.length}</div><div class="card-footer">All-time records</div></div>
+                <div class="card"><div class="card-header"><div class="chart-title">Total Call Logs</div></div><div class="card-content">${allData.calls.length}</div><div class="card-footer">All-time records</div></div>
+            `;
+            
+            chartsGrid.innerHTML = `
+                <div class="card">
+                    <div class="card-header">
+                        <div class="chart-title-section">
+                            <span class="chart-title">Booking Status Breakdown</span>
+                            <span class="chart-subtitle" id="booking-status-subtitle"></span>
+                        </div>
+                        <div class="time-filter-group">
+                            <div class="time-filter" id="booking-status-filter">
+                                <button data-period="today" class="active">Today</button>
+                                <button data-period="this-week">This Week</button>
+                                <button data-period="this-month">This Month</button>
+                                <button data-period="this-year">This Year</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="chart-canvas-container"><canvas id="bookingStatusChart"></canvas></div>
+                </div>
+                <div class="card">
+                     <div class="card-header">
+                        <span class="chart-title">Schedule</span>
+                        <div class="time-filter-group">
+                            <div class="time-filter" id="schedule-timeline-filter">
+                                <button data-view="week" class="active">Week</button>
+                                <button data-view="month">Month</button>
+                                <button data-view="year">Year</button>
+                            </div>
+                            <button id="reset-schedule-view" class="icon-button" title="Reset view">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-4.518a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75v-5.25a.75.75 0 00-.75-.75h-.008a.75.75 0 00-.75.75v4.518l-1.903-1.903a9 9 0 00-15.057 4.042.75.75 0 00.58 1.157 7.5 7.5 0 01.548-2.223z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M19.245 13.941a7.5 7.5 0 01-12.548 3.364l-1.903-1.903h4.518a.75.75 0 00.75-.75v-.008a.75.75 0 00-.75-.75h-5.25a.75.75 0 00-.75.75v5.25a.75.75 0 00.75.75h.008a.75.75 0 00.75-.75v-4.518l1.903 1.903a9 9 0 0015.057-4.042.75.75 0 00-.58-1.157 7.5 7.5 0 01-.548 2.223z" clip-rule="evenodd" /></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="chart-canvas-container"><canvas id="scheduleTimelineChart"></canvas></div>
+                </div>
+            `;
+            
+            renderBookingStatusChart();
+            renderScheduleTimelineChart();
+            
+            document.getElementById('booking-status-filter').addEventListener('click', e => {
+                if (e.target.tagName === 'BUTTON') {
+                    document.querySelectorAll('#booking-status-filter button').forEach(btn => btn.classList.remove('active'));
+                    e.target.classList.add('active');
+                    currentPieChartFilter = e.target.dataset.period;
+                    renderBookingStatusChart();
+                }
+            });
+
+            document.getElementById('schedule-timeline-filter').addEventListener('click', e => {
+                if (e.target.tagName === 'BUTTON') {
+                    document.querySelectorAll('#schedule-timeline-filter button').forEach(btn => btn.classList.remove('active'));
+                    e.target.classList.add('active');
+                    scheduleTimelineView = e.target.dataset.view;
+                    renderScheduleTimelineChart();
+                }
+            });
+            
+            document.getElementById('reset-schedule-view').addEventListener('click', () => {
+                renderScheduleTimelineChart(true);
+            });
+        }
+        
+        function renderBookingStatusChart() {
+            const subtitleEl = document.getElementById('booking-status-subtitle');
+            const chartContainer = document.getElementById('bookingStatusChart').parentElement;
+            const {start, end} = getPeriodRange(currentPieChartFilter);
+
+            const options = { month: 'short', day: 'numeric', year: 'numeric' };
+            const formattedStart = start.toLocaleDateString('en-US', options);
+            const formattedEnd = end.toLocaleDateString('en-US', options);
+            subtitleEl.textContent = formattedStart === formattedEnd ? formattedStart : `${formattedStart} - ${formattedEnd}`;
+
+            const filteredData = allData.appointments.filter(a => {
+                if (!a.starttime) return false;
+                const appTime = new Date(a.starttime);
+                return appTime >= start && appTime <= end;
+            });
+            
+            if (charts.bookingStatus) charts.bookingStatus.destroy();
+            const existingMsg = chartContainer.querySelector('.no-data-message');
+            if (existingMsg) existingMsg.remove();
+            
+            if (filteredData.length === 0) {
+                const noDataMsg = document.createElement('div');
+                noDataMsg.className = 'no-data-message';
+                noDataMsg.textContent = 'No appointments found for this period.';
+                chartContainer.appendChild(noDataMsg);
+                return;
+            }
+
+            const statusCounts = filteredData.reduce((acc, a) => {
+                const status = (a['Booking Status'] || 'Unknown').toLowerCase();
+                acc[status] = (acc[status] || 0) + 1;
+                return acc;
+            }, {});
+
+            const chartData = {
+                labels: Object.keys(statusCounts).map(s => s.charAt(0).toUpperCase() + s.slice(1)),
+                datasets: [{ 
+                    data: Object.values(statusCounts), 
+                    backgroundColor: Object.keys(statusCounts).map(status => {
+                        switch(status.toLowerCase()) {
+                            case 'confirmed': return '#4CAF50';
+                            case 'cancelled': return '#F44336';
+                            default: return '#9E9E9E';
+                        }
+                    })
+                }]
+            };
+
+            const chartOptions = {
+                responsive: true, maintainAspectRatio: false,
+                plugins: {
+                    legend: { position: 'top', labels: { color: getComputedStyle(document.body).getPropertyValue('--text-medium') } },
+                    datalabels: {
+                        formatter: (value, ctx) => {
+                            const sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
+                            const percentage = sum > 0 ? (value * 100 / sum).toFixed(0) + '%' : '0%';
+                            return percentage;
+                        },
+                        color: '#fff', font: { weight: 'bold' }
+                    }
+                }
+            };
+            
+            charts.bookingStatus = new Chart(document.getElementById('bookingStatusChart'), { type: 'pie', data: chartData, options: chartOptions });
+        }
+        
+        function renderScheduleTimelineChart(isReset = false) {
+            if (isReset) {
+                scheduleTimelineView = 'week';
+                document.querySelectorAll('#schedule-timeline-filter button').forEach(btn => {
+                    btn.classList.toggle('active', btn.dataset.view === 'week');
+                });
+            }
+
+            const now = new Date();
+            let minDate, maxDate, timeUnit;
+
+            if (scheduleTimelineView === 'week') {
+                const startView = new Date();
+                startView.setDate(startView.getDate() - 3);
+                startView.setHours(0, 0, 0, 0);
+                const endView = new Date(startView);
+                endView.setDate(startView.getDate() + 6);
+                endView.setHours(23, 59, 59, 999);
+                minDate = startView;
+                maxDate = endView;
+                timeUnit = 'day';
+            } else if (scheduleTimelineView === 'month') {
+                minDate = new Date(now.getFullYear(), now.getMonth(), 1);
+                maxDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+                maxDate.setHours(23, 59, 59, 999);
+                timeUnit = 'week';
+            } else if (scheduleTimelineView === 'year') {
+                minDate = new Date(now.getFullYear(), 0, 1);
+                maxDate = new Date(now.getFullYear(), 11, 31);
+                maxDate.setHours(23, 59, 59, 999);
+                timeUnit = 'month';
+            }
+
+            // Filter out cancelled appointments from schedule timeline
+            const chartData = allData.appointments
+                .filter(a => {
+                    const bookingStatus = (a['Booking Status'] || '').toLowerCase();
+                    return a.starttime && a.endtime && bookingStatus !== 'cancelled';
+                })
+                .sort((a, b) => new Date(a.starttime) - new Date(b.starttime));
+
+            const data = {
+                labels: chartData.map(a => a.Name),
+                datasets: [{
+                    label: "Appointment",
+                    data: chartData.map(a => [new Date(a.starttime).getTime(), new Date(a.endtime).getTime()]),
+                    backgroundColor: '#667eea'
+                }]
+            };
+            
+            const options = {
+                indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        type: 'time', time: { unit: timeUnit }, min: minDate.getTime(), max: maxDate.getTime(),
+                        ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-medium') },
+                        grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
+                    },
+                    y: {
+                       ticks: { color: getComputedStyle(document.body).getPropertyValue('--text-medium') },
+                       grid: { color: getComputedStyle(document.body).getPropertyValue('--border-color') }
+                    }
+                },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: (context) => {
+                                const start = new Date(context.raw[0]).toLocaleString([], {dateStyle:'short', timeStyle: 'short'});
+                                const end = new Date(context.raw[1]).toLocaleString([], {timeStyle: 'short'});
+                                return `${context.label}: ${start} - ${end}`;
+                            }
+                        }
+                    },
+                    datalabels: { display: false },
+                    zoom: {
+                        pan: { enabled: true, mode: 'x' },
+                        zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'x' }
+                    }
+                }
+            };
+            if(charts.schedule) charts.schedule.destroy();
+            charts.schedule = new Chart(document.getElementById('scheduleTimelineChart'), { type: 'bar', data: data, options: options });
+        }
+
+        function renderAppointmentsTable() {
+            let filteredAppointments = allData.appointments.filter(a => {
+                const bookingStatus = (a['Booking Status'] || '').toLowerCase();
+                
+                // Filter out cancelled appointments unless showCancelled is true
+                if (!showCancelled && bookingStatus === 'cancelled') {
+                    return false;
+                }
+                
+                // Apply text filter
+                if (appointmentsFilter) {
+                    return Object.values(a).some(val => String(val).toLowerCase().includes(appointmentsFilter));
+                }
+                
+                return true;
+            });
+
+            filteredAppointments.sort((a, b) => {
+                let valA, valB;
+                
+                if (appointmentsSort.column === 'sl') {
+                    // For serial number, use the original index
+                    valA = allData.appointments.indexOf(a) + 1;
+                    valB = allData.appointments.indexOf(b) + 1;
+                } else {
+                    valA = a[appointmentsSort.column] || '';
+                    valB = b[appointmentsSort.column] || '';
+                    
+                    if (appointmentsSort.column === 'starttime') {
+                        valA = valA ? new Date(valA).getTime() : 0;
+                        valB = valB ? new Date(valB).getTime() : 0;
+                    }
+                }
+                
+                if (valA < valB) return appointmentsSort.direction === 'asc' ? -1 : 1;
+                if (valA > valB) return appointmentsSort.direction === 'asc' ? 1 : -1;
+                return 0;
+            });
+            
+            const tbody = document.querySelector('#appointments-table tbody');
+            const headers = document.querySelectorAll('#appointments-table th.sortable');
+            
+            headers.forEach(th => {
+                const icon = th.querySelector('.sort-icon');
+                if (th.dataset.column === appointmentsSort.column) {
+                    icon.innerHTML = appointmentsSort.direction === 'asc' ? '▲' : '▼';
+                } else { icon.innerHTML = ''; }
+            });
+
+            tbody.innerHTML = '';
+            filteredAppointments.forEach((a, index) => {
+                const row = tbody.insertRow();
+                const status = (a.Status || 'incomplete').toLowerCase();
+                const bookingStatus = (a['Booking Status'] || '').toLowerCase();
+                const options = ['incomplete', 'complete', 'missed'];
+                const optionsHtml = options.map(opt => `<option value="${opt}" ${status === opt ? 'selected' : ''}>${opt.charAt(0).toUpperCase() + opt.slice(1)}</option>`).join('');
+                
+                // Add cancelled class if booking status is cancelled
+                if (bookingStatus === 'cancelled') {
+                    row.classList.add('cancelled-row');
+                }
+                
+                const originalIndex = allData.appointments.indexOf(a) + 1;
+                
+                row.innerHTML = `
+                    <td>${originalIndex}</td>
+                    <td>${a.Name || 'N/A'}</td>
+                    <td>${a.starttime ? new Date(a.starttime).toLocaleString() : 'N/A'}</td>
+                    <td>${a.meetdescription || ''}</td>
+                    <td>${a['Booking Status'] || 'Unknown'}</td>
+                    <td>${a['Phone Number'] || 'N/A'}</td>
+                    <td style="display: none;">${a['Caller Phone Number'] || 'N/A'}</td>
+                    <td>${a.eventId || 'N/A'}</td>
+                    <td><select class="status-dropdown status-${status}" data-id="${a.id}">${optionsHtml}</select></td>`;
+            });
+        }
+        
+        function renderCallsTable() {
+            const tbody = document.querySelector('#calls-table tbody');
+            tbody.innerHTML = '';
+            allData.calls.forEach(c => {
+                const row = tbody.insertRow();
+                row.innerHTML = `<td>${c.customer_Number||'N/A'}</td><td>${c.startedAt?new Date(c.startedAt).toLocaleString():'N/A'}</td><td>${c.endedAt?new Date(c.endedAt).toLocaleString():'N/A'}</td><td class="summary-cell">${c.callsummary||'N/A'}</td>`;
+            });
+        }
+        
+        // --- Utility Functions ---
+        function getPeriodRange(period) {
+            const now = new Date();
+            let start, end;
+
+            switch (period) {
+                case 'today':
+                    start = new Date(); start.setHours(0, 0, 0, 0);
+                    end = new Date(); end.setHours(23, 59, 59, 999);
+                    break;
+                case 'this-week':
+                    const todayForWeek = new Date();
+                    const dayOfWeek = todayForWeek.getDay();
+                    const diffToMonday = todayForWeek.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
+                    start = new Date(todayForWeek.setDate(diffToMonday));
+                    start.setHours(0, 0, 0, 0);
+                    end = new Date(start);
+                    end.setDate(start.getDate() + 6);
+                    end.setHours(23, 59, 59, 999);
+                    break;
+                case 'this-month':
+                    start = new Date(now.getFullYear(), now.getMonth(), 1);
+                    end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+                    end.setHours(23, 59, 59, 999);
+                    break;
+                case 'this-year':
+                    start = new Date(now.getFullYear(), 0, 1);
+                    end = new Date(now.getFullYear(), 11, 31);
+                    end.setHours(23, 59, 59, 999);
+                    break;
+            }
+            return { start, end };
+        }
+        
+        function makeTableResizable(table) {
+            const headers = table.querySelectorAll('th.resizable');
+            headers.forEach(header => {
+                const resizer = header.querySelector('.resizer');
+                let startX, startWidth;
+
+                resizer.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    startX = e.pageX;
+                    startWidth = header.offsetWidth;
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                    resizer.classList.add('resizing');
+                });
+
+                function onMouseMove(e) {
+                    const newWidth = startWidth + (e.pageX - startX);
+                    if (newWidth > 50) { header.style.width = `${newWidth}px`; }
+                }
+
+                function onMouseUp() {
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                    resizer.classList.remove('resizing');
+                }
+            });
+        }
+        
+        initialize();
+    });
+    </script>
+</body>
+</html>
+

templates/login.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dental Admin Login</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        :root {
+            --primary-bg: #F8F8F8;
+            --card-bg: #FFFFFF;
+            --text-dark: #333333;
+            --text-medium: #666666;
+            --accent-blue: #2196F3;
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            --border-radius-lg: 20px;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--primary-bg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+            color: var(--text-dark);
+        }
+        .login-container {
+            display: flex;
+            width: 900px;
+            height: 600px;
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+        }
+        .login-form-section {
+            flex: 1;
+            padding: 60px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .login-image-section {
+            flex: 1;
+            background: linear-gradient(rgba(33, 150, 243, 0.8), rgba(33, 150, 243, 0.8)), url('https://images.unsplash.com/photo-1588776814546-1ff20a3a7aa8?q=80&w=1974&auto=format&fit=crop');
+            background-size: cover;
+            background-position: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 700;
+            font-size: 1.5rem;
+            color: var(--text-dark);
+            margin-bottom: 10px;
+        }
+        .logo-icon {
+            font-size: 1.8rem;
+        }
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+        .subtitle {
+            color: var(--text-medium);
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #E0E0E0;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border-color 0.2s ease;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--accent-blue);
+        }
+        .login-button {
+            width: 100%;
+            padding: 15px;
+            background-color: var(--accent-blue);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+        .login-button:hover {
+            background-color: #1976D2;
+        }
+        .error-message {
+            background-color: #ffebee;
+            color: #d32f2f;
+            padding: 10px;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-form-section">
+            <div class="logo">
+                <span class="logo-icon">🦷</span>
+                <span>DentalAdmin</span>
+            </div>
+            <h1>Welcome back!</h1>
+            <p class="subtitle">Please enter your details to sign in.</p>
+
+            {% if error %}
+                <div class="error-message">{{ error }}</div>
+            {% endif %}
+
+            <form action="/login" method="post">
+                <div class="form-group">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" name="username" required>
+                </div>
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input type="password" id="password" name="password" required>
+                </div>
+                <button type="submit" class="login-button">Sign In</button>
+            </form>
+        </div>
+        <div class="login-image-section">
+            <!-- Background image is set via CSS -->
+        </div>
+    </div>
+</body>
+</html>
+