Delete templates/admin.html

templates/admin.html

@@ -1,297 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Admin - English Helper{% endblock %}
-{% block content %}
-<style>
-    .spinner {
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #3498db;
-        border-radius: 50%;
-        width: 20px;
-        height: 20px;
-        animation: spin 1s linear infinite;
-        display: inline-block;
-        margin-right: 10px;
-    }
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-    .table-container {
-        max-height: 600px;
-        overflow-y: auto;
-    }
-</style>
-
-<div id="adminInterface">
-    <!-- Header -->
-    <header class="bg-white shadow-md">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center py-4">
-                <div class="flex items-center">
-                    <h1 class="text-2xl font-bold text-gray-900">🎓 English Helper Admin</h1>
-                </div>
-            </div>
-        </div>
-    </header>
-
-    <!-- Floating Save Data Button -->
-    <div class="fixed top-4 right-4 z-50">
-        <button id="saveDataBtn" class="px-4 py-2 bg-blue-600 text-white rounded shadow">Salvar dados</button>
-    </div>
-
-    <!-- Navigation Tabs -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
-        <div class="border-b border-gray-200">
-            <nav class="-mb-px flex space-x-8">
-                <button onclick="showTab('dashboard')" class="admin-tab active" data-tab="dashboard">
-                    📊 Dashboard
-                </button>
-                <button onclick="showTab('users')" class="admin-tab" data-tab="users">
-                    👥 Users
-                </button>
-                <button onclick="showTab('database')" class="admin-tab" data-tab="database">
-                    🗄️ Database
-                </button>
-                <button onclick="showTab('tokens')" class="admin-tab" data-tab="tokens">
-                    💳 Token Usage
-                </button>
-                <button onclick="showTab('system')" class="admin-tab" data-tab="system">
-                    🩺 System Health
-                </button>
-            </nav>
-        </div>
-    </div>
-
-    <!-- Tab Content -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <!-- Dashboard Tab -->
-        <div id="dashboardTab" class="tab-content">
-            <!-- ...existing dashboard content... -->
-        </div>
-
-        <!-- Users Tab -->
-        <div id="usersTab" class="tab-content hidden">
-            <!-- ...existing users content... -->
-        </div>
-
-        <!-- Database Tab -->
-        <div id="databaseTab" class="tab-content hidden">
-            <!-- ...existing database content... -->
-        </div>
-
-        <!-- Token Usage Tab -->
-        <div id="tokensTab" class="tab-content hidden">
-            <!-- ...existing token usage content... -->
-        </div>
-
-        <!-- System Health Tab -->
-        <div id="systemTab" class="tab-content hidden">
-            <!-- ...existing system health content... -->
-        </div>
-    </div>
-</div>
-
-<!-- User Detail Modal -->
-<div id="userDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-    <div class="bg-white rounded-lg p-6 max-w-4xl w-full mx-4 max-h-screen overflow-y-auto">
-        <div class="flex justify-between items-center mb-4">
-            <!-- ...existing modal header... -->
-        </div>
-        <div id="userDetailContent">
-            <!-- ...existing modal content... -->
-        </div>
-    </div>
-</div>
-
-<!-- Toast Notifications -->
-<div id="toastContainer" class="fixed top-4 right-4 z-50"></div>
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script>
-// Minimal, consolidated admin UI JS that talks to existing backend endpoints
-let currentPage = 1;
-let usersData = [];
-
-document.addEventListener('DOMContentLoaded', () => {
-    showTab('dashboard');
-    loadDashboard();
-    loadUsers();
-    loadDatabaseSchema();
-    loadTokenUsage();
-    loadSystemHealth();
-});
-
-function showTab(tabName) {
-    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
-    const active = document.getElementById(tabName + 'Tab');
-    if (active) active.classList.remove('hidden');
-
-    document.querySelectorAll('.admin-tab').forEach(btn => btn.classList.remove('active'));
-    const btn = document.querySelector(`.admin-tab[data-tab="${tabName}"]`);
-    if (btn) btn.classList.add('active');
-}
-
-async function loadDashboard() {
-    try {
-        const res = await fetch('/admin/stats');
-        const data = await res.json();
-
-        const container = document.getElementById('dashboardTab');
-        if (!container) return;
-
-        container.innerHTML = `
-            <h2 class="text-xl font-semibold mb-4">System Dashboard</h2>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Total Users</div> <div class="text-2xl font-bold">${data.total_users ?? '-'}</div></div>
-                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Study Sessions</div> <div class="text-2xl font-bold">-</div></div>
-                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">API Tokens</div> <div class="text-2xl font-bold">-</div></div>
-                <div class="p-4 bg-white rounded shadow"> <div class="text-sm text-gray-500">Content Items</div> <div class="text-2xl font-bold">-</div></div>
-            </div>
-            <div class="mt-6">
-                <canvas id="userGrowthChart" height="120"></canvas>
-            </div>
-        `;
-
-        // simple user growth sample chart
-        const ctx = document.getElementById('userGrowthChart')?.getContext('2d');
-        if (ctx) {
-            new Chart(ctx, { type: 'line', data: { labels: ['-','-','-'], datasets:[{label:'Users', data:[0,0, data.total_users || 0], borderColor:'rgb(59,130,246)', fill:false}]}, options:{responsive:true}});
-        }
-    } catch (e) {
-        console.error('Dashboard load error', e);
-    }
-}
-
-async function loadUsers() {
-    try {
-        const res = await fetch('/users');
-        const data = await res.json();
-        const users = data.users || [];
-        usersData = users;
-
-        const container = document.getElementById('usersTab');
-        if (!container) return;
-
-        if (users.length === 0) {
-            container.innerHTML = '<div class="text-center py-8">No users found</div>';
-            return;
-        }
-
-        container.innerHTML = `
-            <div class="overflow-x-auto bg-white rounded shadow">
-                <table class="w-full text-left">
-                    <thead class="bg-gray-50"><tr><th class="p-3">User ID</th><th class="p-3">Stats</th><th class="p-3">Actions</th></tr></thead>
-                    <tbody id="usersTableBody">${users.map(u=>`<tr class="border-b"><td class="p-3">${u}</td><td class="p-3">-</td><td class="p-3"><button onclick="viewUser('${u}')" class="text-blue-600">View</button></td></tr>`).join('')}</tbody>
-                </table>
-            </div>
-        `;
-    } catch (e) {
-        console.error('loadUsers error', e);
-        showToast('Failed to load users', 'error');
-    }
-}
-
-async function viewUser(userId) {
-    try {
-        const res = await fetch(`/user/${encodeURIComponent(userId)}/analytics`);
-        const data = await res.json();
-        const modal = document.getElementById('userDetailModal');
-        const content = document.getElementById('userDetailContent');
-        content.innerHTML = `
-            <h3 class="text-lg font-semibold mb-2">User: ${userId}</h3>
-            <div class="text-sm">Total flashcards: ${data.total_flashcards ?? 0}</div>
-            <div class="text-sm">Total conversations: ${data.total_conversations ?? 0}</div>
-            <div class="text-sm">Total sessions: ${data.total_sessions ?? 0}</div>
-            <div class="mt-4">
-                <h4 class="font-medium">Recent activity</h4>
-                <div class="max-h-48 overflow-y-auto text-sm">${(data.recent_activity||[]).map(a=>`<div class="py-1 border-b">${a.timestamp || ''} - ${a.get || a.action || JSON.stringify(a)}</div>`).join('')}</div>
-            </div>
-        `;
-        modal.classList.remove('hidden');
-    } catch (e) {
-        console.error('viewUser error', e);
-        showToast('Failed to load user details', 'error');
-    }
-}
-
-async function loadDatabaseSchema() {
-    try {
-        // no DB backend available in HF simplified; show placeholder
-        const container = document.getElementById('databaseTab');
-        if (!container) return;
-        container.innerHTML = '<div class="p-4 bg-white rounded shadow">No database schema available in file-based HF mode.</div>';
-    } catch (e) {
-        console.error(e);
-    }
-}
-
-async function loadTokenUsage() {
-    try {
-        const container = document.getElementById('tokensTab');
-        if (!container) return;
-        container.innerHTML = `
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <canvas id="providerUsageChart"></canvas>
-                <canvas id="costBreakdownChart"></canvas>
-            </div>
-        `;
-        // create sample charts
-        const pctx = document.getElementById('providerUsageChart')?.getContext('2d');
-        if (pctx) new Chart(pctx, {type:'bar', data:{labels:['Groq','Gemini'], datasets:[{label:'Input Tokens', data:[150000,85000], backgroundColor:['#3b82f6','#9333ea']}]}, options:{responsive:true}});
-        const cctx = document.getElementById('costBreakdownChart')?.getContext('2d');
-        if (cctx) new Chart(cctx, {type:'pie', data:{labels:['Conversation','Analysis','Planning'], datasets:[{data:[40,30,30], backgroundColor:['#22c55e','#3b82f6','#f97316']}]}, options:{responsive:true}});
-    } catch (e) { console.error(e); }
-}
-
-async function loadSystemHealth() {
-    try {
-        const res = await fetch('/system/status');
-        const data = await res.json();
-        const container = document.getElementById('systemTab');
-        if (!container) return;
-        container.innerHTML = `<div class="p-4 bg-white rounded shadow"><pre class="text-sm">${JSON.stringify(data, null, 2)}</pre></div>`;
-    } catch (e) {
-        console.error('system health error', e);
-    }
-}
-
-function showToast(message, type='info'){
-    const toast = document.createElement('div');
-    toast.className = `fixed top-4 right-4 p-3 rounded shadow z-50 ${type==='success'?'bg-green-600':type==='error'?'bg-red-600':'bg-blue-600'} text-white`;
-    toast.textContent = message; document.body.appendChild(toast);
-    setTimeout(()=>toast.remove(),4000);
-}
-
-// Save data button
-document.addEventListener('click', (e) => {
-    if (e.target && e.target.id === 'saveDataBtn') {
-        e.target.disabled = true;
-        e.target.textContent = 'Preparando...';
-        fetch('/admin/export/all')
-            .then(res => {
-                if (!res.ok) throw new Error('Export failed');
-                return res.blob();
-            })
-            .then(blob => {
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'hf_data_export.zip';
-                document.body.appendChild(a);
-                a.click();
-                a.remove();
-                window.URL.revokeObjectURL(url);
-                showToast('Download iniciado', 'success');
-            })
-            .catch(err => {
-                console.error('Export all error', err);
-                showToast('Falha ao exportar dados', 'error');
-            })
-            .finally(() => {
-                e.target.disabled = false;
-                e.target.textContent = 'Salvar dados';
-            });
-    }
-});
-</script>
-{% endblock %}