bigbasealpha
Version:
Enterprise-Grade NoSQL Database System with Modular Logger & Offline HSM Security - Complete database platform with professional text-based logging, encryption, caching, indexing, JWT authentication, auto-generated REST API, real-time dashboard, and maste
726 lines (707 loc) • 125 kB
HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigBaseAlpha - Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-container">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h1 class="sidebar-title">BigBaseAlpha</h1>
<button class="sidebar-toggle" id="sidebar-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav class="sidebar-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#overview" class="nav-link active" data-tab="overview">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
</svg>
</span>
<span class="nav-text">Overview</span>
</a>
</li>
<li class="nav-item">
<a href="#collections" class="nav-link" data-tab="collections">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
</svg>
</span>
<span class="nav-text">Collections</span>
</a>
</li>
<li class="nav-item">
<a href="#query-builder" class="nav-link" data-tab="query-builder">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
</svg>
</span>
<span class="nav-text">Query Builder</span>
</a>
</li>
<li class="nav-item">
<a href="#analytics" class="nav-link" data-tab="analytics">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 001.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
</span>
<span class="nav-text">Analytics</span>
</a>
</li>
<li class="nav-item">
<a href="#realtime-charts" class="nav-link" data-tab="realtime-charts">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"/>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"/>
</svg>
</span>
<span class="nav-text">Real-time Charts</span>
</a>
</li>
<li class="nav-item">
<a href="#health-monitor" class="nav-link" data-tab="health-monitor">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
</svg>
</span>
<span class="nav-text">Health Monitor</span>
</a>
</li>
<li class="nav-item">
<a href="#backup-manager" class="nav-link" data-tab="backup-manager">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4z"/>
<path d="M6 8a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zM6 11a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z"/>
</svg>
</span>
<span class="nav-text">Backup & Export</span>
</a>
</li>
<li class="nav-item">
<a href="#security" class="nav-link" data-tab="security">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
</svg>
</span>
<span class="nav-text">Security</span>
</a>
</li>
<li class="nav-item">
<a href="../../eventsourcing.html" class="nav-link external-link" title="Event Sourcing & CQRS">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
</svg>
</span>
<span class="nav-text">Event Sourcing</span>
</a>
</li>
<li class="nav-item">
<a href="../../blockchain.html" class="nav-link external-link" title="Blockchain Integration">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
</svg>
</span>
<span class="nav-text">Blockchain</span>
</a>
</li>
<li class="nav-item">
<a href="#settings" class="nav-link" data-tab="settings">
<span class="nav-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
</svg>
</span>
<span class="nav-text">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<div class="theme-selector">
<div class="theme-header">
<svg class="theme-header-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" clip-rule="evenodd"/>
</svg>
<span class="theme-header-text">Theme</span>
</div>
<div class="theme-options">
<button class="theme-option active" data-theme="dark" id="theme-dark">
<svg class="theme-option-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" clip-rule="evenodd"/>
</svg>
<span class="theme-option-text">Dark</span>
<div class="theme-option-indicator"></div>
</button>
<button class="theme-option" data-theme="light" id="theme-light">
<svg class="theme-option-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
</svg>
<span class="theme-option-text">Light</span>
<div class="theme-option-indicator"></div>
</button>
<button class="theme-option" data-theme="auto" id="theme-auto">
<svg class="theme-option-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 010 2H6.414l2.293 2.293a1 1 0 01-1.414 1.414L5 6.414V8a1 1 0 01-2 0V4zm9 1a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V6.414l-2.293 2.293a1 1 0 11-1.414-1.414L13.586 5H12zm-9 7a1 1 0 012 0v1.586l2.293-2.293a1 1 0 111.414 1.414L6.414 15H8a1 1 0 010 2H4a1 1 0 01-1-1v-4zm13-1a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 010-2h1.586l-2.293-2.293a1 1 0 111.414-1.414L15 13.586V12a1 1 0 011-1z" clip-rule="evenodd"/>
</svg>
<span class="theme-option-text">Auto</span>
<div class="theme-option-indicator"></div>
</button>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="header-left">
<h2 class="page-title" id="page-title">Dashboard Overview</h2>
<p class="page-subtitle" id="page-subtitle">Welcome to BigBaseAlpha Management Console</p>
</div>
<div class="header-right">
<div class="header-stats">
<div class="stat-item">
<span class="stat-label">Collections</span>
<span class="stat-value" id="total-collections">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Records</span>
<span class="stat-value" id="total-records">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Storage</span>
<span class="stat-value" id="storage-used">0 MB</span>
</div>
</div>
</div>
</header>
<!-- Tab Contents -->
<div class="tab-content">
<!-- Overview Tab -->
<div id="overview" class="tab-pane active">
<div class="overview-grid">
<!-- Quick Stats Cards -->
<div class="overview-card quick-stats">
<div class="card-header">
<h3>Database Statistics</h3>
<span class="card-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
</svg>
</span>
</div>
<div class="card-content">
<div class="stat-grid">
<div class="stat-box">
<div class="stat-number" id="overview-collections">12</div>
<div class="stat-description">Active Collections</div>
<div class="stat-trend positive">+2 this week</div>
</div>
<div class="stat-box">
<div class="stat-number" id="overview-records">1,234</div>
<div class="stat-description">Total Records</div>
<div class="stat-trend positive">+156 today</div>
</div>
<div class="stat-box">
<div class="stat-number" id="overview-storage">45.2 MB</div>
<div class="stat-description">Storage Used</div>
<div class="stat-trend neutral">2.3% of limit</div>
</div>
<div class="stat-box">
<div class="stat-number" id="overview-uptime">99.9%</div>
<div class="stat-description">Uptime</div>
<div class="stat-trend positive">24/7 running</div>
</div>
</div>
</div>
</div>
<!-- Performance Metrics -->
<div class="overview-card performance-card">
<div class="card-header">
<h3>Performance Metrics</h3>
<span class="card-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
</svg>
</span>
</div>
<div class="card-content">
<div class="performance-grid">
<div class="performance-item">
<div class="performance-label">Avg Response Time</div>
<div class="performance-value">
<span class="value">12ms</span>
<div class="performance-bar">
<div class="performance-fill" style="width: 85%"></div>
</div>
</div>
</div>
<div class="performance-item">
<div class="performance-label">Queries/Second</div>
<div class="performance-value">
<span class="value">847</span>
<div class="performance-bar">
<div class="performance-fill" style="width: 70%"></div>
</div>
</div>
</div>
<div class="performance-item">
<div class="performance-label">Cache Hit Rate</div>
<div class="performance-value">
<span class="value">94.2%</span>
<div class="performance-bar">
<div class="performance-fill" style="width: 94%"></div>
</div>
</div>
</div>
<div class="performance-item">
<div class="performance-label">Memory Usage</div>
<div class="performance-value">
<span class="value">68%</span>
<div class="performance-bar">
<div class="performance-fill warning" style="width: 68%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="overview-card activity-card">
<div class="card-header">
<h3>Recent Activity</h3>
<span class="card-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
</svg>
</span>
<div class="card-actions">
<button class="btn btn-outline btn-sm">View All</button>
</div>
</div>
<div class="card-content">
<div class="activity-list">
<div class="activity-item">
<div class="activity-icon success">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-title">New record added to 'users' collection</div>
<div class="activity-meta">
<span class="activity-time">2 minutes ago</span>
<span class="activity-user">by admin</span>
</div>
</div>
<div class="activity-status">
<span class="status-badge success">Success</span>
</div>
</div>
<div class="activity-item">
<div class="activity-icon info">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-title">Complex query executed on 'products' collection</div>
<div class="activity-meta">
<span class="activity-time">5 minutes ago</span>
<span class="activity-details">Returned 247 results in 23ms</span>
</div>
</div>
<div class="activity-status">
<span class="status-badge info">Query</span>
</div>
</div>
<div class="activity-item">
<div class="activity-icon warning">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4z"/>
<path d="M6 8a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zM6 11a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-title">Automatic backup created</div>
<div class="activity-meta">
<span class="activity-time">1 hour ago</span>
<span class="activity-details">Size: 127.5 MB</span>
</div>
</div>
<div class="activity-status">
<span class="status-badge warning">Backup</span>
</div>
</div>
<div class="activity-item">
<div class="activity-icon error">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-title">Failed connection attempt detected</div>
<div class="activity-meta">
<span class="activity-time">3 hours ago</span>
<span class="activity-details">IP: 192.168.1.xxx</span>
</div>
</div>
<div class="activity-status">
<span class="status-badge error">Security</span>
</div>
</div>
</div>
</div>
</div>
<!-- System Health -->
<div class="overview-card health-card">
<div class="card-header">
<h3>System Health</h3>
<span class="card-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
</svg>
</span>
<div class="health-indicator">
<span class="status-text">Healthy</span>
</div>
</div>
<div class="card-content">
<div class="health-grid">
<div class="health-item">
<div class="health-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"/>
</svg>
</div>
<div class="health-info">
<div class="health-label">CPU Usage</div>
<div class="health-value">23%</div>
<div class="health-status good">Normal</div>
</div>
</div>
<div class="health-item">
<div class="health-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 4a1 1 0 000 2v9a2 2 0 002 2h2a1 1 0 100-2H5V6a1 1 0 000-2zm0 0h6V2a1 1 0 10-2 0H3zM13 2a1 1 0 11-2 0h4a1 1 0 000 2v9a2 2 0 01-2 2h-2a1 1 0 100 2h2a4 4 0 004-4V4a1 1 0 000-2h-4z" clip-rule="evenodd"/>
</svg>
</div>
<div class="health-info">
<div class="health-label">Memory</div>
<div class="health-value">68%</div>
<div class="health-status warning">High</div>
</div>
</div>
<div class="health-item">
<div class="health-icon">💽</div>
<div class="health-info">
<div class="health-label">Disk I/O</div>
<div class="health-value">12%</div>
<div class="health-status good">Low</div>
</div>
</div>
<div class="health-item">
<div class="health-icon">🌐</div>
<div class="health-info">
<div class="health-label">Network</div>
<div class="health-value">5 Mbps</div>
<div class="health-status good">Stable</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="overview-card actions-card">
<div class="card-header">
<h3>Quick Actions</h3>
<span class="card-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
</svg>
</span>
</div>
<div class="card-content">
<div class="actions-grid">
<button class="action-btn" onclick="dashboard.switchTab('collections')">
<div class="action-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
</svg>
</div>
<div class="action-text">
<div class="action-title">Manage Collections</div>
<div class="action-desc">Create, edit, and organize</div>
</div>
</button>
<button class="action-btn" onclick="dashboard.switchTab('query-builder')">
<div class="action-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/>
</svg>
</div>
<div class="action-text">
<div class="action-title">Query Builder</div>
<div class="action-desc">Build complex queries</div>
</div>
</button>
<button class="action-btn" onclick="dashboard.switchTab('backup-manager')">
<div class="action-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4z"/>
<path d="M6 8a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zM6 11a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z"/>
</svg>
</div>
<div class="action-text">
<div class="action-title">Create Backup</div>
<div class="action-desc">Backup your database</div>
</div>
</button>
<button class="action-btn" onclick="dashboard.switchTab('analytics')">
<div class="action-icon">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
</svg>
</div>
<div class="action-text">
<div class="action-title">View Analytics</div>
<div class="action-desc">Performance insights</div>
</div>
</button>
</div>
</div>
</div>
<!-- Performance Chart - Full Width -->
<div class="overview-card chart-card wide">
<div class="card-header">
<h3>Performance Overview</h3>
<span class="card-icon">📈</span>
<div class="chart-controls">
<select class="chart-timeframe">
<option value="1h">Last Hour</option>
<option value="24h" selected>Last 24 Hours</option>
<option value="7d">Last 7 Days</option>
<option value="30d">Last 30 Days</option>
</select>
</div>
</div>
<div class="card-content">
<div class="chart-container">
<canvas id="performance-chart" width="800" height="300"></canvas>
</div>
<div class="chart-legend">
<div class="legend-item">
<span class="legend-color" style="background: #6366f1;"></span>
<span class="legend-label">Queries per minute</span>
</div>
<div class="legend-item">
<span class="legend-color" style="background: #10b981;"></span>
<span class="legend-label">Response time (ms)</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Collections Tab -->
<div id="collections" class="tab-pane">
<div class="collections-dashboard">
<div class="collections-header">
<h2>Database Collections</h2>
<div class="collections-actions">
<button class="btn btn-secondary" id="refresh-collections">
<svg viewBox="0 0 20 20" fill="currentColor" class="btn-icon">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
</svg>
Refresh
</button>
<button class="btn btn-primary" id="create-collection">+ Create Collection</button>
</div>
</div>
<div class="collections-stats">
<div class="stat-card">
<div class="stat-icon">📁</div>
<div class="stat-content">
<div class="stat-value" id="collections-total">4</div>
<div class="stat-label">Total Collections</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">📄</div>
<div class="stat-content">
<div class="stat-value" id="collections-documents">1,247</div>
<div class="stat-label">Total Documents</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">💾</div>
<div class="stat-content">
<div class="stat-value" id="collections-size">45.2 MB</div>
<div class="stat-label">Total Size</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🔄</div>
<div class="stat-content">
<div class="stat-value" id="collections-activity">2 min ago</div>
<div class="stat-label">Last Activity</div>
</div>
</div>
</div>
<div class="collections-grid">
<div class="collection-card">
<div class="collection-header">
<h4>👥 users</h4>
<div class="collection-status active">Active</div>
</div>
<div class="collection-stats">
<div class="collection-stat">
<span class="stat-label">Documents:</span>
<span class="stat-value">245</span>
</div>
<div class="collection-stat">
<span class="stat-label">Size:</span>
<span class="stat-value">12.3 MB</span>
</div>
<div class="collection-stat">
<span class="stat-label">Indexes:</span>
<span class="stat-value">3</span>
</div>
<div class="collection-stat">
<span class="stat-label">Last Modified:</span>
<span class="stat-value">2 hours ago</span>
</div>
</div>
<div class="collection-schema">
<h5>Schema Fields:</h5>
<div class="schema-fields">
<span class="schema-field">name <small>(string)</small></span>
<span class="schema-field">email <small>(string)</small></span>
<span class="schema-field">age <small>(number)</small></span>
<span class="schema-field">status <small>(string)</small></span>
</div>
</div>
<div class="collection-actions">
<button class="btn btn-outline btn-sm">📊 Browse</button>
<button class="btn btn-secondary btn-sm">⚙️ Manage</button>
<button class="btn btn-primary btn-sm">🔍 Query</button>
</div>
</div>
<div class="collection-card">
<div class="collection-header">
<h4>🛍️ products</h4>
<div class="collection-status active">Active</div>
</div>
<div class="collection-stats">
<div class="collection-stat">
<span class="stat-label">Documents:</span>
<span class="stat-value">156</span>
</div>
<div class="collection-stat">
<span class="stat-label">Size:</span>
<span class="stat-value">8.7 MB</span>
</div>
<div class="collection-stat">
<span class="stat-label">Indexes:</span>
<span class="stat-value">2</span>
</div>
<div class="collection-stat">
<span class="stat-label">Last Modified:</span>
<span class="stat-value">5 hours ago</span>
</div>
</div>
<div class="collection-schema">
<h5>Schema Fields:</h5>
<div class="schema-fields">
<span class="schema-field">name <small>(string)</small></span>
<span class="schema-field">price <small>(number)</small></span>
<span class="schema-field">category <small>(string)</small></span>
<span class="schema-field">inStock <small>(boolean)</small></span>
</div>
</div>
<div class="collection-actions">
<button class="btn btn-outline btn-sm">📊 Browse</button>
<button class="btn btn-secondary btn-sm">⚙️ Manage</button>
<button class="btn btn-primary btn-sm">🔍 Query</button>
</div>
</div>
<div class="collection-card">
<div class="collection-header">
<h4>📦 orders</h4>
<div class="collection-status active">Active</div>
</div>
<div class="collection-stats">
<div class="collection-stat">
<span class="stat-label">Documents:</span>
<span class="stat-value">789</span>
</div>
<div class="collection-stat">
<span class="stat-label">Size:</span>
<span class="stat-value">23.1 MB</span>
</div>
<div class="collection-stat">
<span class="stat-label">Indexes:</span>
<span class="stat-value">4</span>
</div>
<div class="collection-stat">
<span class="stat-label">Last Modified:</span>
<span class="stat-value">30 min ago</span>
</div>
</div>
<div class="collection-schema">
<h5>Schema Fields:</h5>
<div class="schema-fields">
<span class="schema-field">orderId <small>(string)</small></span>
<span class="schema-field">userId <small>(string)</small></span>
<span class="schema-field">total <small>(number)</small></span>
<span class="schema-field">status <small>(string)</small></span>
</div>
</div>
<div class="collection-actions">
<button class="btn btn-outline btn-sm">📊 Browse</button>
<button class="btn btn-secondary btn-sm">⚙️ Manage</button>
<button class="btn btn-primary btn-sm">🔍 Query</button>
</div>
</div>
<div class="collection-card">
<div class="collection-header">
<h4>📋 logs</h4>
<div class="collection-status warning">High Volume</div>
</div>
<div class="collection-stats">
<div class="collection-stat">
<span class="stat-label">Documents:</span>
<span class="stat-value">57,234</span>
</div>
<div class="collection-stat">
<span class="stat-label">Size:</span>
<span class="stat-value">1.1 GB</span>
</div>
<div class="collection-stat">
<span class="stat-label">Indexes:</span>
<span class="stat-value">5</span>
</div>
<div class="collection-stat">
<span class="stat-label">Last Modified:</span>
<span class="stat-value">1 min ago</span>
</div>
</div>