From 4b4d1be2f5d0cb887c08926b421e6f54fe961efa Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Fri, 9 Jan 2026 16:24:20 +0100 Subject: [PATCH] feat: Add SecuBox portal header and navigation to luci-app-secubox-admin - Added SecuBox portal header (SbHeader) to all 9 admin views - Added internal ADMIN_NAV navigation bar with dark theme styling - Added Theme.init() for consistent theming across views - Updated wrapper pattern for proper header/nav/content structure Views updated: - dashboard.js (Control Panel) - cyber-dashboard.js (Cyber Console) - apps.js (Apps Manager) - updates.js (Updates) - catalog-sources.js (Catalog) - health.js (Health) - logs.js (Logs) - settings.js (Settings) - advanced-settings.js (Advanced Settings) Co-Authored-By: Claude Opus 4.5 --- .../view/secubox-admin/advanced-settings.js | 42 ++++++++++++++++++- .../resources/view/secubox-admin/apps.js | 41 +++++++++++++++++- .../view/secubox-admin/catalog-sources.js | 41 +++++++++++++++++- .../view/secubox-admin/cyber-dashboard.js | 41 +++++++++++++++++- .../resources/view/secubox-admin/dashboard.js | 41 +++++++++++++++++- .../resources/view/secubox-admin/health.js | 41 +++++++++++++++++- .../resources/view/secubox-admin/logs.js | 41 +++++++++++++++++- .../resources/view/secubox-admin/settings.js | 41 +++++++++++++++++- .../resources/view/secubox-admin/updates.js | 41 +++++++++++++++++- 9 files changed, 361 insertions(+), 9 deletions(-) diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/advanced-settings.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/advanced-settings.js index 5cc1fde3..3789fb7f 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/advanced-settings.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/advanced-settings.js @@ -5,6 +5,42 @@ 'require uci'; 'require rpc'; 'require form'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' }, + { id: 'advanced', icon: '🔧', label: 'Advanced' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} var callGetWanAccess = rpc.declare({ object: 'luci.secubox', @@ -91,7 +127,11 @@ return view.extend({ ]) ]); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('advanced')); + wrapper.appendChild(container); + return wrapper; }, renderWanAccessPanel: function(wanAccess) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/apps.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/apps.js index 89178e7d..8d9d08f5 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/apps.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/apps.js @@ -5,6 +5,41 @@ 'require secubox-admin.data-utils as DataUtils'; 'require ui'; 'require form'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -201,7 +236,11 @@ return view.extend({ ) ]); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('apps')); + wrapper.appendChild(container); + return wrapper; }, renderAppCard: function(app, status, updateInfo) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/catalog-sources.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/catalog-sources.js index 02dcaaa9..ab882246 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/catalog-sources.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/catalog-sources.js @@ -5,6 +5,41 @@ 'require secubox-admin.data-utils as DataUtils'; 'require ui'; 'require poll'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -193,7 +228,11 @@ return view.extend({ }); }, 30); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('catalog-sources')); + wrapper.appendChild(container); + return wrapper; }, getDefaultSources: function() { 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 index fecf948a..65b7eff1 100644 --- 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 @@ -4,6 +4,41 @@ 'require secubox-admin.data-utils as DataUtils'; 'require poll'; 'require ui'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -79,7 +114,11 @@ return view.extend({ // Auto-refresh poll.add(L.bind(this.pollData, this), 10); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('cyber-dashboard')); + wrapper.appendChild(container); + return wrapper; }, renderStatsPanel: function(totalApps, installed, running, alertCount, updateCount) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/dashboard.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/dashboard.js index b342a9ce..3e1673f2 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/dashboard.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/dashboard.js @@ -6,6 +6,41 @@ 'require secubox-admin.data-utils as DataUtils'; 'require poll'; 'require ui'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ widgetRenderer: null, @@ -76,7 +111,11 @@ return view.extend({ self.initializeWidgets(apps); }); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('dashboard')); + wrapper.appendChild(container); + return wrapper; }, renderHealthSummary: function(health) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/health.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/health.js index 0f8b332a..42ee8d53 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/health.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/health.js @@ -3,6 +3,41 @@ 'require secubox-admin.api as API'; 'require secubox-admin.data-utils as DataUtils'; 'require poll'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -55,7 +90,11 @@ return view.extend({ // Auto-refresh every 5 seconds poll.add(L.bind(this.pollData, this), 5); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('health')); + wrapper.appendChild(container); + return wrapper; }, renderMetricCard: function(label, value, unit, type) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/logs.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/logs.js index 29cda8a6..c6fbb3de 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/logs.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/logs.js @@ -2,6 +2,41 @@ 'require view'; 'require secubox-admin.api as API'; 'require poll'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ selectedService: 'system', @@ -58,7 +93,11 @@ return view.extend({ // Auto-refresh every 10 seconds poll.add(L.bind(this.pollLogs, this), 10); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('logs')); + wrapper.appendChild(container); + return wrapper; }, changeService: function(service) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/settings.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/settings.js index 446d16c3..9371c7b9 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/settings.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/settings.js @@ -4,6 +4,41 @@ 'require secubox-admin.components as Components'; 'require secubox-admin.data-utils as DataUtils'; 'require ui'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -46,7 +81,11 @@ return view.extend({ ) ]); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('settings')); + wrapper.appendChild(container); + return wrapper; }, renderAppSettings: function(app, modules) { diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js index 3881b188..764e9886 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/view/secubox-admin/updates.js @@ -5,6 +5,41 @@ 'require secubox-admin.data-utils as DataUtils'; 'require ui'; 'require poll'; +'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; + +var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || + (document.documentElement && document.documentElement.getAttribute('lang')) || + (navigator.language ? navigator.language.split('-')[0] : 'en'); +Theme.init({ language: lang }); + +var ADMIN_NAV = [ + { id: 'dashboard', icon: '🎛️', label: 'Control Panel' }, + { id: 'cyber-dashboard', icon: '🔮', label: 'Cyber Console' }, + { id: 'apps', icon: '📦', label: 'Apps Manager' }, + { id: 'updates', icon: '🔄', label: 'Updates' }, + { id: 'catalog-sources', icon: '📚', label: 'Catalog' }, + { id: 'health', icon: '💚', label: 'Health' }, + { id: 'logs', icon: '📋', label: 'Logs' }, + { id: 'settings', icon: '⚙️', label: 'Settings' } +]; + +function renderAdminNav(activeId) { + return E('div', { + 'class': 'sb-app-nav', + 'style': 'display:flex;gap:8px;margin-bottom:20px;padding:12px 16px;background:#141419;border:1px solid rgba(255,255,255,0.08);border-radius:12px;flex-wrap:wrap;' + }, ADMIN_NAV.map(function(item) { + var isActive = activeId === item.id; + return E('a', { + 'href': L.url('admin', 'secubox', 'admin', item.id), + 'style': 'display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;' + + (isActive ? 'background:linear-gradient(135deg,#667eea,#764ba2);color:white;' : 'color:#a0a0b0;background:transparent;') + }, [ + E('span', {}, item.icon), + E('span', {}, _(item.label)) + ]); + })); +} return view.extend({ load: function() { @@ -169,7 +204,11 @@ return view.extend({ }); }, 60); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(renderAdminNav('updates')); + wrapper.appendChild(container); + return wrapper; }, renderUpdateCard: function(update, app) {