Advanced pages. Model-driven controls.

web/src/router/pages/advanced/CrowdsecPage.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from '../../../components';
+import { CrowdsecSubsystem } from '../../../components/advanced';
+
+export function CrowdsecPage() {
+  return (
+    <ErrorBoundary>
+      <CrowdsecSubsystem />
+    </ErrorBoundary>
+  );
+}

web/src/router/pages/advanced/DnsmasqPage.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from '../../../components';
+import { DnsmasqSubsystem } from '../../../components/advanced';
+
+export function DnsmasqPage() {
+  return (
+    <ErrorBoundary>
+      <DnsmasqSubsystem />
+    </ErrorBoundary>
+  );
+}

web/src/router/pages/advanced/HaproxyPage.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from '../../../components';
+import { HaproxySubsystem } from '../../../components/advanced';
+
+export function HaproxyPage() {
+  return (
+    <ErrorBoundary>
+      <HaproxySubsystem />
+    </ErrorBoundary>
+  );
+}

web/src/router/pages/advanced/NftablesPage.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from '../../../components';
+import { NftablesSubsystem } from '../../../components/advanced';
+
+export function NftablesPage() {
+  return (
+    <ErrorBoundary>
+      <NftablesSubsystem />
+    </ErrorBoundary>
+  );
+}

web/src/router/pages/advanced/WireguardPage.tsx

@@ -0,0 +1,10 @@
+import { ErrorBoundary } from '../../../components';
+import { WireguardSubsystem } from '../../../components/advanced';
+
+export function WireguardPage() {
+  return (
+    <ErrorBoundary>
+      <WireguardSubsystem />
+    </ErrorBoundary>
+  );
+}

web/src/router/pages/advanced/index.ts

@@ -0,0 +1,5 @@
+export { HaproxyPage } from './HaproxyPage';
+export { DnsmasqPage } from './DnsmasqPage';
+export { NftablesPage } from './NftablesPage';
+export { WireguardPage } from './WireguardPage';
+export { CrowdsecPage } from './CrowdsecPage';

web/src/router/routes.tsx

@@ -8,6 +8,10 @@ import { FirewallPage } from './pages/FirewallPage';
 import { VpnPage } from './pages/VpnPage';
 import { CrowdSecPage } from './pages/CrowdSecPage';
 import { DhcpPage } from './pages/DhcpPage';
+import {
+  HaproxyPage, DnsmasqPage, NftablesPage, WireguardPage,
+  CrowdsecPage as CrowdsecAdvancedPage,
+} from './pages/advanced';
 
 export const routes: RouteObject[] = [
   {
@@ -24,6 +28,11 @@ export const routes: RouteObject[] = [
       { path: 'vpn', element: <VpnPage /> },
       { path: 'crowdsec', element: <CrowdSecPage /> },
       { path: 'dhcp', element: <DhcpPage /> },
+      { path: 'advanced/haproxy', element: <HaproxyPage /> },
+      { path: 'advanced/dnsmasq', element: <DnsmasqPage /> },
+      { path: 'advanced/nftables', element: <NftablesPage /> },
+      { path: 'advanced/wireguard', element: <WireguardPage /> },
+      { path: 'advanced/crowdsec', element: <CrowdsecAdvancedPage /> },
     ],
   },
   {