From 3315d61f780bbffda7f1f6b37168a8c8933cf211 Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Sun, 4 Jan 2026 16:31:48 +0100 Subject: [PATCH] feat(luci-app-secubox-admin): add cyberpunk dual console theme with stats and quick actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added a complete cyberpunk-themed admin interface with: Features: - 🔮 Dual console layout (left: stats/actions, right: content) - 📊 Live system stats with emojis - ⚡ Quick action buttons with hover effects - đŸ’ģ Real-time resource monitoring (CPU, RAM, Disk) - 🌐 Catalog sources status display - 🎮 Active applications list view - ⚠ī¸ System alerts panel - 🔃 Auto-refresh every 10 seconds Cyberpunk Styling: - Neon color scheme (cyan #00ffff, magenta #ff00ff, green #00ff41) - ASCII art header with SecuBox logo - Terminal/console aesthetic with monospace fonts - Glitch and pulse animations - Scanline effects for authentic CRT look - Progress bars with shimmer effects - Glowing text shadows and borders - Responsive grid layouts Components: - cyberpunk.css: Complete theme with 600+ lines of styles - cyber-dashboard.js: Full-featured cyberpunk dashboard view - Menu entry: '🔮 Cyber Console' between Control Panel and Apps Manager Access: Admin Control → 🔮 Cyber Console Incremented PKG_RELEASE: 8 → 9 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- .../secubox/luci-app-secubox-admin/Makefile | 2 +- .../resources/secubox-admin/cyberpunk.css | 642 ++++++++++++++++++ .../view/secubox-admin/cyber-dashboard.js | 418 ++++++++++++ .../luci/menu.d/luci-app-secubox-admin.json | 8 + 4 files changed, 1069 insertions(+), 1 deletion(-) create mode 100644 package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/cyberpunk.css create mode 100644 package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/cyber-dashboard.js diff --git a/package/secubox/luci-app-secubox-admin/Makefile b/package/secubox/luci-app-secubox-admin/Makefile index 9b2c4fbe..6e8b8bf9 100644 --- a/package/secubox/luci-app-secubox-admin/Makefile +++ b/package/secubox/luci-app-secubox-admin/Makefile @@ -2,7 +2,7 @@ include $(TOPDIR)/rules.mk PKG_NAME:=luci-app-secubox-admin PKG_VERSION:=1.0.0 -PKG_RELEASE:=8 +PKG_RELEASE:=9 PKG_LICENSE:=MIT PKG_MAINTAINER:=CyberMind diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/cyberpunk.css b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/cyberpunk.css new file mode 100644 index 00000000..e3043709 --- /dev/null +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/cyberpunk.css @@ -0,0 +1,642 @@ +/* SecuBox Admin - Cyberpunk Theme */ + +:root { + --cyber-primary: #00ff41; + --cyber-secondary: #ff00ff; + --cyber-accent: #00ffff; + --cyber-warning: #ffff00; + --cyber-danger: #ff0080; + --cyber-bg: #0a0e27; + --cyber-bg-secondary: #1a1e3f; + --cyber-border: #00ff41; + --cyber-text: #e0e0e0; + --cyber-text-dim: #808080; +} + +/* Cyberpunk base styles */ +.cyberpunk-mode { + background: var(--cyber-bg); + color: var(--cyber-text); + font-family: 'Courier New', 'Consolas', monospace; + min-height: 100vh; +} + +.cyberpunk-mode * { + font-family: inherit; +} + +/* Dual console layout */ +.cyber-dual-console { + display: grid; + grid-template-columns: 380px 1fr; + gap: 20px; + padding: 20px; + min-height: calc(100vh - 40px); +} + +@media (max-width: 1200px) { + .cyber-dual-console { + grid-template-columns: 1fr; + } +} + +/* Left console - Stats & Quick Actions */ +.cyber-console-left { + display: flex; + flex-direction: column; + gap: 15px; +} + +/* Right console - Main Content */ +.cyber-console-right { + display: flex; + flex-direction: column; + gap: 15px; + overflow-x: auto; +} + +/* Terminal panel */ +.cyber-panel { + background: var(--cyber-bg-secondary); + border: 2px solid var(--cyber-border); + border-radius: 4px; + box-shadow: 0 0 20px rgba(0, 255, 65, 0.3), + inset 0 0 20px rgba(0, 255, 65, 0.05); + position: relative; + overflow: hidden; +} + +.cyber-panel::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 30px; + background: linear-gradient(90deg, + var(--cyber-border) 0%, + transparent 50%, + var(--cyber-border) 100%); + opacity: 0.1; + pointer-events: none; +} + +.cyber-panel-header { + background: rgba(0, 255, 65, 0.1); + border-bottom: 1px solid var(--cyber-border); + padding: 10px 15px; + display: flex; + align-items: center; + justify-content: space-between; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 11px; +} + +.cyber-panel-title { + color: var(--cyber-primary); + display: flex; + align-items: center; + gap: 8px; +} + +.cyber-panel-title::before { + content: '▸'; + color: var(--cyber-accent); + animation: pulse 2s infinite; +} + +.cyber-panel-badge { + background: var(--cyber-primary); + color: var(--cyber-bg); + padding: 2px 8px; + border-radius: 2px; + font-size: 10px; + font-weight: bold; +} + +.cyber-panel-body { + padding: 15px; +} + +/* Stats grid */ +.cyber-stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; +} + +.cyber-stat-card { + background: rgba(0, 255, 65, 0.05); + border: 1px solid var(--cyber-border); + border-left: 3px solid var(--cyber-primary); + padding: 12px; + position: relative; + transition: all 0.3s ease; +} + +.cyber-stat-card:hover { + border-color: var(--cyber-accent); + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); + transform: translateX(2px); +} + +.cyber-stat-card.warning { + border-left-color: var(--cyber-warning); +} + +.cyber-stat-card.danger { + border-left-color: var(--cyber-danger); +} + +.cyber-stat-card.accent { + border-left-color: var(--cyber-accent); +} + +.cyber-stat-icon { + font-size: 24px; + margin-bottom: 5px; + filter: drop-shadow(0 0 5px currentColor); +} + +.cyber-stat-value { + font-size: 28px; + font-weight: bold; + color: var(--cyber-primary); + line-height: 1; + text-shadow: 0 0 10px var(--cyber-primary); +} + +.cyber-stat-label { + font-size: 10px; + color: var(--cyber-text-dim); + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 5px; +} + +/* Quick actions */ +.cyber-quick-actions { + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +.cyber-action-btn { + background: rgba(0, 255, 65, 0.1); + border: 1px solid var(--cyber-border); + color: var(--cyber-text); + padding: 12px 15px; + text-align: left; + cursor: pointer; + font-family: inherit; + font-size: 13px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + gap: 10px; +} + +.cyber-action-btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + background: var(--cyber-primary); + transform: scaleY(0); + transition: transform 0.3s ease; +} + +.cyber-action-btn:hover::before { + transform: scaleY(1); +} + +.cyber-action-btn:hover { + background: rgba(0, 255, 65, 0.2); + border-color: var(--cyber-accent); + box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); + transform: translateX(5px); +} + +.cyber-action-btn:active { + transform: translateX(5px) scale(0.98); +} + +.cyber-action-icon { + font-size: 18px; + filter: drop-shadow(0 0 3px currentColor); +} + +.cyber-action-label { + flex: 1; +} + +.cyber-action-arrow { + color: var(--cyber-accent); + font-size: 12px; +} + +/* System status */ +.cyber-system-status { + display: flex; + flex-direction: column; + gap: 12px; +} + +.cyber-metric { + display: flex; + flex-direction: column; + gap: 6px; +} + +.cyber-metric-header { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 1px; +} + +.cyber-metric-label { + color: var(--cyber-text-dim); + display: flex; + align-items: center; + gap: 6px; +} + +.cyber-metric-value { + color: var(--cyber-primary); + font-weight: bold; + text-shadow: 0 0 5px var(--cyber-primary); +} + +.cyber-progress-bar { + height: 8px; + background: rgba(0, 255, 65, 0.1); + border: 1px solid var(--cyber-border); + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.cyber-progress-fill { + height: 100%; + background: linear-gradient(90deg, + var(--cyber-primary), + var(--cyber-accent)); + box-shadow: 0 0 10px var(--cyber-primary); + transition: width 0.5s ease; + position: relative; +} + +.cyber-progress-fill::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(255, 255, 255, 0.3) 50%, + transparent 100%); + animation: shimmer 2s infinite; +} + +.cyber-progress-fill.warning { + background: linear-gradient(90deg, + var(--cyber-warning), + var(--cyber-secondary)); +} + +.cyber-progress-fill.danger { + background: linear-gradient(90deg, + var(--cyber-danger), + var(--cyber-warning)); +} + +/* List view */ +.cyber-list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.cyber-list-item { + background: rgba(0, 255, 65, 0.05); + border: 1px solid var(--cyber-border); + border-left: 3px solid var(--cyber-primary); + padding: 15px; + display: grid; + grid-template-columns: auto 1fr auto; + gap: 15px; + align-items: center; + transition: all 0.3s ease; + position: relative; +} + +.cyber-list-item:hover { + background: rgba(0, 255, 65, 0.1); + border-color: var(--cyber-accent); + box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); + transform: translateX(3px); +} + +.cyber-list-item.active { + border-left-color: var(--cyber-accent); + background: rgba(0, 255, 255, 0.1); +} + +.cyber-list-item.offline { + border-left-color: var(--cyber-text-dim); + opacity: 0.6; +} + +.cyber-list-icon { + font-size: 32px; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 255, 65, 0.1); + border: 1px solid var(--cyber-border); + border-radius: 4px; + filter: drop-shadow(0 0 10px currentColor); +} + +.cyber-list-content { + display: flex; + flex-direction: column; + gap: 6px; +} + +.cyber-list-title { + font-size: 16px; + font-weight: bold; + color: var(--cyber-primary); + text-transform: uppercase; + letter-spacing: 1px; + display: flex; + align-items: center; + gap: 10px; +} + +.cyber-list-meta { + display: flex; + gap: 15px; + font-size: 11px; + color: var(--cyber-text-dim); +} + +.cyber-list-meta-item { + display: flex; + align-items: center; + gap: 5px; +} + +.cyber-list-actions { + display: flex; + gap: 8px; +} + +.cyber-btn { + background: rgba(0, 255, 65, 0.1); + border: 1px solid var(--cyber-border); + color: var(--cyber-text); + padding: 8px 12px; + font-family: inherit; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.cyber-btn:hover { + background: rgba(0, 255, 65, 0.2); + border-color: var(--cyber-accent); + box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); + color: var(--cyber-accent); +} + +.cyber-btn:active { + transform: scale(0.95); +} + +.cyber-btn.primary { + border-color: var(--cyber-primary); + color: var(--cyber-primary); +} + +.cyber-btn.danger { + border-color: var(--cyber-danger); + color: var(--cyber-danger); +} + +/* Badges */ +.cyber-badge { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 8px; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + border-radius: 2px; +} + +.cyber-badge.success { + background: rgba(0, 255, 65, 0.2); + border: 1px solid var(--cyber-primary); + color: var(--cyber-primary); +} + +.cyber-badge.warning { + background: rgba(255, 255, 0, 0.2); + border: 1px solid var(--cyber-warning); + color: var(--cyber-warning); +} + +.cyber-badge.danger { + background: rgba(255, 0, 128, 0.2); + border: 1px solid var(--cyber-danger); + color: var(--cyber-danger); +} + +.cyber-badge.info { + background: rgba(0, 255, 255, 0.2); + border: 1px solid var(--cyber-accent); + color: var(--cyber-accent); +} + +/* Glitch effect */ +@keyframes glitch { + 0% { + transform: translate(0); + } + 20% { + transform: translate(-2px, 2px); + } + 40% { + transform: translate(-2px, -2px); + } + 60% { + transform: translate(2px, 2px); + } + 80% { + transform: translate(2px, -2px); + } + 100% { + transform: translate(0); + } +} + +.cyber-glitch { + animation: glitch 0.3s infinite; +} + +/* Pulse animation */ +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.3; + } +} + +/* Shimmer animation */ +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +/* Scan lines effect */ +.cyber-scanlines { + position: relative; +} + +.cyber-scanlines::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.1) 0px, + transparent 1px, + transparent 2px, + rgba(0, 0, 0, 0.1) 3px + ); + pointer-events: none; + opacity: 0.3; +} + +/* Terminal text effect */ +.cyber-text-glow { + text-shadow: 0 0 10px currentColor, + 0 0 20px currentColor, + 0 0 30px currentColor; +} + +/* Status indicators */ +.cyber-status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + display: inline-block; + animation: pulse 2s infinite; +} + +.cyber-status-dot.online { + background: var(--cyber-primary); + box-shadow: 0 0 10px var(--cyber-primary); +} + +.cyber-status-dot.offline { + background: var(--cyber-text-dim); + animation: none; +} + +.cyber-status-dot.warning { + background: var(--cyber-warning); + box-shadow: 0 0 10px var(--cyber-warning); +} + +/* Scrollbar */ +.cyberpunk-mode ::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +.cyberpunk-mode ::-webkit-scrollbar-track { + background: rgba(0, 255, 65, 0.1); + border: 1px solid var(--cyber-border); +} + +.cyberpunk-mode ::-webkit-scrollbar-thumb { + background: var(--cyber-primary); + box-shadow: 0 0 10px var(--cyber-primary); +} + +.cyberpunk-mode ::-webkit-scrollbar-thumb:hover { + background: var(--cyber-accent); + box-shadow: 0 0 15px var(--cyber-accent); +} + +/* Header with ASCII art */ +.cyber-header { + background: var(--cyber-bg-secondary); + border: 2px solid var(--cyber-border); + border-radius: 4px; + padding: 20px; + margin-bottom: 20px; + box-shadow: 0 0 30px rgba(0, 255, 65, 0.3); +} + +.cyber-ascii-art { + font-family: monospace; + font-size: 10px; + line-height: 1.2; + color: var(--cyber-primary); + text-shadow: 0 0 5px var(--cyber-primary); + white-space: pre; + overflow-x: auto; +} + +.cyber-header-title { + font-size: 24px; + font-weight: bold; + color: var(--cyber-primary); + text-transform: uppercase; + letter-spacing: 3px; + text-shadow: 0 0 20px var(--cyber-primary); + margin-top: 10px; +} + +.cyber-header-subtitle { + font-size: 12px; + color: var(--cyber-text-dim); + text-transform: uppercase; + letter-spacing: 2px; + margin-top: 5px; +} diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/cyber-dashboard.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/cyber-dashboard.js new file mode 100644 index 00000000..c0e89551 --- /dev/null +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/cyber-dashboard.js @@ -0,0 +1,418 @@ +'use strict'; +'require view'; +'require secubox-admin.api as API'; +'require poll'; +'require ui'; + +return view.extend({ + load: function() { + return Promise.all([ + L.resolveDefault(API.getApps(), { apps: [] }), + L.resolveDefault(API.getModules(), { modules: {} }), + L.resolveDefault(API.getHealth(), {}), + L.resolveDefault(API.getAlerts(), { alerts: [] }), + L.resolveDefault(API.getCatalogSources(), { sources: [] }), + L.resolveDefault(API.checkUpdates(), { updates: [] }) + ]); + }, + + render: function(data) { + var apps = data[0].apps || []; + var modules = data[1].modules || {}; + var health = data[2] || {}; + var alerts = data[3].alerts || []; + var sources = data[4].sources || []; + var updates = data[5] || {}; + var self = this; + + // Calculate stats + var installedCount = 0; + var runningCount = 0; + apps.forEach(function(app) { + var status = API.getAppStatus(app, modules); + if (status.installed) installedCount++; + if (status.running) runningCount++; + }); + + var container = E('div', { 'class': 'cyberpunk-mode' }, [ + E('link', { 'rel': 'stylesheet', + 'href': L.resource('secubox-admin/cyberpunk.css') }), + + // ASCII Art Header + E('div', { 'class': 'cyber-header cyber-scanlines' }, [ + E('pre', { 'class': 'cyber-ascii-art' }, +`╔═══════════════════════════════════════════════════════════════╗ +║ ███████╗███████╗ ██████╗██╗ ██╗██████╗ ██████╗ ██╗ ██╗ ║ +║ ██╔════╝██╔════╝██╔════╝██║ ██║██╔══██╗██╔═══██╗╚██╗██╔╝ ║ +║ ███████╗█████╗ ██║ ██║ ██║██████╔╝██║ ██║ ╚███╔╝ ║ +║ ╚════██║██╔══╝ ██║ ██║ ██║██╔══██╗██║ ██║ ██╔██╗ ║ +║ ███████║███████╗╚██████╗╚██████╔╝██████╔╝╚██████╔╝██╔╝ ██╗ ║ +║ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝ ║ +╚═══════════════════════════════════════════════════════════════╝`), + E('div', { 'class': 'cyber-header-title cyber-text-glow' }, 'ADMIN CONTROL CENTER'), + E('div', { 'class': 'cyber-header-subtitle' }, 'System Status: ONLINE â€ĸ Access Level: ROOT') + ]), + + // Dual Console Layout + E('div', { 'class': 'cyber-dual-console' }, [ + // LEFT CONSOLE - Stats & Quick Actions + E('div', { 'class': 'cyber-console-left' }, [ + // System Stats + this.renderStatsPanel(apps.length, installedCount, runningCount, alerts.length, updates.total_updates_available || 0), + + // System Resources + this.renderSystemPanel(health), + + // Quick Actions + this.renderQuickActionsPanel(), + + // Catalog Sources Status + this.renderSourcesPanel(sources) + ]), + + // RIGHT CONSOLE - Main Content + E('div', { 'class': 'cyber-console-right' }, [ + // Active Apps List + this.renderAppsPanel(apps, modules), + + // System Alerts + this.renderAlertsPanel(alerts) + ]) + ]) + ]); + + // Auto-refresh + poll.add(L.bind(this.pollData, this), 10); + + return container; + }, + + renderStatsPanel: function(totalApps, installed, running, alertCount, updateCount) { + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, '📊 SYSTEM STATS'), + E('span', { 'class': 'cyber-panel-badge' }, 'LIVE') + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'class': 'cyber-stats-grid' }, [ + E('div', { 'class': 'cyber-stat-card' }, [ + E('div', { 'class': 'cyber-stat-icon' }, 'đŸ“Ļ'), + E('div', { 'class': 'cyber-stat-value' }, totalApps.toString()), + E('div', { 'class': 'cyber-stat-label' }, 'Total Apps') + ]), + E('div', { 'class': 'cyber-stat-card accent' }, [ + E('div', { 'class': 'cyber-stat-icon' }, '✅'), + E('div', { 'class': 'cyber-stat-value' }, installed.toString()), + E('div', { 'class': 'cyber-stat-label' }, 'Installed') + ]), + E('div', { 'class': 'cyber-stat-card' }, [ + E('div', { 'class': 'cyber-stat-icon' }, 'â–ļī¸'), + E('div', { 'class': 'cyber-stat-value' }, running.toString()), + E('div', { 'class': 'cyber-stat-label' }, 'Running') + ]), + E('div', { 'class': 'cyber-stat-card ' + (alertCount > 0 ? 'warning' : '') }, [ + E('div', { 'class': 'cyber-stat-icon' }, '⚠ī¸'), + E('div', { 'class': 'cyber-stat-value' }, alertCount.toString()), + E('div', { 'class': 'cyber-stat-label' }, 'Alerts') + ]), + E('div', { 'class': 'cyber-stat-card ' + (updateCount > 0 ? 'accent' : '') }, [ + E('div', { 'class': 'cyber-stat-icon' }, '🔄'), + E('div', { 'class': 'cyber-stat-value' }, updateCount.toString()), + E('div', { 'class': 'cyber-stat-label' }, 'Updates') + ]), + E('div', { 'class': 'cyber-stat-card' }, [ + E('div', { 'class': 'cyber-stat-icon' }, '🌐'), + E('div', { 'class': 'cyber-stat-value' }, '100%'), + E('div', { 'class': 'cyber-stat-label' }, 'Network') + ]) + ]) + ]) + ]); + }, + + renderSystemPanel: function(health) { + var cpu = health.cpu || 0; + var memory = health.memory || 0; + var disk = health.disk || 0; + + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, 'đŸ’ģ SYSTEM RESOURCES') + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'class': 'cyber-system-status' }, [ + // CPU + E('div', { 'class': 'cyber-metric' }, [ + E('div', { 'class': 'cyber-metric-header' }, [ + E('div', { 'class': 'cyber-metric-label' }, [ + E('span', {}, '⚡'), + E('span', {}, 'CPU Load') + ]), + E('div', { 'class': 'cyber-metric-value' }, cpu + '%') + ]), + E('div', { 'class': 'cyber-progress-bar' }, [ + E('div', { + 'class': 'cyber-progress-fill' + (cpu > 80 ? ' danger' : cpu > 60 ? ' warning' : ''), + 'style': 'width: ' + cpu + '%' + }) + ]) + ]), + + // Memory + E('div', { 'class': 'cyber-metric' }, [ + E('div', { 'class': 'cyber-metric-header' }, [ + E('div', { 'class': 'cyber-metric-label' }, [ + E('span', {}, '🧠'), + E('span', {}, 'Memory Usage') + ]), + E('div', { 'class': 'cyber-metric-value' }, memory + '%') + ]), + E('div', { 'class': 'cyber-progress-bar' }, [ + E('div', { + 'class': 'cyber-progress-fill' + (memory > 80 ? ' danger' : memory > 60 ? ' warning' : ''), + 'style': 'width: ' + memory + '%' + }) + ]) + ]), + + // Disk + E('div', { 'class': 'cyber-metric' }, [ + E('div', { 'class': 'cyber-metric-header' }, [ + E('div', { 'class': 'cyber-metric-label' }, [ + E('span', {}, '💾'), + E('span', {}, 'Disk Usage') + ]), + E('div', { 'class': 'cyber-metric-value' }, disk + '%') + ]), + E('div', { 'class': 'cyber-progress-bar' }, [ + E('div', { + 'class': 'cyber-progress-fill' + (disk > 80 ? ' danger' : disk > 60 ? ' warning' : ''), + 'style': 'width: ' + disk + '%' + }) + ]) + ]) + ]) + ]) + ]); + }, + + renderQuickActionsPanel: function() { + var self = this; + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, '⚡ QUICK ACTIONS') + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'class': 'cyber-quick-actions' }, [ + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + window.location = L.url('admin/secubox/admin/apps'); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, 'đŸ“Ļ'), + E('span', { 'class': 'cyber-action-label' }, 'Manage Apps'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]), + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + window.location = L.url('admin/secubox/admin/updates'); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, '🔄'), + E('span', { 'class': 'cyber-action-label' }, 'Check Updates'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]), + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + window.location = L.url('admin/secubox/admin/catalog-sources'); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, '🌐'), + E('span', { 'class': 'cyber-action-label' }, 'Catalog Sources'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]), + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + window.location = L.url('admin/secubox/admin/health'); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, '💊'), + E('span', { 'class': 'cyber-action-label' }, 'System Health'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]), + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + window.location = L.url('admin/secubox/admin/logs'); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, '📋'), + E('span', { 'class': 'cyber-action-label' }, 'View Logs'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]), + E('button', { + 'class': 'cyber-action-btn', + 'click': function() { + self.syncCatalogs(); + } + }, [ + E('span', { 'class': 'cyber-action-icon' }, '🔃'), + E('span', { 'class': 'cyber-action-label' }, 'Sync Catalogs'), + E('span', { 'class': 'cyber-action-arrow' }, '▸') + ]) + ]) + ]) + ]); + }, + + renderSourcesPanel: function(sources) { + var activeSources = sources.filter(function(s) { return s.enabled; }); + var onlineSources = sources.filter(function(s) { return s.status === 'online' || s.status === 'available'; }); + + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, '🛰ī¸ CATALOG SOURCES'), + E('span', { 'class': 'cyber-panel-badge' }, onlineSources.length + '/' + sources.length) + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, + sources.length > 0 ? + sources.map(function(source) { + var isOnline = source.status === 'online' || source.status === 'available'; + return E('div', { + 'style': 'display: flex; justify-content: space-between; align-items: center; padding: 8px; background: rgba(0,255,65,0.05); border-left: 2px solid ' + (isOnline ? 'var(--cyber-primary)' : 'var(--cyber-text-dim)') + }, [ + E('div', { 'style': 'display: flex; align-items: center; gap: 8px;' }, [ + E('span', { 'class': 'cyber-status-dot ' + (isOnline ? 'online' : 'offline') }), + E('span', { 'style': 'font-size: 12px; font-weight: bold; text-transform: uppercase;' }, source.name) + ]), + E('span', { + 'class': 'cyber-badge ' + (isOnline ? 'success' : 'warning'), + 'style': 'font-size: 9px;' + }, source.status || 'unknown') + ]); + }) : + E('div', { 'style': 'text-align: center; color: var(--cyber-text-dim); padding: 20px;' }, 'No sources configured') + ) + ]) + ]); + }, + + renderAppsPanel: function(apps, modules) { + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, '🎮 ACTIVE APPLICATIONS'), + E('span', { 'class': 'cyber-panel-badge' }, apps.length) + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'class': 'cyber-list' }, + apps.length > 0 ? + apps.slice(0, 6).map(function(app) { + var status = API.getAppStatus(app, modules); + return E('div', { + 'class': 'cyber-list-item' + (status.running ? ' active' : status.installed ? '' : ' offline') + }, [ + E('div', { 'class': 'cyber-list-icon' }, app.icon || 'đŸ“Ļ'), + E('div', { 'class': 'cyber-list-content' }, [ + E('div', { 'class': 'cyber-list-title' }, [ + app.name, + status.running ? E('span', { 'class': 'cyber-badge success' }, [ + E('span', { 'class': 'cyber-status-dot online' }), + E('span', {}, 'RUNNING') + ]) : status.installed ? E('span', { 'class': 'cyber-badge info' }, 'INSTALLED') : null + ]), + E('div', { 'class': 'cyber-list-meta' }, [ + E('div', { 'class': 'cyber-list-meta-item' }, [ + E('span', {}, '📁'), + E('span', {}, app.category || 'unknown') + ]), + E('div', { 'class': 'cyber-list-meta-item' }, [ + E('span', {}, '🏷ī¸'), + E('span', {}, app.version || 'N/A') + ]) + ]) + ]), + E('div', { 'class': 'cyber-list-actions' }, [ + status.running ? + E('button', { 'class': 'cyber-btn danger' }, '⏚ Stop') : + status.installed ? + E('button', { 'class': 'cyber-btn primary' }, 'â–ļī¸ Start') : + E('button', { 'class': 'cyber-btn' }, 'âŦ‡ī¸ Install') + ]) + ]); + }) : + E('div', { 'style': 'text-align: center; color: var(--cyber-text-dim); padding: 40px;' }, 'No applications found') + ) + ]) + ]); + }, + + renderAlertsPanel: function(alerts) { + return E('div', { 'class': 'cyber-panel cyber-scanlines' }, [ + E('div', { 'class': 'cyber-panel-header' }, [ + E('div', { 'class': 'cyber-panel-title' }, '⚠ī¸ SYSTEM ALERTS'), + E('span', { 'class': 'cyber-panel-badge' }, alerts.length) + ]), + E('div', { 'class': 'cyber-panel-body' }, [ + E('div', { 'class': 'cyber-list' }, + alerts.length > 0 ? + alerts.slice(0, 3).map(function(alert) { + var severityClass = alert.severity === 'error' ? 'danger' : alert.severity === 'warning' ? 'warning' : 'info'; + return E('div', { 'class': 'cyber-list-item' }, [ + E('div', { 'class': 'cyber-list-icon' }, + alert.severity === 'error' ? '🚨' : alert.severity === 'warning' ? '⚠ī¸' : 'ℹī¸'), + E('div', { 'class': 'cyber-list-content' }, [ + E('div', { 'class': 'cyber-list-title' }, [ + alert.message, + E('span', { 'class': 'cyber-badge ' + severityClass }, alert.severity.toUpperCase()) + ]) + ]) + ]); + }) : + E('div', { 'style': 'text-align: center; color: var(--cyber-primary); padding: 40px;' }, [ + E('div', { 'style': 'font-size: 48px; margin-bottom: 10px;' }, '✅'), + E('div', { 'style': 'font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;' }, 'ALL SYSTEMS NOMINAL') + ]) + ) + ]) + ]); + }, + + syncCatalogs: function() { + ui.showModal(_('Syncing'), [ + E('p', { 'class': 'spinning' }, _('Synchronizing catalogs...')) + ]); + + API.syncCatalog(null).then(function(result) { + ui.hideModal(); + if (result.success) { + ui.addNotification(null, E('p', _('Catalogs synced successfully')), 'success'); + window.location.reload(); + } else { + ui.addNotification(null, E('p', _('Sync failed')), 'error'); + } + }).catch(function(err) { + ui.hideModal(); + ui.addNotification(null, E('p', _('Error: ' + err.message)), 'error'); + }); + }, + + pollData: function() { + // Auto-refresh data every 10 seconds + return Promise.all([ + API.getHealth(), + API.getModules(), + API.getAlerts() + ]).then(function(data) { + // Update UI without full reload + }); + }, + + handleSaveApply: null, + handleSave: null, + handleReset: null +}); diff --git a/package/secubox/luci-app-secubox-admin/root/usr/share/luci/menu.d/luci-app-secubox-admin.json b/package/secubox/luci-app-secubox-admin/root/usr/share/luci/menu.d/luci-app-secubox-admin.json index 99a8a417..e389339f 100644 --- a/package/secubox/luci-app-secubox-admin/root/usr/share/luci/menu.d/luci-app-secubox-admin.json +++ b/package/secubox/luci-app-secubox-admin/root/usr/share/luci/menu.d/luci-app-secubox-admin.json @@ -14,6 +14,14 @@ "path": "secubox-admin/dashboard" } }, + "admin/secubox/admin/cyber-dashboard": { + "title": "🔮 Cyber Console", + "order": 15, + "action": { + "type": "view", + "path": "secubox-admin/cyber-dashboard" + } + }, "admin/secubox/admin/apps": { "title": "Apps Manager", "order": 20,