Update main.py

main.py

@@ -727,471 +727,555 @@ def generate_usage_html(usage_data: dict, days: int = 7):
     daily_dates = list(usage_data['daily_usage_period'].keys())
     daily_requests = [data['requests'] for data in usage_data['daily_usage_period'].values()]
     daily_unique_ips = [data['unique_ips_count'] for data in usage_data['daily_usage_period'].values()]
+    daily_usage_table_rows = "\n".join([
+        f"""
+        <tr class="hover:bg-slate-700/20 transition-colors duration-200">
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-200">{date}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/20 text-blue-300">
+                    {data['requests']:,}
+                </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/20 text-emerald-300">
+                    {data['unique_ips_count']:,}
+                </span>
+            </td>
+        </tr>
+        """ for date, data in usage_data['daily_usage_period'].items()
+    ])
 
     model_usage_all_time_rows = "\n".join([
         f"""
-        <tr>
-            <td>{model}</td>
-            <td>{stats['total_requests']}</td>
-            <td>{datetime.datetime.fromisoformat(stats['first_used']).strftime("%Y-%m-%d %H:%M")}</td>
-            <td>{datetime.datetime.fromisoformat(stats['last_used']).strftime("%Y-%m-%d %H:%M")}</td>
+        <tr class="hover:bg-slate-700/20 transition-colors duration-200">
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                    <div class="w-2 h-2 bg-purple-400 rounded-full mr-3"></div>
+                    <span class="text-sm font-medium text-slate-200">{model}</span>
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-500/20 text-purple-300">
+                    {stats['total_requests']:,}
+                </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">{datetime.datetime.fromisoformat(stats['first_used']).strftime("%Y-%m-%d %H:%M")}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">{datetime.datetime.fromisoformat(stats['last_used']).strftime("%Y-%m-%d %H:%M")}</td>
         </tr>
         """ for model, stats in usage_data['all_time_model_usage'].items()
     ])
 
     api_usage_all_time_rows = "\n".join([
         f"""
-        <tr>
-            <td>{endpoint}</td>
-            <td>{stats['total_requests']}</td>
-            <td>{datetime.datetime.fromisoformat(stats['first_used']).strftime("%Y-%m-%d %H:%M")}</td>
-            <td>{datetime.datetime.fromisoformat(stats['last_used']).strftime("%Y-%m-%d %H:%M")}</td>
+        <tr class="hover:bg-slate-700/20 transition-colors duration-200">
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                    <div class="w-2 h-2 bg-emerald-400 rounded-full mr-3"></div>
+                    <span class="text-sm font-medium text-slate-200">{endpoint}</span>
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/20 text-emerald-300">
+                    {stats['total_requests']:,}
+                </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">{datetime.datetime.fromisoformat(stats['first_used']).strftime("%Y-%m-%d %H:%M")}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-400">{datetime.datetime.fromisoformat(stats['last_used']).strftime("%Y-%m-%d %H:%M")}</td>
         </tr>
         """ for endpoint, stats in usage_data['all_time_endpoint_usage'].items()
     ])
 
-    daily_usage_table_rows = "\n".join([
-        f"""
-        <tr>
-            <td>{date}</td>
-            <td>{data['requests']}</td>
-            <td>{data['unique_ips_count']}</td>
-        </tr>
-        """ for date, data in usage_data['daily_usage_period'].items()
-    ])
-
     recent_requests_rows = "\n".join([
         f"""
-        <tr>
-            <td>{datetime.datetime.fromisoformat(req['timestamp']).strftime("%Y-%m-%d %H:%M:%S")}</td>
-            <td>{req['model']}</td>
-            <td>{req['endpoint']}</td>
-            <td>{req['ip_address']}</td>
-            <td>{req['user_agent']}</td>
+        <tr class="hover:bg-slate-700/20 transition-colors duration-200">
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-300">{datetime.datetime.fromisoformat(req['timestamp']).strftime("%Y-%m-%d %H:%M:%S")}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-500/20 text-indigo-300">
+                    {req['model']}
+                </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">{req['endpoint']}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-400">{req['ip_address']}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 truncate max-w-xs">{req['user_agent'][:50]}...</td>
         </tr>
         """ for req in usage_data['recent_requests']
     ])
