setu-trafficmonitor 2.0.0__py3-none-any.whl

trafficmonitor/tasks.py

@@ -0,0 +1,137 @@
+"""
+Celery tasks for async request logging.
+Enterprise-grade async processing to avoid request latency.
+"""
+import logging
+
+logger = logging.getLogger(__name__)
+
+try:
+    from celery import shared_task
+    CELERY_AVAILABLE = True
+except ImportError:
+    CELERY_AVAILABLE = False
+    # Provide a no-op decorator if Celery is not available
+    def shared_task(*args, **kwargs):
+        def decorator(func):
+            return func
+        return decorator
+
+
+@shared_task(bind=True, max_retries=3, default_retry_delay=60)
+def log_request_async(self, log_data):
+    """
+    Async task to log request to database.
+    Reduces response time by offloading DB writes to background worker.
+    
+    Args:
+        log_data (dict): Dictionary containing all request log fields
+    
+    Returns:
+        str: Log entry ID
+    """
+    try:
+        from trafficmonitor.models import RequestLog
+        
+        log_entry = RequestLog.objects.create(**log_data)
+        return str(log_entry.id)
+    
+    except Exception as exc:
+        logger.error(f"Failed to log request asynchronously: {exc}")
+        # Retry the task
+        if self.request.retries < self.max_retries:
+            raise self.retry(exc=exc)
+        return None
+
+
+@shared_task
+def cleanup_old_logs(retention_days=90):
+    """
+    Celery task to clean up old request logs.
+    Should be scheduled to run daily (e.g., via Celery Beat).
+    
+    Args:
+        retention_days (int): Number of days to retain logs
+    
+    Returns:
+        dict: Cleanup statistics
+    """
+    from datetime import timedelta
+    from django.utils import timezone
+    from trafficmonitor.models import RequestLog
+    
+    cutoff_date = timezone.now() - timedelta(days=retention_days)
+    
+    # Delete in batches to avoid locking
+    batch_size = 1000
+    total_deleted = 0
+    
+    while True:
+        # Get IDs of logs to delete
+        log_ids = list(
+            RequestLog.objects.filter(
+                timestamp__lt=cutoff_date
+            ).values_list('id', flat=True)[:batch_size]
+        )
+        
+        if not log_ids:
+            break
+        
+        # Delete batch
+        deleted_count, _ = RequestLog.objects.filter(id__in=log_ids).delete()
+        total_deleted += deleted_count
+        
+        logger.info(f"Deleted {deleted_count} old request logs (batch)")
+    
+    logger.info(f"Cleanup complete. Total deleted: {total_deleted} logs older than {retention_days} days")
+    
+    return {
+        'deleted_count': total_deleted,
+        'cutoff_date': cutoff_date.isoformat(),
+        'retention_days': retention_days,
+    }
+
+
+@shared_task
+def aggregate_daily_stats(date=None):
+    """
+    Pre-compute daily statistics for faster dashboard loading.
+    Should be scheduled to run daily after midnight.
+    
+    Args:
+        date: Date to aggregate (defaults to yesterday)
+    
+    Returns:
+        dict: Aggregated statistics
+    """
+    from datetime import timedelta
+    from django.utils import timezone
+    from trafficmonitor.models import RequestLog
+    from trafficmonitor.analytics.enhanced_queries import EnhancedAnalyticsQueries
+    
+    if date is None:
+        # Default to yesterday
+        date = (timezone.now() - timedelta(days=1)).date()
+    
+    start_date = timezone.make_aware(timezone.datetime.combine(date, timezone.datetime.min.time()))
+    end_date = timezone.make_aware(timezone.datetime.combine(date, timezone.datetime.max.time()))
+    
+    # Compute statistics
+    stats = {
+        'date': date.isoformat(),
+        'total_requests': RequestLog.objects.filter(
+            timestamp__gte=start_date,
+            timestamp__lte=end_date
+        ).count(),
+        'read_write_summary': EnhancedAnalyticsQueries.get_read_write_summary(
+            start_date, end_date
+        ),
+        'api_health': EnhancedAnalyticsQueries.get_api_health_metrics(
+            start_date, end_date
+        ),
+    }
+    
+    # Store in cache or separate stats table (implement as needed)
+    logger.info(f"Daily stats aggregated for {date}: {stats['total_requests']} requests")
+    
+    return stats

trafficmonitor/templates/analytics/dashboard.html

