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 <noreply@anthropic.com>

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) {

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) {

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() {

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) {

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) {

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) {

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) {

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) {

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) {