-
     html_content = f"""
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Lokiai AI - Usage Statistics</title>
-        <link href="[https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap)" rel="stylesheet">
-        
-        <script src="[https://cdn.jsdelivr.net/npm/chart.js](https://cdn.jsdelivr.net/npm/chart.js)"></script>
-        <style>
-            :root {{
-                --bg-dark: #0f1011;
-                --bg-darker: #070708;
-                --text-primary: #e6e6e6;
-                --text-secondary: #8c8c8c;
-                --border-color: #2c2c2c;
-                --accent-color: #3a6ee0;
-                --accent-hover: #4a7ef0;
-                --chart-bg-light: rgba(58, 110, 224, 0.2);
-                --chart-border-light: #3a6ee0;
-            }}
-            body {{
-                font-family: 'Inter', sans-serif;
-                background-color: var(--bg-dark);
-                color: var(--text-primary);
-                max-width: 1200px;
-                margin: 0 auto;
-                padding: 40px 20px;
-                line-height: 1.6;
-            }}
-            .logo {{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-bottom: 30px;
-            }}
-            .logo h1 {{
-                font-weight: 700;
-                font-size: 2.8em;
-                color: var(--text-primary);
-                margin-left: 15px;
-            }}
-            .logo img {{
-                width: 70px;
-                height: 70px;
-                border-radius: 12px;
-                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-            }}
-            .container {{
-                background-color: var(--bg-darker);
-                border-radius: 16px;
-                padding: 30px;
-                box-shadow: 0 20px 50px rgba(0,0,0,0.4);
-                border: 1px solid var(--border-color);
-            }}
-            h2, h3 {{
-                color: var(--text-primary);
-                border-bottom: 2px solid var(--border-color);
-                padding-bottom: 12px;
-                margin-top: 40px;
-                margin-bottom: 25px;
-                font-weight: 600;
-                font-size: 1.8em;
-            }}
-            .summary-grid {{
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-                gap: 20px;
-                margin-bottom: 30px;
-            }}
-            .summary-card {{
-                background-color: var(--bg-dark);
-                border-radius: 10px;
-                padding: 20px;
-                text-align: center;
-                border: 1px solid var(--border-color);
-                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
-                transition: transform 0.2s ease-in-out;
-            }}
-            .summary-card:hover {{
-                transform: translateY(-5px);
-            }}
-            .summary-card h3 {{
-                margin-top: 0;
-                font-size: 1.1em;
-                color: var(--text-secondary);
-                border-bottom: none;
-                padding-bottom: 0;
-                margin-bottom: 10px;
-            }}
-            .summary-card p {{
-                font-size: 2.2em;
-                font-weight: 700;
-                color: var(--accent-color);
-                margin: 0;
-            }}
-            table {{
-                width: 100%;
-                border-collapse: separate;
-                border-spacing: 0;
-                margin-bottom: 40px;
-                background-color: var(--bg-dark);
-                border-radius: 10px;
-                overflow: hidden;
-                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
-            }}
-            th, td {{
-                border: 1px solid var(--border-color);
-                padding: 15px;
-                text-align: left;
-                transition: background-color 0.3s ease;
-            }}
-            th {{
-                background-color: #1a1a1a;
-                color: var(--text-primary);
-                font-weight: 600;
-                text-transform: uppercase;
-                font-size: 0.95em;
-            }}
-            tr:nth-child(even) {{
-                background-color: rgba(255,255,255,0.03);
-            }}
-            tr:hover {{
-                background-color: rgba(62,100,255,0.1);
-            }}
-            .chart-container {{
-                background-color: var(--bg-dark);
-                border-radius: 10px;
-                padding: 20px;
-                margin-bottom: 40px;
-                border: 1px solid var(--border-color);
-                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
-                max-height: 400px;
-                position: relative;
-            }}
-            canvas {{
-                max-width: 100% !important;
-                height: auto !important;
-            }}
-            @media (max-width: 768px) {{
-                body {{
-                    padding: 20px 10px;
-                }}
-                .container {{
-                    padding: 20px;
-                }}
-                .logo h1 {{
-                    font-size: 2em;
-                }}
-                .summary-card p {{
-                    font-size: 1.8em;
-                }}
-                h2, h3 {{
-                    font-size: 1.5em;
-                }}
-                table {{
-                    font-size: 0.85em;
-                }}
-                th, td {{
-                    padding: 10px;
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Lokiai AI - Usage Analytics Dashboard</title>
+            <script src="https://cdn.tailwindcss.com"></script>
+            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+            <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+            <script>
+                tailwind.config = {{
+                    theme: {{
+                        extend: {{
+                            animation: {{
+                                'fade-in': 'fadeIn 0.5s ease-in-out',
+                                'slide-up': 'slideUp 0.6s ease-out',
+                                'pulse-slow': 'pulse 3s infinite',
+                                'bounce-gentle': 'bounceGentle 2s infinite',
+                            }},
+                            keyframes: {{
+                                fadeIn: {{
+                                    '0%': {{ opacity: '0', transform: 'translateY(10px)' }},
+                                    '100%': {{ opacity: '1', transform: 'translateY(0)' }},
+                                }},
+                                slideUp: {{
+                                    '0%': {{ opacity: '0', transform: 'translateY(30px)' }},
+                                    '100%': {{ opacity: '1', transform: 'translateY(0)' }},
+                                }},
+                                bounceGentle: {{
+                                    '0%, 100%': {{ transform: 'translateY(-2px)' }},
+                                    '50%': {{ transform: 'translateY(2px)' }},
+                                }}
+                            }}
+                        }}
+                    }}
                 }}
-            }}
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="logo">
-                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMC9zdmciPjxwYXRoIGQ9Ik0xMDAgMzVMNTAgOTBoMTAwWiIgZmlsbD0iIzNhNmVlMCIvPjxjaXJjbGUgY3g9IjEwMCIgY3k9IjE0MCIgcj0iMzAiIGZpbGw9IiMzYTZlZTAiLz48L3N2Zz4=" alt="Lokiai AI Logo">
-                <h1>Lokiai AI Usage</h1>
-            </div>
-
-            <div class="summary-grid">
-                <div class="summary-card">
-                    <h3>Total Requests (All Time)</h3>
-                    <p>{usage_data['total_requests']}</p>
+            </script>
+        </head>
+        <body class="bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white min-h-screen">
+            <!-- Navigation Header -->
+            <nav class="bg-slate-900/80 backdrop-blur-md border-b border-slate-700/50 sticky top-0 z-50">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between items-center h-16">
+                        <div class="flex items-center space-x-4">
+                            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+                                <i class="fas fa-robot text-white text-lg"></i>
+                            </div>
+                            <div>
+                                <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
+                                    Lokiai AI
+                                </h1>
+                                <p class="text-xs text-slate-400">Usage Analytics Dashboard</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
+                            <span class="text-sm text-slate-300">Live</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="summary-card">
-                    <h3>Unique IPs (All Time)</h3>
-                    <p>{usage_data['unique_ips_total_count']}</p>
+            </nav>
+    
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+                <!-- Hero Stats Section -->
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8" x-data="{{}}">
+                    <div class="bg-gradient-to-br from-blue-500/10 to-blue-600/5 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-6 hover:border-blue-400/30 transition-all duration-300 animate-fade-in">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-blue-300 text-sm font-medium">Total Requests</p>
+                                <p class="text-3xl font-bold text-white mt-2">{usage_data['total_requests']:,}</p>
+                                <p class="text-green-400 text-xs mt-1">
+                                    <i class="fas fa-arrow-up mr-1"></i>All Time
+                                </p>
+                            </div>
+                            <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
+                                <i class="fas fa-chart-line text-blue-400 text-xl"></i>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 backdrop-blur-sm border border-emerald-500/20 rounded-2xl p-6 hover:border-emerald-400/30 transition-all duration-300 animate-fade-in" style="animation-delay: 0.1s">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-emerald-300 text-sm font-medium">Unique Users</p>
+                                <p class="text-3xl font-bold text-white mt-2">{usage_data['unique_ips_total_count']:,}</p>
+                                <p class="text-green-400 text-xs mt-1">
+                                    <i class="fas fa-users mr-1"></i>All Time
+                                </p>
+                            </div>
+                            <div class="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center">
+                                <i class="fas fa-users text-emerald-400 text-xl"></i>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="bg-gradient-to-br from-purple-500/10 to-purple-600/5 backdrop-blur-sm border border-purple-500/20 rounded-2xl p-6 hover:border-purple-400/30 transition-all duration-300 animate-fade-in" style="animation-delay: 0.2s">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-purple-300 text-sm font-medium">Active Models</p>
+                                <p class="text-3xl font-bold text-white mt-2">{len(usage_data['model_usage_period'])}</p>
+                                <p class="text-blue-400 text-xs mt-1">
+                                    <i class="fas fa-clock mr-1"></i>Last {days} Days
+                                </p>
+                            </div>
+                            <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
+                                <i class="fas fa-brain text-purple-400 text-xl"></i>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div class="bg-gradient-to-br from-amber-500/10 to-amber-600/5 backdrop-blur-sm border border-amber-500/20 rounded-2xl p-6 hover:border-amber-400/30 transition-all duration-300 animate-fade-in" style="animation-delay: 0.3s">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-amber-300 text-sm font-medium">API Endpoints</p>
+                                <p class="text-3xl font-bold text-white mt-2">{len(usage_data['endpoint_usage_period'])}</p>
+                                <p class="text-blue-400 text-xs mt-1">
+                                    <i class="fas fa-clock mr-1"></i>Last {days} Days
+                                </p>
+                            </div>
+                            <div class="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center">
+                                <i class="fas fa-plug text-amber-400 text-xl"></i>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="summary-card">
-                    <h3>Models Used (Last {days} Days)</h3>
-                    <p>{len(usage_data['model_usage_period'])}</p>
+    
+                <!-- Charts Section -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <!-- Daily Usage Chart -->
+                    <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6 animate-slide-up">
+                        <div class="flex items-center justify-between mb-6">
+                            <div>
+                                <h3 class="text-xl font-semibold text-white">Daily Usage Trends</h3>
+                                <p class="text-slate-400 text-sm">Last {days} days performance</p>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
+                                <span class="text-xs text-slate-300">Requests</span>
+                                <div class="w-3 h-3 bg-amber-400 rounded-full ml-4"></div>
+                                <span class="text-xs text-slate-300">Unique IPs</span>
+                            </div>
+                        </div>
+                        <div class="h-64">
+                            <canvas id="dailyRequestsChart" class="w-full h-full"></canvas>
+                        </div>
+                    </div>
+    
+                    <!-- Model Usage Chart -->
+                    <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.2s">
+                        <div class="flex items-center justify-between mb-6">
+                            <div>
+                                <h3 class="text-xl font-semibold text-white">Model Distribution</h3>
+                                <p class="text-slate-400 text-sm">Usage by AI models</p>
+                            </div>
+                        </div>
+                        <div class="h-64">
+                            <canvas id="modelUsageChart" class="w-full h-full"></canvas>
+                        </div>
+                    </div>
                 </div>
-                <div class="summary-card">
-                    <h3>Endpoints Used (Last {days} Days)</h3>
-                    <p>{len(usage_data['endpoint_usage_period'])}</p>
+    
+                <!-- Endpoint Usage Chart -->
+                <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6 animate-slide-up" style="animation-delay: 0.4s">
+                    <div class="flex items-center justify-between mb-6">
+                        <div>
+                            <h2 class="text-2xl font-bold text-white">API Endpoint Analytics</h2>
+                            <p class="text-slate-400">Distribution of requests across different endpoints</p>
+                        </div>
+                    </div>
+                    <div class="h-80">
+                        <canvas id="endpointUsageChart" class="w-full h-full"></canvas>
+                    </div>
+                </div>
+    
+                <!-- Data Tables Section -->
+                <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
+                    <!-- Daily Usage Table -->
+                    <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl animate-slide-up" style="animation-delay: 0.6s">
+                        <div class="p-6 border-b border-slate-700/50">
+                            <h3 class="text-xl font-semibold text-white flex items-center">
+                                <i class="fas fa-calendar-alt mr-3 text-blue-400"></i>
+                                Daily Breakdown
+                            </h3>
+                            <p class="text-slate-400 text-sm mt-1">Last {days} days detailed view</p>
+                        </div>
+                        <div class="overflow-x-auto max-h-96">
+                            <table class="w-full">
+                                <thead class="bg-slate-700/30">
+                                    <tr>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Date</th>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Requests</th>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Unique IPs</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-slate-700/30">
+                                    {daily_usage_table_rows}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+    
+                    <!-- Model Usage Table -->
+                    <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl animate-slide-up" style="animation-delay: 0.8s">
+                        <div class="p-6 border-b border-slate-700/50">
+                            <h3 class="text-xl font-semibold text-white flex items-center">
+                                <i class="fas fa-robot mr-3 text-purple-400"></i>
+                                Model Statistics
+                            </h3>
+                            <p class="text-slate-400 text-sm mt-1">All-time model usage data</p>
+                        </div>
+                        <div class="overflow-x-auto max-h-96">
+                            <table class="w-full">
+                                <thead class="bg-slate-700/30">
+                                    <tr>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Model</th>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Requests</th>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">First Used</th>
+                                        <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Last Used</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-slate-700/30">
+                                    {model_usage_all_time_rows}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+    
+                <!-- API Endpoints Table -->
+                <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl animate-slide-up" style="animation-delay: 1s">
+                    <div class="p-6 border-b border-slate-700/50">
+                        <h3 class="text-xl font-semibold text-white flex items-center">
+                            <i class="fas fa-plug mr-3 text-emerald-400"></i>
+                            API Endpoint Details
+                        </h3>
+                        <p class="text-slate-400 text-sm mt-1">Complete endpoint usage statistics</p>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full">
+                            <thead class="bg-slate-700/30">
+                                <tr>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Endpoint</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Total Requests</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">First Used</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Last Used</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-700/30">
+                                {api_usage_all_time_rows}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+    
+                <!-- Recent Requests -->
+                <div class="bg-slate-800/40 backdrop-blur-sm border border-slate-700/50 rounded-2xl animate-slide-up" style="animation-delay: 1.2s">
+                    <div class="p-6 border-b border-slate-700/50">
+                        <h3 class="text-xl font-semibold text-white flex items-center">
+                            <i class="fas fa-clock mr-3 text-amber-400"></i>
+                            Recent Activity
+                        </h3>
+                        <p class="text-slate-400 text-sm mt-1">Last 20 requests in real-time</p>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full">
+                            <thead class="bg-slate-700/30">
+                                <tr>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Timestamp</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Model</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Endpoint</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">IP Address</th>
+                                    <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">User Agent</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-700/30">
+                                {recent_requests_rows}
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
-
-            <h2>Daily Usage (Last {days} Days)</h2>
-            <div class="chart-container">
-                <canvas id="dailyRequestsChart"></canvas>
-            </div>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Date</th>
-                        <th>Requests</th>
-                        <th>Unique IPs</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {daily_usage_table_rows}
-                </tbody>
-            </table>
-
-            <h2>Model Usage (Last {days} Days)</h2>
-            <div class="chart-container">
-                <canvas id="modelUsageChart"></canvas>
-            </div>
-            <h3>Model Usage (All Time Details)</h3>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Model</th>
-                        <th>Total Requests</th>
-                        <th>First Used</th>
-                        <th>Last Used</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {model_usage_all_time_rows}
-                </tbody>
-            </table>
-
-            <h2>API Endpoint Usage (Last {days} Days)</h2>
-            <div class="chart-container">
-                <canvas id="endpointUsageChart"></canvas>
-            </div>
-            <h3>API Endpoint Usage (All Time Details)</h3>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Endpoint</th>
-                        <th>Total Requests</th>
-                        <th>First Used</th>
-                        <th>Last Used</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {api_usage_all_time_rows}
-                </tbody>
-            </table>
-
-            <h2>Recent Requests (Last 20)</h2>
-            <table>
-                <thead>
-                    <tr>
-                        <th>Timestamp</th>
-                        <th>Model</th>
-                        <th>Endpoint</th>
-                        <th>IP Address</th>
-                        <th>User Agent</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {recent_requests_rows}
-                </tbody>
-            </table>
-        </div>
-
-        <script>
-            const modelLabels = {json.dumps(model_labels)};
-            const modelCounts = {json.dumps(model_counts)};
-            
-            const endpointLabels = {json.dumps(endpoint_labels)};
-            const endpointCounts = {json.dumps(endpoint_counts)};
-
-            const dailyDates = {json.dumps(daily_dates)};
-            const dailyRequests = {json.dumps(daily_requests)};
-            const dailyUniqueIps = {json.dumps(daily_unique_ips)};
-
-            new Chart(document.getElementById('modelUsageChart'), {{
-                type: 'bar',
-                data: {{
-                    labels: modelLabels,
-                    datasets: [{{
-                        label: 'Requests',
-                        data: modelCounts,
-                        backgroundColor: 'var(--chart-bg-light)',
-                        borderColor: 'var(--chart-border-light)',
-                        borderWidth: 1,
-                        borderRadius: 5,
-                    }}]
-                }},
-                options: {{
+    
+            <!-- Footer -->
+            <footer class="border-t border-slate-700/50 mt-16">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+                        <div class="flex items-center space-x-4">
+                            <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-robot text-white text-sm"></i>
+                            </div>
+                            <div>
+                                <p class="text-slate-300 font-medium">Lokiai AI Dashboard</p>
+                                <p class="text-slate-500 text-xs">Advanced Analytics & Monitoring</p>
+                            </div>
+                        </div>
+                        <div class="text-slate-400 text-sm">
+                            Last updated: <span class="text-slate-300" id="currentTime"></span>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+    
+            <script>
+                // Update current time
+                document.getElementById('currentTime').textContent = new Date().toLocaleString();
+    
+                // Chart data
+                const modelLabels = {json.dumps(model_labels)};
+                const modelCounts = {json.dumps(model_counts)};
+                const endpointLabels = {json.dumps(endpoint_labels)};
+                const endpointCounts = {json.dumps(endpoint_counts)};
+                const dailyDates = {json.dumps(daily_dates)};
+                const dailyRequests = {json.dumps(daily_requests)};
+                const dailyUniqueIps = {json.dumps(daily_unique_ips)};
+    
+                // Chart options
+                const chartOptions = {{
                     responsive: true,
                     maintainAspectRatio: false,
                     plugins: {{
                         legend: {{
                             labels: {{
-                                color: 'var(--text-primary)'
+                                color: '#e2e8f0',
+                                padding: 20,
+                                font: {{
+                                    size: 12,
+                                    weight: 500
+                                }}
                             }}
-                        }},
-                        title: {{
-                            display: true,
-                            text: 'Model Usage',
-                            color: 'var(--text-primary)'
                         }}
                     }},
                     scales: {{
                         x: {{
                             ticks: {{
-                                color: 'var(--text-secondary)'
+                                color: '#94a3b8',
+                                font: {{
+                                    size: 11
+                                }}
                             }},
                             grid: {{
-                                color: 'var(--border-color)'
+                                color: 'rgba(148, 163, 184, 0.1)',
+                                drawBorder: false
                             }}
                         }},
                         y: {{
                             beginAtZero: true,
                             ticks: {{
-                                color: 'var(--text-secondary)'
+                                color: '#94a3b8',
+                                font: {{
+                                    size: 11
+                                }}
                             }},
                             grid: {{
-                                color: 'var(--border-color)'
+                                color: 'rgba(148, 163, 184, 0.1)',
+                                drawBorder: false
                             }}
                         }}
                     }}
-                }}
-            }});
-
-            new Chart(document.getElementById('endpointUsageChart'), {{
-                type: 'doughnut',
-                data: {{
-                    labels: endpointLabels,
-                    datasets: [{{
-                        label: 'Requests',
-                        data: endpointCounts,
-                        backgroundColor: [
-                            '#3a6ee0', '#5b8bff', '#8dc4ff', '#b3d8ff', '#d0e8ff',
-                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'
-                        ],
-                        hoverOffset: 4
-                    }}]
-                }},
-                options: {{
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {{
-                        legend: {{
-                            position: 'right',
-                            labels: {{
-                                color: 'var(--text-primary)'
-                            }}
-                        }},
-                        title: {{
-                            display: true,
-                            text: 'API Endpoint Usage',
-                            color: 'var(--text-primary)'
-                        }}
-                    }}
-                }}
-            }});
-
-            new Chart(document.getElementById('dailyRequestsChart'), {{
-                type: 'line',
-                data: {{
-                    labels: dailyDates,
-                    datasets: [
-                        {{
-                            label: 'Total Requests',
-                            data: dailyRequests,
-                            borderColor: 'var(--accent-color)',
-                            backgroundColor: 'rgba(58, 110, 224, 0.1)',
-                            fill: true,
-                            tension: 0.3
-                        }},
-                        {{
-                            label: 'Unique IPs',
-                            data: dailyUniqueIps,
-                            borderColor: '#FFCE56',
-                            backgroundColor: 'rgba(255, 206, 86, 0.1)',
-                            fill: true,
-                            tension: 0.3
-                        }}
-                    ]
-                }},
-                options: {{
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {{
-                        legend: {{
-                            labels: {{
-                                color: 'var(--text-primary)'
+                }};
+    
+                // Daily Requests Chart
+                new Chart(document.getElementById('dailyRequestsChart'), {{
+                    type: 'line',
+                    data: {{
+                        labels: dailyDates,
+                        datasets: [
+                            {{
+                                label: 'Total Requests',
+                                data: dailyRequests,
+                                borderColor: '#3b82f6',
+                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                                fill: true,
+                                tension: 0.4,
+                                borderWidth: 3,
+                                pointBackgroundColor: '#3b82f6',
+                                pointBorderColor: '#1e40af',
+                                pointBorderWidth: 2,
+                                pointRadius: 4,
+                                pointHoverRadius: 6
+                            }},
+                            {{
+                                label: 'Unique IPs',
+                                data: dailyUniqueIps,
+                                borderColor: '#f59e0b',
+                                backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                                fill: true,
+                                tension: 0.4,
+                                borderWidth: 3,
+                                pointBackgroundColor: '#f59e0b',
+                                pointBorderColor: '#d97706',
+                                pointBorderWidth: 2,
+                                pointRadius: 4,
+                                pointHoverRadius: 6
                             }}
-                        }},
-                        title: {{
-                            display: true,
-                            text: 'Daily Requests and Unique IPs',
-                            color: 'var(--text-primary)'
-                        }}
+                        ]
                     }},
-                    scales: {{
-                        x: {{
-                            ticks: {{
-                                color: 'var(--text-secondary)'
-                            }},
-                            grid: {{
-                                color: 'var(--border-color)'
+                    options: chartOptions
+                }});
+    
+                // Model Usage Chart
+                new Chart(document.getElementById('modelUsageChart'), {{
+                    type: 'doughnut',
+                    data: {{
+                        labels: modelLabels,
+                        datasets: [{{
+                            data: modelCounts,
+                            backgroundColor: [
+                                '#3b82f6', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b',
+                                '#ef4444', '#ec4899', '#84cc16', '#f97316', '#6366f1'
+                            ],
+                            borderWidth: 0,
+                            hoverOffset: 8
+                        }}]
+                    }},
+                    options: {{
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {{
+                            legend: {{
+                                position: 'bottom',
+                                labels: {{
+                                    color: '#e2e8f0',
+                                    padding: 15,
+                                    usePointStyle: true,
+                                    font: {{
+                                        size: 12
+                                    }}
+                                }}
                             }}
                         }},
-                        y: {{
-                            beginAtZero: true,
-                            ticks: {{
-                                color: 'var(--text-secondary)'
-                            }},
-                            grid: {{
-                                color: 'var(--border-color)'
+                        cutout: '60%'
+                    }}
+                }});
+    
+                // Endpoint Usage Chart
+                new Chart(document.getElementById('endpointUsageChart'), {{
+                    type: 'bar',
+                    data: {{
+                        labels: endpointLabels,
+                        datasets: [{{
+                            label: 'Requests',
+                            data: endpointCounts,
+                            backgroundColor: 'rgba(59, 130, 246, 0.8)',
+                            borderColor: '#3b82f6',
+                            borderWidth: 0,
+                            borderRadius: 8,
+                            borderSkipped: false,
+                        }}]
+                    }},
+                    options: {{
+                        ...chartOptions,
+                        plugins: {{
+                            legend: {{
+                                display: false
                             }}
                         }}
                     }}
-                }}
-            }});
-        </script>
-    </body>
-    </html>
-    """
+                }});
+    
+                // Add hover effects to table rows
+                document.querySelectorAll('tbody tr').forEach(row => {{
+                    row.addEventListener('mouseenter', function() {{
+                        this.classList.add('bg-slate-700/20');
+                    }});
+                    row.addEventListener('mouseleave', function() {{
+                        this.classList.remove('bg-slate-700/20');
+                    }});
+                }});
+            </script>
+        </body>
+        </html>"""
+
+    # Update the table row generation with better styling
+
     return html_content
 
 @app.on_event("startup")