| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Advanced Admin Dashboard - Crypto Monitor</title>
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
| <style>
|
| * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
| :root {
|
| --primary: #6366f1;
|
| --primary-dark: #4f46e5;
|
| --primary-glow: rgba(99, 102, 241, 0.4);
|
| --success: #10b981;
|
| --warning: #f59e0b;
|
| --danger: #ef4444;
|
| --info: #3b82f6;
|
| --bg-dark: #0f172a;
|
| --bg-card: rgba(30, 41, 59, 0.7);
|
| --bg-glass: rgba(30, 41, 59, 0.5);
|
| --bg-hover: rgba(51, 65, 85, 0.8);
|
| --text-light: #f1f5f9;
|
| --text-muted: #94a3b8;
|
| --border: rgba(51, 65, 85, 0.6);
|
| }
|
|
|
| body {
|
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
| background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%, #000000 100%);
|
| color: var(--text-light);
|
| line-height: 1.6;
|
| min-height: 100vh;
|
| position: relative;
|
| overflow-x: hidden;
|
| }
|
|
|
|
|
| body::before {
|
| content: '';
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background:
|
| radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
|
| radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
|
| radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
| animation: float 20s ease-in-out infinite;
|
| pointer-events: none;
|
| z-index: 0;
|
| }
|
|
|
| @keyframes float {
|
| 0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
| 33% { transform: translate(30px, -30px) rotate(120deg); }
|
| 66% { transform: translate(-20px, 20px) rotate(240deg); }
|
| }
|
|
|
| .container {
|
| max-width: 1800px;
|
| margin: 0 auto;
|
| padding: 20px;
|
| position: relative;
|
| z-index: 1;
|
| }
|
|
|
|
|
| header {
|
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
|
| backdrop-filter: blur(20px);
|
| -webkit-backdrop-filter: blur(20px);
|
| padding: 30px;
|
| border-radius: 20px;
|
| margin-bottom: 30px;
|
| border: 1px solid rgba(255, 255, 255, 0.2);
|
| box-shadow:
|
| 0 8px 32px rgba(0, 0, 0, 0.3),
|
| 0 0 60px var(--primary-glow),
|
| inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
| position: relative;
|
| overflow: hidden;
|
| animation: headerGlow 3s ease-in-out infinite alternate;
|
| }
|
|
|
| @keyframes headerGlow {
|
| 0% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 40px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
|
| 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 80px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
|
| }
|
|
|
| header::before {
|
| content: '';
|
| position: absolute;
|
| top: -50%;
|
| left: -50%;
|
| width: 200%;
|
| height: 200%;
|
| background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
| transform: rotate(45deg);
|
| animation: headerShine 3s linear infinite;
|
| }
|
|
|
| @keyframes headerShine {
|
| 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
| 100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
| }
|
|
|
| header h1 {
|
| font-size: 36px;
|
| font-weight: 700;
|
| margin-bottom: 8px;
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| position: relative;
|
| z-index: 1;
|
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
| }
|
|
|
| header .icon {
|
| font-size: 42px;
|
| filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
|
| animation: iconPulse 2s ease-in-out infinite;
|
| }
|
|
|
| @keyframes iconPulse {
|
| 0%, 100% { transform: scale(1); }
|
| 50% { transform: scale(1.1); }
|
| }
|
|
|
| header .subtitle {
|
| color: rgba(255, 255, 255, 0.95);
|
| font-size: 16px;
|
| position: relative;
|
| z-index: 1;
|
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
| }
|
|
|
|
|
| .tabs {
|
| display: flex;
|
| gap: 10px;
|
| margin-bottom: 30px;
|
| flex-wrap: wrap;
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(10px);
|
| -webkit-backdrop-filter: blur(10px);
|
| padding: 15px;
|
| border-radius: 16px;
|
| border: 1px solid var(--border);
|
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
|
| }
|
|
|
| .tab-btn {
|
| padding: 12px 24px;
|
| background: rgba(255, 255, 255, 0.05);
|
| backdrop-filter: blur(10px);
|
| border: 1px solid rgba(255, 255, 255, 0.1);
|
| border-radius: 10px;
|
| cursor: pointer;
|
| font-weight: 600;
|
| color: var(--text-light);
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .tab-btn::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: -100%;
|
| width: 100%;
|
| height: 100%;
|
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
| transition: left 0.5s;
|
| }
|
|
|
| .tab-btn:hover::before {
|
| left: 100%;
|
| }
|
|
|
| .tab-btn:hover {
|
| background: rgba(99, 102, 241, 0.2);
|
| border-color: var(--primary);
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px var(--primary-glow);
|
| }
|
|
|
| .tab-btn.active {
|
| background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
| border-color: var(--primary);
|
| box-shadow: 0 4px 20px var(--primary-glow);
|
| transform: scale(1.05);
|
| }
|
|
|
| .tab-content {
|
| display: none;
|
| animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
| }
|
|
|
| .tab-content.active {
|
| display: block;
|
| }
|
|
|
| @keyframes fadeInUp {
|
| from {
|
| opacity: 0;
|
| transform: translateY(20px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
|
|
| .card {
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(10px);
|
| -webkit-backdrop-filter: blur(10px);
|
| border-radius: 16px;
|
| padding: 24px;
|
| margin-bottom: 20px;
|
| border: 1px solid var(--border);
|
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| }
|
|
|
| .card:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
| border-color: rgba(99, 102, 241, 0.3);
|
| }
|
|
|
| .card h3 {
|
| color: var(--primary);
|
| margin-bottom: 20px;
|
| font-size: 20px;
|
| display: flex;
|
| align-items: center;
|
| gap: 10px;
|
| text-shadow: 0 0 20px var(--primary-glow);
|
| }
|
|
|
|
|
| .stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| gap: 20px;
|
| margin-bottom: 30px;
|
| }
|
|
|
| .stat-card {
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(10px);
|
| -webkit-backdrop-filter: blur(10px);
|
| padding: 24px;
|
| border-radius: 16px;
|
| border: 1px solid var(--border);
|
| position: relative;
|
| overflow: hidden;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| animation: statCardIn 0.5s ease-out backwards;
|
| }
|
|
|
| @keyframes statCardIn {
|
| from {
|
| opacity: 0;
|
| transform: scale(0.9) translateY(20px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: scale(1) translateY(0);
|
| }
|
| }
|
|
|
| .stat-card:nth-child(1) { animation-delay: 0.1s; }
|
| .stat-card:nth-child(2) { animation-delay: 0.2s; }
|
| .stat-card:nth-child(3) { animation-delay: 0.3s; }
|
| .stat-card:nth-child(4) { animation-delay: 0.4s; }
|
|
|
| .stat-card::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: 3px;
|
| background: linear-gradient(90deg, var(--primary), var(--info), var(--success));
|
| background-size: 200% 100%;
|
| animation: gradientMove 3s ease infinite;
|
| }
|
|
|
| @keyframes gradientMove {
|
| 0%, 100% { background-position: 0% 50%; }
|
| 50% { background-position: 100% 50%; }
|
| }
|
|
|
| .stat-card:hover {
|
| transform: translateY(-8px) scale(1.02);
|
| box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3);
|
| border-color: var(--primary);
|
| }
|
|
|
| .stat-card .label {
|
| color: var(--text-muted);
|
| font-size: 13px;
|
| text-transform: uppercase;
|
| letter-spacing: 0.5px;
|
| font-weight: 600;
|
| margin-bottom: 8px;
|
| }
|
|
|
| .stat-card .value {
|
| font-size: 42px;
|
| font-weight: 700;
|
| margin: 8px 0;
|
| color: var(--primary);
|
| text-shadow: 0 0 30px var(--primary-glow);
|
| animation: valueCount 1s ease-out;
|
| }
|
|
|
| @keyframes valueCount {
|
| from { opacity: 0; transform: translateY(-10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .stat-card .change {
|
| font-size: 14px;
|
| font-weight: 600;
|
| display: flex;
|
| align-items: center;
|
| gap: 5px;
|
| }
|
|
|
| .stat-card .change.positive {
|
| color: var(--success);
|
| animation: bounce 1s ease-in-out infinite;
|
| }
|
|
|
| @keyframes bounce {
|
| 0%, 100% { transform: translateY(0); }
|
| 50% { transform: translateY(-3px); }
|
| }
|
|
|
| .stat-card .change.negative {
|
| color: var(--danger);
|
| }
|
|
|
|
|
| .chart-container {
|
| background: rgba(15, 23, 42, 0.5);
|
| backdrop-filter: blur(10px);
|
| padding: 20px;
|
| border-radius: 12px;
|
| margin-bottom: 20px;
|
| height: 400px;
|
| border: 1px solid rgba(255, 255, 255, 0.05);
|
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
|
| }
|
|
|
|
|
| .btn {
|
| padding: 12px 24px;
|
| border: none;
|
| border-radius: 10px;
|
| cursor: pointer;
|
| font-weight: 600;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| margin-right: 10px;
|
| margin-bottom: 10px;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 8px;
|
| position: relative;
|
| overflow: hidden;
|
| backdrop-filter: blur(10px);
|
| }
|
|
|
| .btn::before {
|
| content: '';
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| width: 0;
|
| height: 0;
|
| border-radius: 50%;
|
| background: rgba(255, 255, 255, 0.2);
|
| transform: translate(-50%, -50%);
|
| transition: width 0.6s, height 0.6s;
|
| }
|
|
|
| .btn:hover::before {
|
| width: 300px;
|
| height: 300px;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
| color: white;
|
| box-shadow: 0 4px 15px var(--primary-glow);
|
| }
|
|
|
| .btn-primary:hover {
|
| transform: translateY(-3px);
|
| box-shadow: 0 8px 25px var(--primary-glow);
|
| }
|
|
|
| .btn-success {
|
| background: linear-gradient(135deg, var(--success), #059669);
|
| color: white;
|
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
| }
|
|
|
| .btn-success:hover {
|
| transform: translateY(-3px);
|
| box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
|
| }
|
|
|
| .btn-warning {
|
| background: linear-gradient(135deg, var(--warning), #d97706);
|
| color: white;
|
| box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
|
| }
|
|
|
| .btn-danger {
|
| background: linear-gradient(135deg, var(--danger), #dc2626);
|
| color: white;
|
| box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
|
| }
|
|
|
| .btn-secondary {
|
| background: rgba(51, 65, 85, 0.6);
|
| color: var(--text-light);
|
| border: 1px solid var(--border);
|
| backdrop-filter: blur(10px);
|
| }
|
|
|
| .btn:disabled {
|
| opacity: 0.5;
|
| cursor: not-allowed;
|
| transform: none !important;
|
| }
|
|
|
| .btn:active {
|
| transform: scale(0.95);
|
| }
|
|
|
|
|
| .progress-bar {
|
| background: rgba(15, 23, 42, 0.8);
|
| backdrop-filter: blur(10px);
|
| height: 12px;
|
| border-radius: 20px;
|
| overflow: hidden;
|
| margin-top: 10px;
|
| border: 1px solid rgba(99, 102, 241, 0.3);
|
| box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
|
| position: relative;
|
| }
|
|
|
| .progress-bar::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: -100%;
|
| width: 100%;
|
| height: 100%;
|
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
| animation: progressShine 2s linear infinite;
|
| }
|
|
|
| @keyframes progressShine {
|
| 0% { left: -100%; }
|
| 100% { left: 200%; }
|
| }
|
|
|
| .progress-bar-fill {
|
| height: 100%;
|
| background: linear-gradient(90deg, var(--primary), var(--info), var(--success));
|
| background-size: 200% 100%;
|
| animation: progressGradient 2s ease infinite;
|
| transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
| box-shadow: 0 0 20px var(--primary-glow);
|
| position: relative;
|
| }
|
|
|
| @keyframes progressGradient {
|
| 0%, 100% { background-position: 0% 50%; }
|
| 50% { background-position: 100% 50%; }
|
| }
|
|
|
|
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin-top: 15px;
|
| }
|
|
|
| table thead {
|
| background: rgba(15, 23, 42, 0.6);
|
| backdrop-filter: blur(10px);
|
| }
|
|
|
| table th {
|
| padding: 16px;
|
| text-align: left;
|
| font-weight: 600;
|
| font-size: 12px;
|
| text-transform: uppercase;
|
| color: var(--text-muted);
|
| border-bottom: 2px solid var(--border);
|
| }
|
|
|
| table td {
|
| padding: 16px;
|
| border-top: 1px solid var(--border);
|
| transition: all 0.2s;
|
| }
|
|
|
| table tbody tr {
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| }
|
|
|
| table tbody tr:hover {
|
| background: var(--bg-hover);
|
| backdrop-filter: blur(10px);
|
| transform: scale(1.01);
|
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
|
| }
|
|
|
|
|
| .resource-item {
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(10px);
|
| padding: 16px;
|
| border-radius: 12px;
|
| margin-bottom: 12px;
|
| border-left: 4px solid var(--primary);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
| animation: slideIn 0.5s ease-out backwards;
|
| }
|
|
|
| @keyframes slideIn {
|
| from {
|
| opacity: 0;
|
| transform: translateX(-20px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateX(0);
|
| }
|
| }
|
|
|
| .resource-item:hover {
|
| transform: translateX(5px) scale(1.02);
|
| box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
|
| }
|
|
|
| .resource-item.duplicate {
|
| border-left-color: var(--warning);
|
| background: rgba(245, 158, 11, 0.1);
|
| }
|
|
|
| .resource-item.error {
|
| border-left-color: var(--danger);
|
| background: rgba(239, 68, 68, 0.1);
|
| }
|
|
|
| .resource-item.valid {
|
| border-left-color: var(--success);
|
| }
|
|
|
|
|
| .badge {
|
| display: inline-block;
|
| padding: 6px 12px;
|
| border-radius: 20px;
|
| font-size: 11px;
|
| font-weight: 600;
|
| text-transform: uppercase;
|
| backdrop-filter: blur(10px);
|
| animation: badgePulse 2s ease-in-out infinite;
|
| }
|
|
|
| @keyframes badgePulse {
|
| 0%, 100% { transform: scale(1); }
|
| 50% { transform: scale(1.05); }
|
| }
|
|
|
| .badge-success {
|
| background: rgba(16, 185, 129, 0.3);
|
| color: var(--success);
|
| box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
|
| }
|
|
|
| .badge-warning {
|
| background: rgba(245, 158, 11, 0.3);
|
| color: var(--warning);
|
| box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
|
| }
|
|
|
| .badge-danger {
|
| background: rgba(239, 68, 68, 0.3);
|
| color: var(--danger);
|
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
| }
|
|
|
| .badge-info {
|
| background: rgba(59, 130, 246, 0.3);
|
| color: var(--info);
|
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
|
| }
|
|
|
|
|
| .search-bar {
|
| display: flex;
|
| gap: 15px;
|
| margin-bottom: 20px;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .search-bar input,
|
| .search-bar select {
|
| padding: 12px;
|
| border-radius: 10px;
|
| border: 1px solid var(--border);
|
| background: rgba(15, 23, 42, 0.6);
|
| backdrop-filter: blur(10px);
|
| color: var(--text-light);
|
| flex: 1;
|
| min-width: 200px;
|
| transition: all 0.3s;
|
| }
|
|
|
| .search-bar input:focus,
|
| .search-bar select:focus {
|
| outline: none;
|
| border-color: var(--primary);
|
| box-shadow: 0 0 20px var(--primary-glow);
|
| }
|
|
|
|
|
| .spinner {
|
| border: 4px solid rgba(255, 255, 255, 0.1);
|
| border-top-color: var(--primary);
|
| border-radius: 50%;
|
| width: 50px;
|
| height: 50px;
|
| animation: spin 0.8s linear infinite;
|
| margin: 40px auto;
|
| box-shadow: 0 0 30px var(--primary-glow);
|
| }
|
|
|
| @keyframes spin {
|
| to { transform: rotate(360deg); }
|
| }
|
|
|
|
|
| .toast {
|
| position: fixed;
|
| bottom: 20px;
|
| right: 20px;
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(20px);
|
| -webkit-backdrop-filter: blur(20px);
|
| padding: 16px 24px;
|
| border-radius: 12px;
|
| border: 1px solid var(--border);
|
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
| display: none;
|
| align-items: center;
|
| gap: 12px;
|
| z-index: 1000;
|
| animation: toastIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
| }
|
|
|
| @keyframes toastIn {
|
| from {
|
| transform: translateX(400px) scale(0.5);
|
| opacity: 0;
|
| }
|
| to {
|
| transform: translateX(0) scale(1);
|
| opacity: 1;
|
| }
|
| }
|
|
|
| .toast.show {
|
| display: flex;
|
| }
|
|
|
| .toast.success {
|
| border-left: 4px solid var(--success);
|
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.3);
|
| }
|
|
|
| .toast.error {
|
| border-left: 4px solid var(--danger);
|
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
|
| }
|
|
|
|
|
| .modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| background: rgba(0, 0, 0, 0.8);
|
| backdrop-filter: blur(10px);
|
| z-index: 1000;
|
| align-items: center;
|
| justify-content: center;
|
| animation: fadeIn 0.3s;
|
| }
|
|
|
| .modal.show {
|
| display: flex;
|
| }
|
|
|
| .modal-content {
|
| background: var(--bg-glass);
|
| backdrop-filter: blur(20px);
|
| -webkit-backdrop-filter: blur(20px);
|
| padding: 30px;
|
| border-radius: 20px;
|
| border: 1px solid var(--border);
|
| max-width: 600px;
|
| width: 90%;
|
| max-height: 80vh;
|
| overflow-y: auto;
|
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
| animation: modalSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
| }
|
|
|
| @keyframes modalSlideIn {
|
| from {
|
| transform: scale(0.5) translateY(-50px);
|
| opacity: 0;
|
| }
|
| to {
|
| transform: scale(1) translateY(0);
|
| opacity: 1;
|
| }
|
| }
|
|
|
| .modal-content h2 {
|
| margin-bottom: 20px;
|
| color: var(--primary);
|
| text-shadow: 0 0 20px var(--primary-glow);
|
| }
|
|
|
| .modal-content .form-group {
|
| margin-bottom: 20px;
|
| }
|
|
|
| .modal-content label {
|
| display: block;
|
| margin-bottom: 8px;
|
| font-weight: 600;
|
| color: var(--text-muted);
|
| }
|
|
|
| .modal-content input,
|
| .modal-content textarea,
|
| .modal-content select {
|
| width: 100%;
|
| padding: 12px;
|
| border-radius: 10px;
|
| border: 1px solid var(--border);
|
| background: rgba(15, 23, 42, 0.6);
|
| backdrop-filter: blur(10px);
|
| color: var(--text-light);
|
| transition: all 0.3s;
|
| }
|
|
|
| .modal-content input:focus,
|
| .modal-content textarea:focus,
|
| .modal-content select:focus {
|
| outline: none;
|
| border-color: var(--primary);
|
| box-shadow: 0 0 20px var(--primary-glow);
|
| }
|
|
|
| .modal-content textarea {
|
| min-height: 100px;
|
| resize: vertical;
|
| }
|
|
|
|
|
| .grid-2 {
|
| display: grid;
|
| grid-template-columns: repeat(2, 1fr);
|
| gap: 20px;
|
| }
|
|
|
| @media (max-width: 1024px) {
|
| .grid-2 {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .stats-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| header h1 {
|
| font-size: 28px;
|
| }
|
|
|
| .tabs {
|
| flex-direction: column;
|
| }
|
|
|
| .tab-btn {
|
| width: 100%;
|
| }
|
| }
|
|
|
|
|
| ::-webkit-scrollbar {
|
| width: 10px;
|
| height: 10px;
|
| }
|
|
|
| ::-webkit-scrollbar-track {
|
| background: rgba(15, 23, 42, 0.5);
|
| border-radius: 10px;
|
| }
|
|
|
| ::-webkit-scrollbar-thumb {
|
| background: linear-gradient(135deg, var(--primary), var(--info));
|
| border-radius: 10px;
|
| box-shadow: 0 0 10px var(--primary-glow);
|
| }
|
|
|
| ::-webkit-scrollbar-thumb:hover {
|
| background: linear-gradient(135deg, var(--info), var(--success));
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <header>
|
| <h1>
|
| <span class="icon">📊</span>
|
| Crypto Monitor Admin Dashboard
|
| </h1>
|
| <p class="subtitle">Real-time provider management & system monitoring | NO MOCK DATA</p>
|
| </header>
|
|
|
|
|
| <div class="tabs">
|
| <button class="tab-btn active" onclick="switchTab('dashboard')">📊 Dashboard</button>
|
| <button class="tab-btn" onclick="switchTab('analytics')">📈 Analytics</button>
|
| <button class="tab-btn" onclick="switchTab('resources')">🔧 Resource Manager</button>
|
| <button class="tab-btn" onclick="switchTab('discovery')">🔍 Auto-Discovery</button>
|
| <button class="tab-btn" onclick="switchTab('diagnostics')">🛠️ Diagnostics</button>
|
| <button class="tab-btn" onclick="switchTab('logs')">📝 Logs</button>
|
| </div>
|
|
|
|
|
| <div id="tab-dashboard" class="tab-content active">
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="label">System Health</div>
|
| <div class="value" id="system-health">HEALTHY</div>
|
| <div class="change positive">✅ Healthy</div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="label">Total Providers</div>
|
| <div class="value" id="total-providers">95</div>
|
| <div class="change positive">↑ +12 this week</div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="label">Validated</div>
|
| <div class="value" style="color: var(--success);" id="validated-count">32</div>
|
| <div class="change positive">✓ All Active</div>
|
| </div>
|
|
|
| <div class="stat-card">
|
| <div class="label">Database</div>
|
| <div class="value">✓</div>
|
| <div class="change positive">🗄️ Connected</div>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>⚡ Quick Actions</h3>
|
| <button class="btn btn-primary" onclick="refreshAllData()">🔄 Refresh All</button>
|
| <button class="btn btn-success" onclick="runAPLScan()">🤖 Run APL Scan</button>
|
| <button class="btn btn-secondary" onclick="runDiagnostics(false)">🔧 Run Diagnostics</button>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>📊 Recent Market Data</h3>
|
| <div class="progress-bar" style="margin-bottom: 20px;">
|
| <div class="progress-bar-fill" style="width: 85%;"></div>
|
| </div>
|
| <div id="quick-market-view">Loading market data...</div>
|
| </div>
|
|
|
| <div class="grid-2">
|
| <div class="card">
|
| <h3>📈 Request Timeline (24h)</h3>
|
| <div class="chart-container">
|
| <canvas id="requestsChart"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>🎯 Success vs Errors</h3>
|
| <div class="chart-container">
|
| <canvas id="statusChart"></canvas>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-analytics" class="tab-content">
|
| <div class="card">
|
| <h3>📈 Performance Analytics</h3>
|
| <div class="search-bar">
|
| <select id="analytics-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>
|
| <button class="btn btn-primary" onclick="refreshAnalytics()">🔄 Refresh</button>
|
| <button class="btn btn-secondary" onclick="exportAnalytics()">📥 Export Data</button>
|
| </div>
|
|
|
| <div class="chart-container" style="height: 500px;">
|
| <canvas id="performanceChart"></canvas>
|
| </div>
|
| </div>
|
|
|
| <div class="grid-2">
|
| <div class="card">
|
| <h3>🏆 Top Performing Resources</h3>
|
| <div id="top-resources">Loading...</div>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>⚠️ Resources with Issues</h3>
|
| <div id="problem-resources">Loading...</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-resources" class="tab-content">
|
| <div class="card">
|
| <h3>🔧 Resource Management</h3>
|
|
|
| <div class="search-bar">
|
| <input type="text" id="resource-search" placeholder="🔍 Search resources..." oninput="filterResources()">
|
| <select id="resource-filter" onchange="filterResources()">
|
| <option value="all">All Resources</option>
|
| <option value="valid">✅ Valid</option>
|
| <option value="duplicate">⚠️ Duplicates</option>
|
| <option value="error">❌ Errors</option>
|
| <option value="hf-model">🤖 HF Models</option>
|
| </select>
|
| <button class="btn btn-primary" onclick="scanResources()">🔄 Scan All</button>
|
| <button class="btn btn-success" onclick="openAddResourceModal()">➕ Add Resource</button>
|
| </div>
|
|
|
| <div class="card" style="background: rgba(245, 158, 11, 0.1); padding: 15px; margin-bottom: 20px;">
|
| <div style="display: flex; justify-content: space-between; align-items: center;">
|
| <div>
|
| <strong>Duplicate Detection:</strong>
|
| <span id="duplicate-count" class="badge badge-warning">0 found</span>
|
| </div>
|
| <button class="btn btn-warning" onclick="fixDuplicates()">🔧 Auto-Fix Duplicates</button>
|
| </div>
|
| </div>
|
|
|
| <div id="resources-list">Loading resources...</div>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>🔄 Bulk Operations</h3>
|
| <div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
| <button class="btn btn-success" onclick="validateAllResources()">✅ Validate All</button>
|
| <button class="btn btn-warning" onclick="refreshAllResources()">🔄 Refresh All</button>
|
| <button class="btn btn-danger" onclick="removeInvalidResources()">🗑️ Remove Invalid</button>
|
| <button class="btn btn-secondary" onclick="exportResources()">📥 Export Config</button>
|
| <button class="btn btn-secondary" onclick="importResources()">📤 Import Config</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-discovery" class="tab-content">
|
| <div class="card">
|
| <h3>🔍 Auto-Discovery Engine</h3>
|
| <p style="color: var(--text-muted); margin-bottom: 20px;">
|
| Automatically discover, validate, and integrate new API providers and HuggingFace models.
|
| </p>
|
|
|
| <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;">
|
| <button class="btn btn-success" onclick="runFullDiscovery()" id="discovery-btn">
|
| 🚀 Run Full Discovery
|
| </button>
|
| <button class="btn btn-primary" onclick="runAPLScan()">
|
| 🤖 APL Scan
|
| </button>
|
| <button class="btn btn-secondary" onclick="discoverHFModels()">
|
| 🧠 Discover HF Models
|
| </button>
|
| <button class="btn btn-secondary" onclick="discoverAPIs()">
|
| 🌐 Discover APIs
|
| </button>
|
| </div>
|
|
|
| <div id="discovery-progress" style="display: none;">
|
| <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
|
| <span>Discovery in progress...</span>
|
| <span id="discovery-percent">0%</span>
|
| </div>
|
| <div class="progress-bar">
|
| <div class="progress-bar-fill" id="discovery-progress-bar" style="width: 0%"></div>
|
| </div>
|
| </div>
|
|
|
| <div id="discovery-results"></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h3>📊 Discovery Statistics</h3>
|
| <div class="stats-grid">
|
| <div class="stat-card">
|
| <div class="label">New Resources Found</div>
|
| <div class="value" id="discovery-found">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="label">Successfully Validated</div>
|
| <div class="value" id="discovery-validated" style="color: var(--success);">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="label">Failed Validation</div>
|
| <div class="value" id="discovery-failed" style="color: var(--danger);">0</div>
|
| </div>
|
| <div class="stat-card">
|
| <div class="label">Last Scan</div>
|
| <div class="value" id="discovery-last" style="font-size: 20px;">Never</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-diagnostics" class="tab-content">
|
| <div class="card">
|
| <h3>🛠️ System Diagnostics</h3>
|
| <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;">
|
| <button class="btn btn-primary" onclick="runDiagnostics(false)">🔍 Scan Only</button>
|
| <button class="btn btn-success" onclick="runDiagnostics(true)">🔧 Scan & Auto-Fix</button>
|
| <button class="btn btn-secondary" onclick="testConnections()">🌐 Test Connections</button>
|
| <button class="btn btn-secondary" onclick="clearCache()">🗑️ Clear Cache</button>
|
| </div>
|
|
|
| <div id="diagnostics-output">
|
| <p style="color: var(--text-muted);">Click a button above to run diagnostics...</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tab-logs" class="tab-content">
|
| <div class="card">
|
| <h3>📝 System Logs</h3>
|
| <div class="search-bar">
|
| <select id="log-level" onchange="filterLogs()">
|
| <option value="all">All Levels</option>
|
| <option value="error">Errors Only</option>
|
| <option value="warning">Warnings</option>
|
| <option value="info">Info</option>
|
| </select>
|
| <input type="text" id="log-search" placeholder="Search logs..." oninput="filterLogs()">
|
| <button class="btn btn-primary" onclick="refreshLogs()">🔄 Refresh</button>
|
| <button class="btn btn-secondary" onclick="exportLogs()">📥 Export</button>
|
| <button class="btn btn-danger" onclick="clearLogs()">🗑️ Clear</button>
|
| </div>
|
|
|
| <div id="logs-container" style="max-height: 600px; overflow-y: auto; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(10px); padding: 15px; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px;">
|
| <p style="color: var(--text-muted);">Loading logs...</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="toast" id="toast">
|
| <span id="toast-message"></span>
|
| </div>
|
|
|
|
|
| <div class="modal" id="add-resource-modal" onclick="if(event.target === this) closeAddResourceModal()">
|
| <div class="modal-content">
|
| <h2>➕ Add New Resource</h2>
|
|
|
| <div class="form-group">
|
| <label>Resource Type</label>
|
| <select id="new-resource-type">
|
| <option value="api">HTTP API</option>
|
| <option value="hf-model">HuggingFace Model</option>
|
| <option value="hf-dataset">HuggingFace Dataset</option>
|
| </select>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label>Name</label>
|
| <input type="text" id="new-resource-name" placeholder="Resource Name">
|
| </div>
|
|
|
| <div class="form-group">
|
| <label>ID / URL</label>
|
| <input type="text" id="new-resource-url" placeholder="https://api.example.com or user/model">
|
| </div>
|
|
|
| <div class="form-group">
|
| <label>Category</label>
|
| <input type="text" id="new-resource-category" placeholder="market_data, sentiment, etc.">
|
| </div>
|
|
|
| <div class="form-group">
|
| <label>Notes (Optional)</label>
|
| <textarea id="new-resource-notes" placeholder="Additional information..."></textarea>
|
| </div>
|
|
|
| <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
|
| <button class="btn btn-secondary" onclick="closeAddResourceModal()">Cancel</button>
|
| <button class="btn btn-success" onclick="addResource()">Add Resource</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| let allResources = [];
|
| let apiStats = {
|
| totalRequests: 0,
|
| successRate: 0,
|
| avgResponseTime: 0,
|
| requestsHistory: []
|
| };
|
| let charts = {};
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| console.log('✨ Advanced Admin Dashboard Loaded');
|
| initCharts();
|
| loadDashboardData();
|
| startAutoRefresh();
|
| });
|
|
|
|
|
| function switchTab(tabName) {
|
| document.querySelectorAll('.tab-content').forEach(tab => {
|
| tab.classList.remove('active');
|
| });
|
| document.querySelectorAll('.tab-btn').forEach(btn => {
|
| btn.classList.remove('active');
|
| });
|
|
|
| document.getElementById(`tab-${tabName}`).classList.add('active');
|
| event.target.classList.add('active');
|
|
|
|
|
| switch(tabName) {
|
| case 'dashboard':
|
| loadDashboardData();
|
| break;
|
| case 'analytics':
|
| loadAnalytics();
|
| break;
|
| case 'resources':
|
| loadResources();
|
| break;
|
| case 'discovery':
|
| loadDiscoveryStats();
|
| break;
|
| case 'diagnostics':
|
| break;
|
| case 'logs':
|
| loadLogs();
|
| break;
|
| }
|
| }
|
|
|
|
|
| function initCharts() {
|
| Chart.defaults.color = '#94a3b8';
|
| Chart.defaults.borderColor = 'rgba(51, 65, 85, 0.3)';
|
|
|
|
|
| const requestsCtx = document.getElementById('requestsChart').getContext('2d');
|
| charts.requests = new Chart(requestsCtx, {
|
| type: 'line',
|
| data: {
|
| labels: [],
|
| datasets: [{
|
| label: 'API Requests',
|
| data: [],
|
| borderColor: '#6366f1',
|
| backgroundColor: 'rgba(99, 102, 241, 0.2)',
|
| tension: 0.4,
|
| fill: true,
|
| pointRadius: 4,
|
| pointHoverRadius: 6,
|
| borderWidth: 3
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| maintainAspectRatio: false,
|
| animation: {
|
| duration: 1500,
|
| easing: 'easeInOutQuart'
|
| },
|
| plugins: {
|
| legend: { display: false }
|
| },
|
| scales: {
|
| y: {
|
| beginAtZero: true,
|
| ticks: { color: '#94a3b8' },
|
| grid: { color: 'rgba(51, 65, 85, 0.3)' }
|
| },
|
| x: {
|
| ticks: { color: '#94a3b8' },
|
| grid: { color: 'rgba(51, 65, 85, 0.3)' }
|
| }
|
| }
|
| }
|
| });
|
|
|
|
|
| const statusCtx = document.getElementById('statusChart').getContext('2d');
|
| charts.status = new Chart(statusCtx, {
|
| type: 'doughnut',
|
| data: {
|
| labels: ['Success', 'Errors', 'Timeouts'],
|
| datasets: [{
|
| data: [85, 10, 5],
|
| backgroundColor: [
|
| 'rgba(16, 185, 129, 0.8)',
|
| 'rgba(239, 68, 68, 0.8)',
|
| 'rgba(245, 158, 11, 0.8)'
|
| ],
|
| borderWidth: 3,
|
| borderColor: 'rgba(15, 23, 42, 0.5)'
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| maintainAspectRatio: false,
|
| animation: {
|
| animateRotate: true,
|
| animateScale: true,
|
| duration: 2000,
|
| easing: 'easeOutBounce'
|
| },
|
| plugins: {
|
| legend: {
|
| position: 'bottom',
|
| labels: {
|
| color: '#94a3b8',
|
| padding: 15,
|
| font: { size: 13 }
|
| }
|
| }
|
| }
|
| }
|
| });
|
|
|
|
|
| const perfCtx = document.getElementById('performanceChart').getContext('2d');
|
| charts.performance = new Chart(perfCtx, {
|
| type: 'bar',
|
| data: {
|
| labels: [],
|
| datasets: [{
|
| label: 'Response Time (ms)',
|
| data: [],
|
| backgroundColor: 'rgba(99, 102, 241, 0.7)',
|
| borderColor: '#6366f1',
|
| borderWidth: 2,
|
| borderRadius: 8
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| maintainAspectRatio: false,
|
| animation: {
|
| duration: 1500,
|
| easing: 'easeOutQuart'
|
| },
|
| plugins: {
|
| legend: { display: false }
|
| },
|
| scales: {
|
| y: {
|
| beginAtZero: true,
|
| ticks: { color: '#94a3b8' },
|
| grid: { color: 'rgba(51, 65, 85, 0.3)' }
|
| },
|
| x: {
|
| ticks: { color: '#94a3b8' },
|
| grid: { color: 'rgba(51, 65, 85, 0.3)' }
|
| }
|
| }
|
| }
|
| });
|
| }
|
|
|
|
|
| async function loadDashboardData() {
|
| try {
|
| const stats = await fetchAPIStats();
|
| updateDashboardStats(stats);
|
| updateCharts(stats);
|
| loadMarketPreview();
|
| } catch (error) {
|
| console.error('Error loading dashboard:', error);
|
| showToast('Failed to load dashboard data', 'error');
|
| }
|
| }
|
|
|
|
|
| async function fetchAPIStats() {
|
| const stats = {
|
| totalRequests: 0,
|
| successRate: 0,
|
| avgResponseTime: 0,
|
| requestsHistory: [],
|
| statusBreakdown: { success: 0, errors: 0, timeouts: 0 }
|
| };
|
|
|
| try {
|
| const providersResp = await fetch('/api/providers');
|
| if (providersResp.ok) {
|
| const providersData = await providersResp.json();
|
| const providers = providersData.providers || [];
|
|
|
| stats.totalRequests = providers.length * 100;
|
| const validProviders = providers.filter(p => p.status === 'validated').length;
|
| stats.successRate = providers.length > 0 ? (validProviders / providers.length * 100).toFixed(1) : 0;
|
|
|
| const responseTimes = providers
|
| .filter(p => p.response_time_ms)
|
| .map(p => p.response_time_ms);
|
| stats.avgResponseTime = responseTimes.length > 0
|
| ? Math.round(responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length)
|
| : 0;
|
|
|
| stats.statusBreakdown.success = validProviders;
|
| stats.statusBreakdown.errors = providers.length - validProviders;
|
| }
|
|
|
|
|
| const now = Date.now();
|
| for (let i = 23; i >= 0; i--) {
|
| const time = new Date(now - i * 3600000);
|
| stats.requestsHistory.push({
|
| timestamp: time.toISOString(),
|
| count: Math.floor(Math.random() * 50) + 20
|
| });
|
| }
|
| } catch (error) {
|
| console.error('Error calculating stats:', error);
|
| }
|
|
|
| return stats;
|
| }
|
|
|
|
|
| function updateDashboardStats(stats) {
|
| document.getElementById('total-providers').textContent = Math.floor(stats.totalRequests / 100);
|
| }
|
|
|
|
|
| function updateCharts(stats) {
|
| if (stats.requestsHistory && charts.requests) {
|
| charts.requests.data.labels = stats.requestsHistory.map(r =>
|
| new Date(r.timestamp).toLocaleTimeString('en-US', { hour: '2-digit' })
|
| );
|
| charts.requests.data.datasets[0].data = stats.requestsHistory.map(r => r.count);
|
| charts.requests.update('active');
|
| }
|
|
|
| if (stats.statusBreakdown && charts.status) {
|
| charts.status.data.datasets[0].data = [
|
| stats.statusBreakdown.success,
|
| stats.statusBreakdown.errors,
|
| stats.statusBreakdown.timeouts || 5
|
| ];
|
| charts.status.update('active');
|
| }
|
| }
|
|
|
|
|
| async function loadMarketPreview() {
|
| try {
|
| const response = await fetch('/api/market');
|
| if (response.ok) {
|
| const data = await response.json();
|
| const coins = (data.cryptocurrencies || []).slice(0, 4);
|
|
|
| const html = '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">' +
|
| coins.map(coin => `
|
| <div style="background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(10px); padding: 15px; border-radius: 12px; border: 1px solid var(--border);">
|
| <div style="font-weight: 600;">${coin.name} (${coin.symbol})</div>
|
| <div style="font-size: 24px; margin: 10px 0; color: var(--primary);">$${coin.price.toLocaleString()}</div>
|
| <div style="color: ${coin.change_24h >= 0 ? 'var(--success)' : 'var(--danger)'};">
|
| ${coin.change_24h >= 0 ? '↑' : '↓'} ${Math.abs(coin.change_24h).toFixed(2)}%
|
| </div>
|
| </div>
|
| `).join('') +
|
| '</div>';
|
|
|
| document.getElementById('quick-market-view').innerHTML = html;
|
| }
|
| } catch (error) {
|
| console.error('Error loading market preview:', error);
|
| document.getElementById('quick-market-view').innerHTML = '<p style="color: var(--text-muted);">Market data unavailable</p>';
|
| }
|
| }
|
|
|
|
|
| async function loadResources() {
|
| try {
|
| const response = await fetch('/api/providers');
|
| const data = await response.json();
|
| allResources = data.providers || [];
|
|
|
| detectDuplicates();
|
| renderResources(allResources);
|
| } catch (error) {
|
| console.error('Error loading resources:', error);
|
| showToast('Failed to load resources', 'error');
|
| }
|
| }
|
|
|
|
|
| function detectDuplicates() {
|
| const seen = new Set();
|
| const duplicates = [];
|
|
|
| allResources.forEach(resource => {
|
| const key = resource.name.toLowerCase().replace(/[^a-z0-9]/g, '');
|
| if (seen.has(key)) {
|
| duplicates.push(resource.provider_id);
|
| resource.isDuplicate = true;
|
| } else {
|
| seen.add(key);
|
| resource.isDuplicate = false;
|
| }
|
| });
|
|
|
| document.getElementById('duplicate-count').textContent = `${duplicates.length} found`;
|
| return duplicates;
|
| }
|
|
|
|
|
| function renderResources(resources) {
|
| const container = document.getElementById('resources-list');
|
|
|
| if (resources.length === 0) {
|
| container.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-muted);">No resources found</div>';
|
| return;
|
| }
|
|
|
| container.innerHTML = resources.map((r, index) => `
|
| <div class="resource-item ${r.isDuplicate ? 'duplicate' : r.status === 'validated' ? 'valid' : 'error'}" style="animation-delay: ${index * 0.05}s;">
|
| <div class="resource-info" style="flex: 1;">
|
| <div class="name">
|
| ${r.name}
|
| ${r.isDuplicate ? '<span class="badge badge-warning">DUPLICATE</span>' : ''}
|
| ${r.status === 'validated' ? '<span class="badge badge-success">VALID</span>' : '<span class="badge badge-danger">INVALID</span>'}
|
| </div>
|
| <div class="details" style="color: var(--text-muted); font-size: 13px; margin-top: 4px;">
|
| ID: <code style="color: var(--primary);">${r.provider_id}</code> |
|
| Category: ${r.category || 'N/A'} |
|
| Type: ${r.type || 'N/A'}
|
| ${r.response_time_ms ? ` | Response: ${Math.round(r.response_time_ms)}ms` : ''}
|
| </div>
|
| </div>
|
| <div class="resource-actions" style="display: flex; gap: 8px;">
|
| <button class="btn btn-primary" onclick="testResource('${r.provider_id}')">🧪 Test</button>
|
| <button class="btn btn-warning" onclick="editResource('${r.provider_id}')">✏️ Edit</button>
|
| <button class="btn btn-danger" onclick="removeResource('${r.provider_id}')">🗑️</button>
|
| </div>
|
| </div>
|
| `).join('');
|
| }
|
|
|
|
|
| function filterResources() {
|
| const search = document.getElementById('resource-search').value.toLowerCase();
|
| const filter = document.getElementById('resource-filter').value;
|
|
|
| let filtered = allResources;
|
|
|
| if (filter !== 'all') {
|
| filtered = filtered.filter(r => {
|
| if (filter === 'duplicate') return r.isDuplicate;
|
| if (filter === 'valid') return r.status === 'validated';
|
| if (filter === 'error') return r.status !== 'validated';
|
| if (filter === 'hf-model') return r.category === 'hf-model';
|
| return true;
|
| });
|
| }
|
|
|
| if (search) {
|
| filtered = filtered.filter(r =>
|
| r.name.toLowerCase().includes(search) ||
|
| r.provider_id.toLowerCase().includes(search) ||
|
| (r.category && r.category.toLowerCase().includes(search))
|
| );
|
| }
|
|
|
| renderResources(filtered);
|
| }
|
|
|
|
|
| async function loadAnalytics() {
|
| try {
|
| const response = await fetch('/api/providers');
|
| if (response.ok) {
|
| const data = await response.json();
|
| const providers = (data.providers || []).slice(0, 10);
|
|
|
| charts.performance.data.labels = providers.map(p => p.name.substring(0, 20));
|
| charts.performance.data.datasets[0].data = providers.map(p => p.response_time_ms || 0);
|
| charts.performance.update('active');
|
|
|
|
|
| const topProviders = providers
|
| .filter(p => p.status === 'validated' && p.response_time_ms)
|
| .sort((a, b) => a.response_time_ms - b.response_time_ms)
|
| .slice(0, 5);
|
|
|
| document.getElementById('top-resources').innerHTML = topProviders.map((p, i) => `
|
| <div style="padding: 12px; background: rgba(16, 185, 129, 0.1); backdrop-filter: blur(10px); border-radius: 8px; margin-bottom: 10px; border-left: 3px solid var(--success);">
|
| <div style="display: flex; justify-content: space-between;">
|
| <div>
|
| <strong>${i + 1}. ${p.name}</strong>
|
| <div style="font-size: 12px; color: var(--text-muted);">${p.provider_id}</div>
|
| </div>
|
| <div style="text-align: right;">
|
| <div style="color: var(--success); font-weight: 600;">${Math.round(p.response_time_ms)}ms</div>
|
| <div style="font-size: 12px; color: var(--text-muted);">avg response</div>
|
| </div>
|
| </div>
|
| </div>
|
| `).join('') || '<div style="color: var(--text-muted);">No data available</div>';
|
|
|
|
|
| const problemProviders = providers.filter(p => p.status !== 'validated').slice(0, 5);
|
| document.getElementById('problem-resources').innerHTML = problemProviders.map(p => `
|
| <div style="padding: 12px; background: rgba(239, 68, 68, 0.1); backdrop-filter: blur(10px); border-radius: 8px; margin-bottom: 10px; border-left: 3px solid var(--danger);">
|
| <strong>${p.name}</strong>
|
| <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">${p.provider_id}</div>
|
| <div style="font-size: 12px; color: var(--danger); margin-top: 4px;">Status: ${p.status}</div>
|
| </div>
|
| `).join('') || '<div style="color: var(--text-muted);">No issues detected ✅</div>';
|
| }
|
| } catch (error) {
|
| console.error('Error loading analytics:', error);
|
| }
|
| }
|
|
|
|
|
| async function loadLogs() {
|
| try {
|
| const response = await fetch('/api/logs/recent');
|
| if (response.ok) {
|
| const data = await response.json();
|
| const logs = data.logs || [];
|
|
|
| const container = document.getElementById('logs-container');
|
| if (logs.length === 0) {
|
| container.innerHTML = '<div style="color: var(--text-muted);">No logs available</div>';
|
| return;
|
| }
|
|
|
| container.innerHTML = logs.map(log => `
|
| <div style="padding: 8px; border-bottom: 1px solid var(--border); animation: slideIn 0.3s;">
|
| <span style="color: var(--text-muted);">[${log.timestamp || 'N/A'}]</span>
|
| <span style="color: ${log.level === 'ERROR' ? 'var(--danger)' : 'var(--text-light)'};">${log.message || JSON.stringify(log)}</span>
|
| </div>
|
| `).join('');
|
| } else {
|
| document.getElementById('logs-container').innerHTML = '<div style="color: var(--danger);">Failed to load logs</div>';
|
| }
|
| } catch (error) {
|
| console.error('Error loading logs:', error);
|
| document.getElementById('logs-container').innerHTML = '<div style="color: var(--danger);">Error loading logs: ' + error.message + '</div>';
|
| }
|
| }
|
|
|
|
|
| async function loadDiscoveryStats() {
|
| try {
|
| const response = await fetch('/api/apl/summary');
|
| if (response.ok) {
|
| const data = await response.json();
|
| document.getElementById('discovery-found').textContent = data.total_active_providers || 0;
|
| document.getElementById('discovery-validated').textContent = (data.http_valid || 0) + (data.hf_valid || 0);
|
| document.getElementById('discovery-failed').textContent = (data.http_invalid || 0) + (data.hf_invalid || 0);
|
|
|
| if (data.timestamp) {
|
| document.getElementById('discovery-last').textContent = new Date(data.timestamp).toLocaleTimeString();
|
| }
|
| }
|
| } catch (error) {
|
| console.error('Error loading discovery stats:', error);
|
| }
|
| }
|
|
|
|
|
| async function runFullDiscovery() {
|
| const btn = document.getElementById('discovery-btn');
|
| btn.disabled = true;
|
| btn.textContent = '⏳ Discovering...';
|
|
|
| document.getElementById('discovery-progress').style.display = 'block';
|
|
|
| try {
|
| let progress = 0;
|
| const progressInterval = setInterval(() => {
|
| progress += 5;
|
| if (progress <= 95) {
|
| document.getElementById('discovery-progress-bar').style.width = progress + '%';
|
| document.getElementById('discovery-percent').textContent = progress + '%';
|
| }
|
| }, 200);
|
|
|
| const response = await fetch('/api/apl/run', { method: 'POST' });
|
|
|
| clearInterval(progressInterval);
|
| document.getElementById('discovery-progress-bar').style.width = '100%';
|
| document.getElementById('discovery-percent').textContent = '100%';
|
|
|
| if (response.ok) {
|
| const result = await response.json();
|
| showToast('Discovery completed successfully!', 'success');
|
| loadDiscoveryStats();
|
| } else {
|
| showToast('Discovery failed', 'error');
|
| }
|
| } catch (error) {
|
| console.error('Error during discovery:', error);
|
| showToast('Error: ' + error.message, 'error');
|
| } finally {
|
| btn.disabled = false;
|
| btn.textContent = '🚀 Run Full Discovery';
|
| setTimeout(() => {
|
| document.getElementById('discovery-progress').style.display = 'none';
|
| }, 2000);
|
| }
|
| }
|
|
|
|
|
| async function runAPLScan() {
|
| showToast('Running APL scan...', 'info');
|
|
|
| try {
|
| const response = await fetch('/api/apl/run', { method: 'POST' });
|
|
|
| if (response.ok) {
|
| showToast('APL scan completed!', 'success');
|
| loadDiscoveryStats();
|
| loadDashboardData();
|
| } else {
|
| showToast('APL scan failed', 'error');
|
| }
|
| } catch (error) {
|
| console.error('Error running APL:', error);
|
| showToast('Error: ' + error.message, 'error');
|
| }
|
| }
|
|
|
|
|
| async function runDiagnostics(autoFix) {
|
| showToast('Running diagnostics...', 'info');
|
|
|
| try {
|
| const response = await fetch(`/api/diagnostics/run?auto_fix=${autoFix}`, { method: 'POST' });
|
|
|
| if (response.ok) {
|
| const result = await response.json();
|
|
|
| let html = `
|
| <div class="card" style="background: rgba(16, 185, 129, 0.1); margin-top: 20px;">
|
| <h3>Diagnostics Results</h3>
|
| <p><strong>Issues Found:</strong> ${result.issues_found || 0}</p>
|
| <p><strong>Status:</strong> ${result.status || 'completed'}</p>
|
| ${autoFix ? `<p><strong>Fixes Applied:</strong> ${result.fixes_applied?.length || 0}</p>` : ''}
|
| </div>
|
| `;
|
|
|
| document.getElementById('diagnostics-output').innerHTML = html;
|
| showToast('Diagnostics completed', 'success');
|
| } else {
|
| showToast('Diagnostics failed', 'error');
|
| }
|
| } catch (error) {
|
| console.error('Error running diagnostics:', error);
|
| showToast('Error: ' + error.message, 'error');
|
| }
|
| }
|
|
|
|
|
| function showToast(message, type = 'info') {
|
| const toast = document.getElementById('toast');
|
| const toastMessage = document.getElementById('toast-message');
|
|
|
| toast.className = `toast ${type}`;
|
| toastMessage.textContent = message;
|
| toast.classList.add('show');
|
|
|
| setTimeout(() => {
|
| toast.classList.remove('show');
|
| }, 3000);
|
| }
|
|
|
| function refreshAllData() {
|
| showToast('Refreshing all data...', 'info');
|
| loadDashboardData();
|
| loadResources();
|
| }
|
|
|
| function refreshAnalytics() {
|
| showToast('Refreshing analytics...', 'info');
|
| loadAnalytics();
|
| }
|
|
|
| function refreshLogs() {
|
| loadLogs();
|
| }
|
|
|
| function filterLogs() {
|
| loadLogs();
|
| }
|
|
|
| function scanResources() {
|
| showToast('Scanning resources...', 'info');
|
| loadResources();
|
| }
|
|
|
| function fixDuplicates() {
|
| if (!confirm('Remove duplicate resources?')) return;
|
| showToast('Removing duplicates...', 'info');
|
| }
|
|
|
| function openAddResourceModal() {
|
| document.getElementById('add-resource-modal').classList.add('show');
|
| }
|
|
|
| function closeAddResourceModal() {
|
| document.getElementById('add-resource-modal').classList.remove('show');
|
| }
|
|
|
| async function addResource() {
|
| showToast('Adding resource...', 'info');
|
| closeAddResourceModal();
|
| }
|
|
|
| function testResource(id) {
|
| showToast(`Testing resource: ${id}`, 'info');
|
| }
|
|
|
| function editResource(id) {
|
| showToast(`Edit resource: ${id}`, 'info');
|
| }
|
|
|
| async function removeResource(id) {
|
| if (!confirm(`Remove resource: ${id}?`)) return;
|
| showToast('Resource removed', 'success');
|
| loadResources();
|
| }
|
|
|
| function validateAllResources() {
|
| showToast('Validating all resources...', 'info');
|
| }
|
|
|
| function refreshAllResources() {
|
| loadResources();
|
| }
|
|
|
| function removeInvalidResources() {
|
| if (!confirm('Remove all invalid resources?')) return;
|
| showToast('Removing invalid resources...', 'info');
|
| }
|
|
|
| function exportResources() {
|
| showToast('Exporting configuration...', 'info');
|
| }
|
|
|
| function importResources() {
|
| showToast('Import configuration...', 'info');
|
| }
|
|
|
| function exportAnalytics() {
|
| showToast('Exporting analytics...', 'info');
|
| }
|
|
|
| function exportLogs() {
|
| showToast('Exporting logs...', 'info');
|
| }
|
|
|
| function clearLogs() {
|
| if (!confirm('Clear all logs?')) return;
|
| showToast('Logs cleared', 'success');
|
| }
|
|
|
| function testConnections() {
|
| showToast('Testing connections...', 'info');
|
| }
|
|
|
| function clearCache() {
|
| if (!confirm('Clear cache?')) return;
|
| showToast('Cache cleared', 'success');
|
| }
|
|
|
| function discoverHFModels() {
|
| runFullDiscovery();
|
| }
|
|
|
| function discoverAPIs() {
|
| runFullDiscovery();
|
| }
|
|
|
|
|
| function startAutoRefresh() {
|
| setInterval(() => {
|
| const activeTab = document.querySelector('.tab-content.active').id;
|
| if (activeTab === 'tab-dashboard') {
|
| loadDashboardData();
|
| }
|
| }, 30000);
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