@@ -0,0 +1,500 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-Content-Type-Options" content="nosniff">
+    <meta http-equiv="X-Frame-Options" content="DENY">
+    <meta http-equiv="X-XSS-Protection" content="1; mode=block">
+    <meta name="csrf-token" content="{{ csrf_token }}">
+    <title>Enterprise Analytics Dashboard - TrafficMonitor v2.0</title>
+
+    <!-- CDN assets -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="{% static 'analytics/css/dashboard.css' %}">
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+
+    <style>
+        .card {
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin-bottom: 1rem;
+        }
+
+        .chart-container-large {
+            position: relative;
+            height: 400px;
+            margin-bottom: 1rem;
+        }
+
+        .stat-card {
+            background: linear-gradient(135deg, var(--tw-gradient-from), var(--tw-gradient-to));
+        }
+
+        .metric-badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .badge-success {
+            background: #10b981;
+            color: white;
+        }
+
+        .badge-warning {
+            background: #f59e0b;
+            color: white;
+        }
+
+        .badge-danger {
+            background: #ef4444;
+            color: white;
+        }
+
+        .badge-info {
+            background: #3b82f6;
+            color: white;
+        }
+    </style>
+</head>
+
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 to-blue-700 shadow-lg">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h1 class="text-3xl font-bold text-white">
+                        <i class="fas fa-chart-line mr-2"></i>
+                        Enterprise Analytics Dashboard
+                    </h1>
+                    <p class="text-sm text-blue-100 mt-1">
+                        <i class="fas fa-rocket mr-1"></i>
+                        TrafficMonitor v2.0 - Real-time API monitoring with Read/Write insights
+                    </p>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button onclick="manualRefresh()"
+                        class="text-white hover:text-blue-100 px-3 py-2 rounded-md hover:bg-blue-500 transition focus:outline-none"
+                        title="Refresh Now">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                    <div class="text-right border-l border-blue-400 pl-4">
+                        <p class="text-xs text-blue-100">Auto-refresh</p>
+                        <button id="toggleRefresh" onclick="toggleAutoRefresh()"
+                            class="text-sm font-semibold text-white hover:text-blue-100 focus:outline-none">
+                            <i id="refreshIcon" class="fas fa-sync-alt fa-spin"></i>
+                            <span id="refreshStatus">ON (30s)</span>
+                        </button>
+                    </div>
+                    <a href="/admin/"
+                        class="text-sm text-white hover:text-blue-100 px-3 py-2 rounded-md hover:bg-blue-500 transition">
+                        <i class="fas fa-cog mr-1"></i> Admin
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Filters Bar -->
+    <div class="bg-white border-b border-gray-200">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <form id="filterForm" class="grid grid-cols-1 md:grid-cols-5 gap-4">
+                <!-- Date Range -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
+                    <select name="range" id="rangeSelect"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="today" {% if selected_range=='today' %}selected{% endif %}>Today</option>
+                        <option value="yesterday" {% if selected_range=='yesterday' %}selected{% endif %}>Yesterday
+                        </option>
+                        <option value="last_7_days" {% if selected_range=='last_7_days' %}selected{% endif %}>Last 7
+                            Days</option>
+                        <option value="last_30_days" {% if selected_range=='last_30_days' %}selected{% endif %}>Last 30
+                            Days</option>
+                        <option value="custom" {% if selected_range=='custom' %}selected{% endif %}>Custom Range
+                        </option>
+                    </select>
+                </div>
+
+                <!-- Method Filter -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Method</label>
+                    <select name="method" id="methodFilter"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="">All Methods</option>
+                        <option value="GET">GET</option>
+                        <option value="POST">POST</option>
+                        <option value="PUT">PUT</option>
+                        <option value="PATCH">PATCH</option>
+                        <option value="DELETE">DELETE</option>
+                    </select>
+                </div>
+
+                <!-- Status Filter -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Status Code</label>
+                    <select name="status" id="statusFilter"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="">All Status</option>
+                        <option value="200">200 OK</option>
+                        <option value="201">201 Created</option>
+                        <option value="400">400 Bad Request</option>
+                        <option value="401">401 Unauthorized</option>
+                        <option value="403">403 Forbidden</option>
+                        <option value="404">404 Not Found</option>
+                        <option value="500">500 Server Error</option>
+                    </select>
+                </div>
+
+                <!-- Path Filter -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Path Contains</label>
+                    <input type="text" name="path" id="pathFilter" placeholder="e.g., /api/monitoring"
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+
+                <!-- Apply Button -->
+                <div class="flex items-end">
+                    <button type="button" onclick="applyFilters()"
+                        class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <i class="fas fa-filter mr-2"></i>Apply Filters
+                    </button>
+                </div>
+            </form>
+
+            <!-- Custom Date Range (hidden by default) -->
+            <div id="customRangeContainer" class="mt-4 hidden">
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
+                        <input type="date" id="startDate" class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
+                        <input type="date" id="endDate" class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Loading Indicator -->
+        <div id="loadingIndicator" class="text-center py-12">
+            <i class="fas fa-spinner fa-spin text-4xl text-blue-600"></i>
+            <p class="text-gray-600 mt-4">Loading analytics data...</p>
+        </div>
+
+        <!-- Dashboard Content (hidden until loaded) -->
+        <div id="dashboardContent" class="hidden">
+            <!-- Stats Overview Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
+                <!-- Total Requests -->
+                <div
+                    class="card stat-card bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-blue-100 text-sm font-medium">Total Requests</p>
+                            <p id="totalRequests" class="text-3xl font-bold mt-2">-</p>
+                            <p class="text-blue-100 text-xs mt-1">Selected Range</p>
+                        </div>
+                        <i class="fas fa-server text-4xl text-blue-200"></i>
+                    </div>
+                </div>
+
+                <!-- Read Operations -->
+                <div
+                    class="card stat-card bg-gradient-to-br from-green-500 to-green-600 rounded-lg shadow-lg p-6 text-white">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-green-100 text-sm font-medium">📖 READ Ops</p>
+                            <p id="readOps" class="text-3xl font-bold mt-2">-</p>
+                            <p id="readPercent" class="text-green-100 text-xs mt-1">-% of total</p>
+                        </div>
+                        <i class="fas fa-book-reader text-4xl text-green-200"></i>
+                    </div>
+                </div>
+
+                <!-- Write Operations -->
+                <div
+                    class="card stat-card bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-purple-100 text-sm font-medium">✏️ WRITE Ops</p>
+                            <p id="writeOps" class="text-3xl font-bold mt-2">-</p>
+                            <p id="writePercent" class="text-purple-100 text-xs mt-1">-% of total</p>
+                        </div>
+                        <i class="fas fa-edit text-4xl text-purple-200"></i>
+                    </div>
+                </div>
+
+                <!-- API Success Rate -->
+                <div
+                    class="card stat-card bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg shadow-lg p-6 text-white">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-emerald-100 text-sm font-medium">Success Rate</p>
+                            <p id="successRate" class="text-3xl font-bold mt-2">-</p>
+                            <p class="text-emerald-100 text-xs mt-1">2xx Responses</p>
+                        </div>
+                        <i class="fas fa-check-circle text-4xl text-emerald-200"></i>
+                    </div>
+                </div>
+
+                <!-- P95 Response Time -->
+                <div
+                    class="card stat-card bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg shadow-lg p-6 text-white">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-orange-100 text-sm font-medium">P95 Response</p>
+                            <p id="p95ResponseTime" class="text-3xl font-bold mt-2">-</p>
+                            <p class="text-orange-100 text-xs mt-1">Milliseconds</p>
+                        </div>
+                        <i class="fas fa-tachometer-alt text-4xl text-orange-200"></i>
+                    </div>
+                </div>
+            </div>
+
+            <!-- API Health Metrics Cards -->
+            <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-8">
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
+                    <p class="text-gray-600 text-xs font-medium">2xx Success</p>
+                    <p id="statusSuccess" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-red-500">
+                    <p class="text-gray-600 text-xs font-medium">4xx/5xx Errors</p>
+                    <p id="statusErrors" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
+                    <p class="text-gray-600 text-xs font-medium">P50 Response</p>
+                    <p id="p50Response" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-yellow-500">
+                    <p class="text-gray-600 text-xs font-medium">P99 Response</p>
+                    <p id="p99Response" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-purple-500">
+                    <p class="text-gray-600 text-xs font-medium">Throughput</p>
+                    <p id="throughputRPS" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+                <div class="bg-white rounded-lg shadow p-4 border-l-4 border-indigo-500">
+                    <p class="text-gray-600 text-xs font-medium">Avg Queries</p>
+                    <p id="avgQueries" class="text-2xl font-bold text-gray-900 mt-1">-</p>
+                </div>
+            </div>
+
+            <!-- Charts Grid -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                <!-- Requests Over Time -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-chart-line text-blue-600 mr-2"></i>
+                        Requests Over Time
+                    </h3>
+                    <div class="chart-container-large">
+                        <canvas id="requestsOverTimeChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Read vs Write Operations -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-exchange-alt text-green-600 mr-2"></i>
+                        READ vs WRITE Operations
+                    </h3>
+                    <div class="chart-container-large">
+                        <canvas id="readWriteChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- HTTP Methods Distribution -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-chart-pie text-purple-600 mr-2"></i>
+                        HTTP Methods Distribution
+                    </h3>
+                    <div class="chart-container">
+                        <canvas id="methodsChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Endpoint Categories -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-sitemap text-indigo-600 mr-2"></i>
+                        Endpoint Categories
+                    </h3>
+                    <div class="chart-container">
+                        <canvas id="endpointCategoriesChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Full Width Charts -->
+            <div class="grid grid-cols-1 gap-6 mb-8">
+                <!-- Slowest Endpoints -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-hourglass-half text-orange-600 mr-2"></i>
+                        Slowest Endpoints (Avg Response Time)
+                    </h3>
+                    <div class="chart-container-large">
+                        <canvas id="slowestEndpointsChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Hourly Heatmap -->
+                <div class="bg-white rounded-lg shadow-lg p-6">
+                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                        <i class="fas fa-fire text-red-600 mr-2"></i>
+                        Request Volume by Hour
+                    </h3>
+                    <div class="chart-container">
+                        <canvas id="hourlyHeatmapChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Top Endpoints Table -->
+            <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">
+                    <i class="fas fa-trophy text-yellow-600 mr-2"></i>
+                    Top 10 Endpoints by Request Volume
+                </h3>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th
+                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    #</th>
+                                <th
+                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Endpoint</th>
+                                <th
+                                    class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Category</th>
+                                <th
+                                    class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Requests</th>
+                                <th
+                                    class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Avg Time</th>
+                                <th
+                                    class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Max Time</th>
+                                <th
+                                    class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                    Health</th>
+                            </tr>
+                        </thead>
+                        <tbody id="topEndpointsTable" class="bg-white divide-y divide-gray-200">
+                            <!-- Populated by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="mt-8 p-6 bg-white rounded-lg shadow-lg">
+                <div class="flex items-center justify-between">
+                    <div class="text-sm text-gray-600">
+                        <p><i class="fas fa-clock mr-2"></i>Last updated: <span id="lastUpdated"
+                                class="font-semibold">-</span></p>
+                        <p class="mt-1"><i class="fas fa-rocket mr-2"></i>TrafficMonitor v2.0 - Enterprise Edition</p>
+                    </div>
+                    <div class="flex space-x-4">
+                        <a href="/admin/trafficmonitor/requestlog/"
+                            class="text-blue-600 hover:text-blue-800 font-medium">
+                            <i class="fas fa-database mr-1"></i> View Raw Logs
+                        </a>
+                        <a href="/api/analytics/overview/" class="text-green-600 hover:text-green-800 font-medium">
+                            <i class="fas fa-code mr-1"></i> API Docs
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- JavaScript - Enterprise v2.0 -->
+    <script src="{% static 'analytics/js/dashboard-v2.js' %}"></script>
+    <script>
+        // Toggle auto-refresh on/off
+        function toggleAutoRefresh() {
+            if (window.autoRefreshEnabled) {
+                // Disable auto-refresh
+                if (window.refreshIntervalId) {
+                    clearInterval(window.refreshIntervalId);
+                    window.refreshIntervalId = null;
+                }
+                if (window.countdownIntervalId) {
+                    clearInterval(window.countdownIntervalId);
+                    window.countdownIntervalId = null;
+                }
+                window.autoRefreshEnabled = false;
+                document.getElementById('refreshStatus').textContent = 'OFF';
+                document.getElementById('refreshIcon').classList.remove('fa-spin');
+                console.log('Auto-refresh disabled');
+            } else {
+                // Enable auto-refresh
+                window.autoRefreshEnabled = true;
+
+                // Main refresh interval
+                window.refreshIntervalId = setInterval(function () {
+                    console.log('Auto-refreshing dashboard data...');
+                    refreshDashboard();
+                }, 30000);
+
+                // Countdown timer
+                let countdown = 30;
+                window.countdownIntervalId = setInterval(() => {
+                    countdown--;
+                    const refreshStatus = document.getElementById('refreshStatus');
+                    if (refreshStatus && window.autoRefreshEnabled) {
+                        refreshStatus.textContent = `ON (${countdown}s)`;
+                    }
+                    if (countdown <= 0) {
+                        countdown = 30;
+                    }
+                }, 1000);
+
+                document.getElementById('refreshStatus').textContent = 'ON (30s)';
+                document.getElementById('refreshIcon').classList.add('fa-spin');
+                console.log('Auto-refresh enabled');
+            }
+        }
+
+        // Manual refresh button
+        function manualRefresh() {
+            console.log('Manual refresh triggered');
+            const icon = document.getElementById('refreshIcon');
+            icon.classList.add('fa-spin');
+            refreshDashboard().then(() => {
+                setTimeout(() => icon.classList.remove('fa-spin'), 1000);
+            });
+        }
+    </script>
+</body>
+
+</html>