all table

routers/blink.py

@@ -6,7 +6,7 @@ import ipaddress
 import logging
 
 from core.database import get_db
-from core.models import BlinkData
+from core.models import BlinkData, User, AuditLog, GeminiJob
 from services.encryption_service import decrypt_multiple_blocks
 from dependencies import get_geolocation
 
@@ -71,6 +71,149 @@ async def get_data(
         )
 
 
+@router.get("/api/users")
+async def get_users(
+    page: int = Query(1, ge=1, description="Page number"),
+    limit: int = Query(50, ge=1, le=500, description="Items per page"),
+    db: AsyncSession = Depends(get_db)
+):
+    """
+    Get paginated users data.
+    """
+    try:
+        offset = (page - 1) * limit
+        
+        # Get total count
+        total_result = await db.execute(select(func.count(User.id)))
+        total = total_result.scalar() or 0
+        
+        # Get paginated items
+        query = select(User).order_by(User.id.desc()).offset(offset).limit(limit)
+        result = await db.execute(query)
+        items = result.scalars().all()
+        
+        return {
+            "items": [
+                {
+                    "id": item.id,
+                    "user_id": item.user_id,
+                    "email": item.email,
+                    "name": item.name,
+                    "google_id": item.google_id[:10] + "..." if item.google_id else None,
+                    "credits": item.credits,
+                    "is_active": item.is_active,
+                    "created_at": item.created_at.isoformat() if item.created_at else None,
+                    "last_used_at": item.last_used_at.isoformat() if item.last_used_at else None
+                }
+                for item in items
+            ],
+            "total": total,
+            "page": page,
+            "limit": limit
+        }
+    except Exception as e:
+        logger.error(f"Error fetching users: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Error fetching users"
+        )
+
+
+@router.get("/api/audit-logs")
+async def get_audit_logs(
+    page: int = Query(1, ge=1, description="Page number"),
+    limit: int = Query(50, ge=1, le=500, description="Items per page"),
+    db: AsyncSession = Depends(get_db)
+):
+    """
+    Get paginated audit logs.
+    """
+    try:
+        offset = (page - 1) * limit
+        
+        # Get total count
+        total_result = await db.execute(select(func.count(AuditLog.id)))
+        total = total_result.scalar() or 0
+        
+        # Get paginated items
+        query = select(AuditLog).order_by(AuditLog.id.desc()).offset(offset).limit(limit)
+        result = await db.execute(query)
+        items = result.scalars().all()
+        
+        return {
+            "items": [
+                {
+                    "id": item.id,
+                    "user_id": item.user_id,
+                    "action": item.action,
+                    "ip_address": item.ip_address,
+                    "status": item.status,
+                    "error_message": item.error_message,
+                    "timestamp": item.timestamp.isoformat() if item.timestamp else None
+                }
+                for item in items
+            ],
+            "total": total,
+            "page": page,
+            "limit": limit
+        }
+    except Exception as e:
+        logger.error(f"Error fetching audit logs: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Error fetching audit logs"
+        )
+
+
+@router.get("/api/gemini-jobs")
+async def get_gemini_jobs(
+    page: int = Query(1, ge=1, description="Page number"),
+    limit: int = Query(50, ge=1, le=500, description="Items per page"),
+    db: AsyncSession = Depends(get_db)
+):
+    """
+    Get paginated Gemini jobs.
+    """
+    try:
+        offset = (page - 1) * limit
+        
+        # Get total count
+        total_result = await db.execute(select(func.count(GeminiJob.id)))
+        total = total_result.scalar() or 0
+        
+        # Get paginated items
+        query = select(GeminiJob).order_by(GeminiJob.id.desc()).offset(offset).limit(limit)
+        result = await db.execute(query)
+        items = result.scalars().all()
+        
+        return {
+            "items": [
+                {
+                    "id": item.id,
+                    "job_id": item.job_id,
+                    "user_id": item.user_id,
+                    "job_type": item.job_type,
+                    "status": item.status,
+                    "error_message": item.error_message,
+                    "created_at": item.created_at.isoformat() if item.created_at else None,
+                    "completed_at": item.completed_at.isoformat() if item.completed_at else None
+                }
+                for item in items
+            ],
+            "total": total,
+            "page": page,
+            "limit": limit
+        }
+    except Exception as e:
+        logger.error(f"Error fetching gemini jobs: {e}")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Error fetching gemini jobs"
+        )
+
+
+
+
 @router.get("/blink")
 async def blink(
     request: Request,

templates/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>API Gateway - Blink Data</title>
+    <title>API Gateway - Data Viewer</title>
     <style>
         * {
             margin: 0;
@@ -21,7 +21,7 @@
         }
 
         .container {
-            max-width: 1400px;
+            max-width: 1600px;
             margin: 0 auto;
         }
 
@@ -44,11 +44,43 @@
             font-size: 1rem;
         }
 
