Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Panel — AI Chat</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| <link rel="stylesheet" href="/static/css/admin.css?v=11"> | |
| </head> | |
| <body> | |
| <header class="admin-header"> | |
| <div class="admin-brand"> | |
| <div class="admin-brand-icon"><i class="fas fa-shield-alt"></i></div> | |
| <div> | |
| <div>Admin Panel</div> | |
| <div class="admin-brand-sub">AI Chat V10</div> | |
| </div> | |
| </div> | |
| <div class="admin-header-actions"> | |
| <a href="/" class="admin-back-btn"><i class="fas fa-arrow-left"></i> Retour au chat</a> | |
| <button class="admin-back-btn" onclick="location.reload()"><i class="fas fa-sync"></i> Actualiser</button> | |
| </div> | |
| </header> | |
| <div id="unauthorized" class="unauthorized" style="display:none;"> | |
| <i class="fas fa-lock"></i> | |
| <h1>Accès refusé</h1> | |
| <p>Vous devez être connecté en tant qu'administrateur.</p> | |
| <a href="/" class="admin-back-btn"><i class="fas fa-home"></i> Retour à l'accueil</a> | |
| </div> | |
| <div id="adminContent" class="admin-container" style="display:none;"> | |
| <div class="tabs"> | |
| <button class="tab active" onclick="Admin.switchTab(event, 'tab-stats')"><i class="fas fa-chart-line"></i> Statistiques</button> | |
| <button class="tab" onclick="Admin.switchTab(event, 'tab-users')"><i class="fas fa-users"></i> Utilisateurs</button> | |
| <button class="tab" onclick="Admin.switchTab(event, 'tab-usage')"><i class="fas fa-bolt"></i> Usage</button> | |
| <button class="tab" onclick="Admin.switchTab(event, 'tab-audit')"><i class="fas fa-clipboard-list"></i> Audit logs</button> | |
| </div> | |
| <!-- Stats tab --> | |
| <div class="tab-content active" id="tab-stats"> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-users"></i></div> | |
| <div class="stat-label">Utilisateurs totaux</div> | |
| <div class="stat-value" id="statTotalUsers">—</div> | |
| </div> | |
| <div class="stat-card success"> | |
| <div class="stat-icon"><i class="fas fa-user-plus"></i></div> | |
| <div class="stat-label">Nouveaux (7 jours)</div> | |
| <div class="stat-value" id="statNew7">—</div> | |
| </div> | |
| <div class="stat-card success"> | |
| <div class="stat-icon"><i class="fas fa-user-clock"></i></div> | |
| <div class="stat-label">Nouveaux (20 jours)</div> | |
| <div class="stat-value" id="statNew20">—</div> | |
| </div> | |
| <div class="stat-card success"> | |
| <div class="stat-icon"><i class="fas fa-user-check"></i></div> | |
| <div class="stat-label">Nouveaux (30 jours)</div> | |
| <div class="stat-value" id="statNew30">—</div> | |
| <div class="stat-trend up" id="statGrowth"></div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-bolt"></i></div> | |
| <div class="stat-label">Actifs (24h)</div> | |
| <div class="stat-value" id="statActive24">—</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-fire"></i></div> | |
| <div class="stat-label">Actifs (7j)</div> | |
| <div class="stat-value" id="statActive7">—</div> | |
| </div> | |
| <div class="stat-card warning"> | |
| <div class="stat-icon"><i class="fas fa-ban"></i></div> | |
| <div class="stat-label">Bannis</div> | |
| <div class="stat-value" id="statBanned">—</div> | |
| </div> | |
| <div class="stat-card danger"> | |
| <div class="stat-icon"><i class="fas fa-cogs"></i></div> | |
| <div class="stat-label">Jobs en cours</div> | |
| <div class="stat-value" id="statJobs">—</div> | |
| </div> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-coins"></i></div> | |
| <div class="stat-label">Tokens totaux (30j)</div> | |
| <div class="stat-value" id="statTokens30">—</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-database"></i></div> | |
| <div class="stat-label">Tokens totaux (historique)</div> | |
| <div class="stat-value" id="statTokensTotal">—</div> | |
| </div> | |
| </div> | |
| <div class="chart-row"> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-chart-line"></i> Inscriptions par jour (30 jours)</div> | |
| <div class="chart-container"><canvas id="chartDaily"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-clock"></i> Activité par heure</div> | |
| <div class="chart-container"><canvas id="chartHourly"></canvas></div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-trophy"></i> Top modèles (30 jours)</div> | |
| <div class="chart-container" style="height: 320px;"><canvas id="chartTopModels"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Users tab --> | |
| <div class="tab-content" id="tab-users"> | |
| <div class="table-card"> | |
| <div class="table-header"><i class="fas fa-users"></i> Utilisateurs</div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Username</th> | |
| <th>Rôle</th> | |
| <th>Créé le</th> | |
| <th>Dernière connexion</th> | |
| <th>Appels API</th> | |
| <th>Connexions</th> | |
| <th>Statut</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="usersTbody"> | |
| <tr><td colspan="8" class="loading"><span class="spinner"></span> Chargement...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Usage tab --> | |
| <div class="tab-content" id="tab-usage"> | |
| <div class="chart-row"> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-chart-pie"></i> Par provider (30j)</div> | |
| <div class="chart-container"><canvas id="chartByProvider"></canvas></div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-crown"></i> Top utilisateurs (30j)</div> | |
| <div class="chart-container"><canvas id="chartTopUsers"></canvas></div> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-title"><i class="fas fa-chart-area"></i> Appels API par jour (30j)</div> | |
| <div class="chart-container"><canvas id="chartDailyUsage"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Audit tab --> | |
| <div class="tab-content" id="tab-audit"> | |
| <div class="table-card"> | |
| <div class="table-header"><i class="fas fa-clipboard-list"></i> Journal d'audit (200 derniers)</div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Utilisateur</th> | |
| <th>Action</th> | |
| <th>IP</th> | |
| <th>User-Agent</th> | |
| <th>Détails</th> | |
| </tr> | |
| </thead> | |
| <tbody id="auditTbody"> | |
| <tr><td colspan="6" class="loading"><span class="spinner"></span> Chargement...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <script src="/static/js/admin.js?v=11"></script> | |
| </body> | |
| </html> | |