+        /* Tabs */
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .tab-btn {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #888;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+
+        .tab-btn:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff;
+        }
+
+        .tab-btn.active {
+            background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+            color: white;
+            border-color: transparent;
+        }
+
         .stats {
             display: flex;
             gap: 20px;
             justify-content: center;
             margin-bottom: 30px;
+            flex-wrap: wrap;
         }
 
         .stat-card {
@@ -80,9 +112,14 @@
             overflow: hidden;
         }
 
+        .table-wrapper {
+            overflow-x: auto;
+        }
+
         table {
             width: 100%;
             border-collapse: collapse;
+            min-width: 800px;
         }
 
         th {
@@ -92,6 +129,7 @@
             font-weight: 600;
             color: #00d4ff;
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            white-space: nowrap;
         }
 
         td {
@@ -116,15 +154,13 @@
             background: rgba(0, 0, 0, 0.3);
             padding: 8px 12px;
             border-radius: 6px;
-            max-width: 500px;
+            max-width: 400px;
             overflow-x: auto;
             white-space: pre-wrap;
             word-break: break-all;
         }
 
-        .refer-url {
-            color: #888;
-            font-size: 0.9rem;
+        .truncate {
             max-width: 200px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -134,6 +170,27 @@
         .timestamp {
             color: #666;
             font-size: 0.85rem;
+            white-space: nowrap;
+        }
+
+        .status-badge {
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .status-success { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+        .status-failed { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
+        .status-queued { background: rgba(234, 179, 8, 0.2); color: #eab308; }
+        .status-processing { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
+        .status-completed { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
+
+        .credits-badge {
+            background: linear-gradient(135deg, #00d4ff, #7b2cbf);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-weight: 600;
         }
 
         .pagination {
@@ -204,6 +261,10 @@
             margin-bottom: 20px;
             opacity: 0.3;
         }
+
+        .hidden {
+            display: none;
+        }
     </style>
 </head>
 
@@ -211,139 +272,309 @@
     <div class="container">
         <header>
             <h1>🔗 API Gateway</h1>
-            <p class="subtitle">Blink Data Viewer</p>
+            <p class="subtitle">Data Viewer</p>
         </header>
 
-        <div class="stats">
+        <div class="tabs">
+            <button class="tab-btn active" onclick="switchTab('blink')">📊 Blink Data</button>
+            <button class="tab-btn" onclick="switchTab('users')">👥 Users</button>
+            <button class="tab-btn" onclick="switchTab('audit')">📝 Audit Logs</button>
+            <button class="tab-btn" onclick="switchTab('jobs')">⚡ Gemini Jobs</button>
+        </div>
+
+        <div class="stats" id="statsContainer">
             <div class="stat-card">
                 <div class="stat-value" id="totalRecords">-</div>
                 <div class="stat-label">Total Records</div>
             </div>
-            <div class="stat-card">
+            <div class="stat-card" id="uniqueUsersCard">
                 <div class="stat-value" id="uniqueUsers">-</div>
                 <div class="stat-label">Unique Users</div>
             </div>
         </div>
 
-        <div class="table-container">
-            <table>
-                <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>User ID</th>
-                        <th>Refer URL</th>
-                        <th>IPv4</th>
-                        <th>IPv6</th>
-                        <th>Country</th>
-                        <th>Region</th>
-                        <th>JSON Data</th>
-                        <th>Created At</th>
-                    </tr>
-                </thead>
-                <tbody id="tableBody">
-                    <tr>
-                        <td colspan="8">
-                            <div class="loading">
-                                <div class="spinner"></div>
-                                Loading data...
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+        <!-- Blink Data Table -->
+        <div class="table-container" id="blinkTable">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>User ID</th>
+                            <th>Refer URL</th>
+                            <th>IPv4</th>
+                            <th>Country</th>
+                            <th>Region</th>
+                            <th>JSON Data</th>
+                            <th>Created At</th>
+                        </tr>
+                    </thead>
+                    <tbody id="blinkBody">
+                        <tr><td colspan="8"><div class="loading"><div class="spinner"></div>Loading...</div></td></tr>
+                    </tbody>
+                </table>
+            </div>
             <div class="pagination">
-                <button id="prevBtn" onclick="prevPage()" disabled>← Previous</button>
-                <span class="page-info">Page <span id="currentPage">1</span> of <span id="totalPages">1</span></span>
-                <button id="nextBtn" onclick="nextPage()">Next →</button>
+                <button onclick="prevPage('blink')" id="blinkPrev" disabled>← Previous</button>
+                <span class="page-info">Page <span id="blinkCurrentPage">1</span> of <span id="blinkTotalPages">1</span></span>
+                <button onclick="nextPage('blink')" id="blinkNext">Next →</button>
+            </div>
+        </div>
+
+        <!-- Users Table -->
+        <div class="table-container hidden" id="usersTable">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>User ID</th>
+                            <th>Email</th>
+                            <th>Name</th>
+                            <th>Credits</th>
+                            <th>Active</th>
+                            <th>Created At</th>
+                            <th>Last Used</th>
+                        </tr>
+                    </thead>
+                    <tbody id="usersBody">
+                        <tr><td colspan="8"><div class="loading"><div class="spinner"></div>Loading...</div></td></tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="pagination">
+                <button onclick="prevPage('users')" id="usersPrev" disabled>← Previous</button>
+                <span class="page-info">Page <span id="usersCurrentPage">1</span> of <span id="usersTotalPages">1</span></span>
+                <button onclick="nextPage('users')" id="usersNext">Next →</button>
+            </div>
+        </div>
+
+        <!-- Audit Logs Table -->
+        <div class="table-container hidden" id="auditTable">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>User ID</th>
+                            <th>Action</th>
+                            <th>IP Address</th>
+                            <th>Status</th>
+                            <th>Error</th>
+                            <th>Timestamp</th>
+                        </tr>
+                    </thead>
+                    <tbody id="auditBody">
+                        <tr><td colspan="7"><div class="loading"><div class="spinner"></div>Loading...</div></td></tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="pagination">
+                <button onclick="prevPage('audit')" id="auditPrev" disabled>← Previous</button>
+                <span class="page-info">Page <span id="auditCurrentPage">1</span> of <span id="auditTotalPages">1</span></span>
+                <button onclick="nextPage('audit')" id="auditNext">Next →</button>
+            </div>
+        </div>
+
+        <!-- Gemini Jobs Table -->
+        <div class="table-container hidden" id="jobsTable">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Job ID</th>
+                            <th>User ID</th>
+                            <th>Type</th>
+                            <th>Status</th>
+                            <th>Error</th>
+                            <th>Created At</th>
+                            <th>Completed At</th>
+                        </tr>
+                    </thead>
+                    <tbody id="jobsBody">
+                        <tr><td colspan="8"><div class="loading"><div class="spinner"></div>Loading...</div></td></tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="pagination">
+                <button onclick="prevPage('jobs')" id="jobsPrev" disabled>← Previous</button>
+                <span class="page-info">Page <span id="jobsCurrentPage">1</span> of <span id="jobsTotalPages">1</span></span>
+                <button onclick="nextPage('jobs')" id="jobsNext">Next →</button>
             </div>
         </div>
     </div>
 
     <script>
-        const PAGE_SIZE = 100;
-        let currentPage = 1;
-        let totalRecords = 0;
-
-        async function fetchData(page = 1) {
+        const PAGE_SIZE = 50;
+        const state = {
+            blink: { page: 1, total: 0 },
+            users: { page: 1, total: 0 },
+            audit: { page: 1, total: 0 },
+            jobs: { page: 1, total: 0 }
+        };
+        let currentTab = 'blink';
+
+        const endpoints = {
+            blink: '/api/data',
+            users: '/api/users',
+            audit: '/api/audit-logs',
+            jobs: '/api/gemini-jobs'
+        };
+
+        function switchTab(tab) {
+            currentTab = tab;
+            
+            // Update tab buttons
+            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+            event.target.classList.add('active');
+            
+            // Show/hide tables
+            document.getElementById('blinkTable').classList.toggle('hidden', tab !== 'blink');
+            document.getElementById('usersTable').classList.toggle('hidden', tab !== 'users');
+            document.getElementById('auditTable').classList.toggle('hidden', tab !== 'audit');
+            document.getElementById('jobsTable').classList.toggle('hidden', tab !== 'jobs');
+            
+            // Show/hide unique users stat (only for blink)
+            document.getElementById('uniqueUsersCard').classList.toggle('hidden', tab !== 'blink');
+            
+            // Load data if not loaded
+            loadPage(tab, state[tab].page);
+        }
+
+        async function fetchData(tab, page) {
             try {
-                const response = await fetch(`/api/data?page=${page}&limit=${PAGE_SIZE}`);
-                const data = await response.json();
-                return data;
+                const response = await fetch(`${endpoints[tab]}?page=${page}&limit=${PAGE_SIZE}`);
+                return await response.json();
             } catch (error) {
                 console.error('Error fetching data:', error);
-                return { items: [], total: 0, unique_users: 0 };
+                return { items: [], total: 0 };
             }
         }
 
-        function renderTable(items) {
-            const tbody = document.getElementById('tableBody');
-
+        function renderBlinkTable(items) {
+            const tbody = document.getElementById('blinkBody');
             if (items.length === 0) {
-                tbody.innerHTML = `
-                    <tr>
-                        <td colspan="8">
-                            <div class="empty-state">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-                                </svg>
-                                <p>No data available</p>
-                            </div>
-                        </td>
-                    </tr>
-                `;
+                tbody.innerHTML = '<tr><td colspan="8"><div class="empty-state">No data available</div></td></tr>';
                 return;
             }
-
             tbody.innerHTML = items.map(item => `
                 <tr>
                     <td>${item.id}</td>
                     <td class="user-id">${item.user_id}</td>
-                    <td class="refer-url" title="${item.refer_url || ''}">${item.refer_url || '-'}</td>
-                    <td class="ip-address">${item.ipv4_address || '-'}</td>
-                    <td class="ip-address">${item.ipv6_address || '-'}</td>
+                    <td class="truncate" title="${item.refer_url || ''}">${item.refer_url || '-'}</td>
+                    <td>${item.ipv4_address || item.ip_address || '-'}</td>
                     <td>${item.country || '-'}</td>
                     <td>${item.region || '-'}</td>
                     <td><pre class="json-data">${JSON.stringify(item.json_data, null, 2)}</pre></td>
-                    <td class="timestamp">${new Date(item.created_at).toLocaleString()}</td>
+                    <td class="timestamp">${item.created_at ? new Date(item.created_at).toLocaleString() : '-'}</td>
+                </tr>
+            `).join('');
+        }
+
+        function renderUsersTable(items) {
+            const tbody = document.getElementById('usersBody');
+            if (items.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="8"><div class="empty-state">No users found</div></td></tr>';
+                return;
+            }
+            tbody.innerHTML = items.map(item => `
+                <tr>
+                    <td>${item.id}</td>
+                    <td class="user-id">${item.user_id}</td>
+                    <td>${item.email}</td>
+                    <td>${item.name || '-'}</td>
+                    <td><span class="credits-badge">${item.credits}</span></td>
+                    <td><span class="status-badge ${item.is_active ? 'status-success' : 'status-failed'}">${item.is_active ? 'Active' : 'Inactive'}</span></td>
+                    <td class="timestamp">${item.created_at ? new Date(item.created_at).toLocaleString() : '-'}</td>
+                    <td class="timestamp">${item.last_used_at ? new Date(item.last_used_at).toLocaleString() : '-'}</td>
                 </tr>
             `).join('');
         }
 
-        function updatePagination() {
-            const totalPages = Math.ceil(totalRecords / PAGE_SIZE) || 1;
-            document.getElementById('currentPage').textContent = currentPage;
-            document.getElementById('totalPages').textContent = totalPages;
-            document.getElementById('prevBtn').disabled = currentPage <= 1;
-            document.getElementById('nextBtn').disabled = currentPage >= totalPages;
+        function renderAuditTable(items) {
+            const tbody = document.getElementById('auditBody');
+            if (items.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="7"><div class="empty-state">No audit logs found</div></td></tr>';
+                return;
+            }
+            tbody.innerHTML = items.map(item => `
+                <tr>
+                    <td>${item.id}</td>
+                    <td class="user-id">${item.user_id || '-'}</td>
+                    <td>${item.action}</td>
+                    <td>${item.ip_address}</td>
+                    <td><span class="status-badge status-${item.status}">${item.status}</span></td>
+                    <td class="truncate" title="${item.error_message || ''}">${item.error_message || '-'}</td>
+                    <td class="timestamp">${item.timestamp ? new Date(item.timestamp).toLocaleString() : '-'}</td>
+                </tr>
+            `).join('');
         }
 
-        async function loadPage(page) {
-            currentPage = page;
-            const data = await fetchData(page);
-            totalRecords = data.total;
+        function renderJobsTable(items) {
+            const tbody = document.getElementById('jobsBody');
+            if (items.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="8"><div class="empty-state">No jobs found</div></td></tr>';
+                return;
+            }
+            tbody.innerHTML = items.map(item => `
+                <tr>
+                    <td>${item.id}</td>
+                    <td class="user-id">${item.job_id}</td>
+                    <td class="user-id">${item.user_id}</td>
+                    <td>${item.job_type}</td>
+                    <td><span class="status-badge status-${item.status}">${item.status}</span></td>
+                    <td class="truncate" title="${item.error_message || ''}">${item.error_message || '-'}</td>
+                    <td class="timestamp">${item.created_at ? new Date(item.created_at).toLocaleString() : '-'}</td>
+                    <td class="timestamp">${item.completed_at ? new Date(item.completed_at).toLocaleString() : '-'}</td>
+                </tr>
+            `).join('');
+        }
+
+        const renderers = {
+            blink: renderBlinkTable,
+            users: renderUsersTable,
+            audit: renderAuditTable,
+            jobs: renderJobsTable
+        };
+
+        function updatePagination(tab) {
+            const totalPages = Math.ceil(state[tab].total / PAGE_SIZE) || 1;
+            document.getElementById(`${tab}CurrentPage`).textContent = state[tab].page;
+            document.getElementById(`${tab}TotalPages`).textContent = totalPages;
+            document.getElementById(`${tab}Prev`).disabled = state[tab].page <= 1;
+            document.getElementById(`${tab}Next`).disabled = state[tab].page >= totalPages;
+        }
+
+        async function loadPage(tab, page) {
+            state[tab].page = page;
+            const data = await fetchData(tab, page);
+            state[tab].total = data.total;
 
             document.getElementById('totalRecords').textContent = data.total.toLocaleString();
-            document.getElementById('uniqueUsers').textContent = data.unique_users.toLocaleString();
+            if (data.unique_users !== undefined) {
+                document.getElementById('uniqueUsers').textContent = data.unique_users.toLocaleString();
+            }
 
-            renderTable(data.items);
-            updatePagination();
+            renderers[tab](data.items);
+            updatePagination(tab);
         }
 
-        function prevPage() {
-            if (currentPage > 1) {
-                loadPage(currentPage - 1);
+        function prevPage(tab) {
+            if (state[tab].page > 1) {
+                loadPage(tab, state[tab].page - 1);
             }
         }
 
-        function nextPage() {
-            const totalPages = Math.ceil(totalRecords / PAGE_SIZE);
-            if (currentPage < totalPages) {
-                loadPage(currentPage + 1);
+        function nextPage(tab) {
+            const totalPages = Math.ceil(state[tab].total / PAGE_SIZE);
+            if (state[tab].page < totalPages) {
+                loadPage(tab, state[tab].page + 1);
             }
         }
 
         // Initial load
-        loadPage(1);
+        loadPage('blink', 1);
     </script>
 </body>