feat(ui): (a) Backends + Routing-Rules + Settings pages + Sidebar

CRUD-Pages analog Domains:
* Backends: AntD Table + Modal-Form mit name, scheme, address, port,
  health_check_path, active. TanStack-Query gegen /api/v1/backends.
* RoutingRules: Table mit Domain-Name- und Backend-Label-Resolution,
  Modal mit Select-Pickern für Domain + Backend, Path-Prefix,
  Priority, Active. Drei parallele Queries (rules, domains, backends)
  liefern die Listen.
* Settings: read-only Descriptions-Cards mit /system/health und
  /setup/status. Editable Werte folgen später.

Sidebar erweitert um Backends, Routing-Rules, Settings (mit AntD-
Icons). i18n de/en für alle drei neuen Seiten.

bun run build + npx tsc -b strict (0 errors). Live-Smoke gegen API:
SPA-Routes /backends, /routing-rules, /settings antworten 200 mit
index.html (NoRoute fallback wirkt).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

management-ui/src/App.tsx

@@ -14,6 +14,9 @@ const LoginPage = lazy(() => import('./pages/Login'))
 const SetupPage = lazy(() => import('./pages/Setup'))
 const DashboardPage = lazy(() => import('./pages/Dashboard'))
 const DomainsPage = lazy(() => import('./pages/Domains'))
+const BackendsPage = lazy(() => import('./pages/Backends'))
+const RoutingRulesPage = lazy(() => import('./pages/RoutingRules'))
+const SettingsPage = lazy(() => import('./pages/Settings'))
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -74,6 +77,9 @@ export default function App() {
                   <Route path="/" element={<Navigate to="/dashboard" replace />} />
                   <Route path="/dashboard" element={<DashboardPage />} />
                   <Route path="/domains" element={<DomainsPage />} />
+                  <Route path="/backends" element={<BackendsPage />} />
+                  <Route path="/routing-rules" element={<RoutingRulesPage />} />
+                  <Route path="/settings" element={<SettingsPage />} />
                 </Route>
 
                 <Route path="*" element={<Navigate to="/dashboard" replace />} />

management-ui/src/components/Layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { DashboardOutlined, GlobalOutlined } from '@ant-design/icons'
+import { BranchesOutlined, DashboardOutlined, DatabaseOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons'
 import { Menu, Typography } from 'antd'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
@@ -11,6 +11,9 @@ export default function Sidebar() {
   const items = [
     { key: '/dashboard', icon: <DashboardOutlined />, label: t('nav.dashboard') },
     { key: '/domains', icon: <GlobalOutlined />, label: t('nav.domains') },
+    { key: '/backends', icon: <DatabaseOutlined />, label: t('nav.backends') },
+    { key: '/routing-rules', icon: <BranchesOutlined />, label: t('nav.routing') },
+    { key: '/settings', icon: <SettingOutlined />, label: t('nav.settings') },
   ]
 
   return (

management-ui/src/i18n/locales/de/common.json

@@ -55,6 +55,45 @@
     "delete": "Löschen",
     "deleteConfirm": "Domain {{name}} wirklich löschen?"
   },
+  "backends": {
+    "title": "Backends",
+    "addBackend": "Backend hinzufügen",
+    "editBackend": "Backend bearbeiten",
+    "name": "Name",
+    "scheme": "Schema",
+    "address": "Adresse",
+    "port": "Port",
+    "target": "Ziel",
+    "healthCheck": "Health-Check-Pfad",
+    "active": "Aktiv",
+    "actions": "Aktionen",
+    "deleteConfirm": "Backend {{name}} wirklich löschen?"
+  },
+  "routing": {
+    "title": "Routing-Regeln",
+    "addRule": "Regel hinzufügen",
+    "editRule": "Regel bearbeiten",
+    "domain": "Domain",
+    "pathPrefix": "Pfad-Präfix",
+    "backend": "Backend",
+    "priority": "Priorität",
+    "active": "Aktiv",
+    "actions": "Aktionen",
+    "selectDomain": "Domain wählen",
+    "selectBackend": "Backend wählen",
+    "deleteConfirm": "Diese Routing-Regel wirklich löschen?"
+  },
+  "settings": {
+    "title": "Einstellungen",
+    "intro": "System-Information und Setup-Status. Bearbeitbare Werte folgen in einem späteren Release.",
+    "systemInfo": "System",
+    "version": "Version",
+    "status": "Status",
+    "setupInfo": "Setup",
+    "adminEmail": "Admin-E-Mail",
+    "fqdn": "FQDN",
+    "setupCompleted": "Setup abgeschlossen"
+  },
   "update": {
     "available": "Update verfügbar: {{pkg}} {{installed}} → {{available}}",
     "applyNow": "Jetzt aktualisieren",
@@ -67,6 +106,8 @@
     "save": "Speichern",
     "cancel": "Abbrechen",
     "loading": "Lädt …",
-    "error": "Fehler"
+    "error": "Fehler",
+    "edit": "Bearbeiten",
+    "delete": "Löschen"
   }
 }

management-ui/src/i18n/locales/en/common.json

@@ -55,6 +55,45 @@
     "delete": "Delete",
     "deleteConfirm": "Really delete domain {{name}}?"
   },
+  "backends": {
+    "title": "Backends",
+    "addBackend": "Add backend",
+    "editBackend": "Edit backend",
+    "name": "Name",
+    "scheme": "Scheme",
+    "address": "Address",
+    "port": "Port",
+    "target": "Target",
+    "healthCheck": "Health check path",
+    "active": "Active",
+    "actions": "Actions",
+    "deleteConfirm": "Really delete backend {{name}}?"
+  },
+  "routing": {
+    "title": "Routing rules",
+    "addRule": "Add rule",
+    "editRule": "Edit rule",
+    "domain": "Domain",
+    "pathPrefix": "Path prefix",
+    "backend": "Backend",
+    "priority": "Priority",
+    "active": "Active",
+    "actions": "Actions",
+    "selectDomain": "Select domain",
+    "selectBackend": "Select backend",
+    "deleteConfirm": "Really delete this routing rule?"
+  },
+  "settings": {
+    "title": "Settings",
+    "intro": "System information and setup status. Editable values come in a later release.",
+    "systemInfo": "System",
+    "version": "Version",
+    "status": "Status",
+    "setupInfo": "Setup",
+    "adminEmail": "Admin email",
+    "fqdn": "FQDN",
+    "setupCompleted": "Setup completed"
+  },
   "update": {
     "available": "Update available: {{pkg}} {{installed}} → {{available}}",
     "applyNow": "Apply now",
@@ -67,6 +106,8 @@
     "save": "Save",
     "cancel": "Cancel",
     "loading": "Loading …",
-    "error": "Error"
+    "error": "Error",
+    "edit": "Edit",
+    "delete": "Delete"
   }
 }

management-ui/src/pages/Backends/index.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+
+import apiClient, { isEnvelope } from '../../api/client'
+
+interface Backend {
+  id: number
+  name: string
+  scheme: string
+  address: string
+  port: number
+  health_check_path?: string | null
+  active: boolean
+  created_at: string
+  updated_at: string
+}
+
+interface BackendFormValues {
+  name: string
+  scheme: 'http' | 'https'
+  address: string
+  port: number
+  health_check_path?: string
+  active: boolean
+}
+
+async function listBackends(): Promise<Backend[]> {
+  const r = await apiClient.get('/backends')
+  if (!isEnvelope(r.data)) return []
+  const payload = r.data.data as { backends?: Backend[] }
+  return payload.backends ?? []
+}
+
+export default function BackendsPage() {
+  const { t } = useTranslation()
+  const qc = useQueryClient()
+
+  const { data, isLoading } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
+
+  const [editing, setEditing] = useState<Backend | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [form] = Form.useForm<BackendFormValues>()
+
+  const create = useMutation({
+    mutationFn: async (v: BackendFormValues) => {
+      await apiClient.post('/backends', v)
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setCreating(false)
+      form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['backends'] })
+    },
+  })
+
+  const update = useMutation({
+    mutationFn: async ({ id, v }: { id: number; v: BackendFormValues }) => {
+      await apiClient.put(`/backends/${id}`, v)
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setEditing(null)
+      form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['backends'] })
+    },
+  })
+
+  const del = useMutation({
+    mutationFn: async (id: number) => { await apiClient.delete(`/backends/${id}`) },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['backends'] }) },
+  })
+
+  const columns: ColumnsType<Backend> = [
+    { title: t('backends.name'), dataIndex: 'name', key: 'name' },
+    { title: t('backends.scheme'), dataIndex: 'scheme', key: 'scheme' },
+    {
+      title: t('backends.target'), key: 'target',
+      render: (_, row) => `${row.address}:${row.port}`,
+    },
+    { title: t('backends.healthCheck'), dataIndex: 'health_check_path', key: 'hc', render: (v?: string) => v ?? '—' },
+    { title: t('backends.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
+    {
+      title: t('backends.actions'), key: 'actions',
+      render: (_, row) => (
+        <Space>
+          <Button size="small" onClick={() => {
+            setEditing(row)
+            form.setFieldsValue({
+              name: row.name,
+              scheme: row.scheme as 'http' | 'https',
+              address: row.address,
+              port: row.port,
+              health_check_path: row.health_check_path ?? undefined,
+              active: row.active,
+            })
+          }}>{t('common.edit')}</Button>
+          <Popconfirm
+            title={t('backends.deleteConfirm', { name: row.name })}
+            onConfirm={() => del.mutate(row.id)}
+          >
+            <Button size="small" danger>{t('common.delete')}</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <Typography.Title level={3}>{t('backends.title')}</Typography.Title>
+      <Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
+        setCreating(true)
+        form.resetFields()
+        form.setFieldsValue({ scheme: 'http', port: 8080, active: true })
+      }}>
+        {t('backends.addBackend')}
+      </Button>
+      <Table rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns} pagination={false} />
+      <Modal
+        title={editing ? t('backends.editBackend') : t('backends.addBackend')}
+        open={editing !== null || creating}
+        onCancel={() => { setEditing(null); setCreating(false) }}
+        onOk={() => { void form.submit() }}
+        confirmLoading={create.isPending || update.isPending}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={(v) => {
+            if (editing) update.mutate({ id: editing.id, v })
+            else create.mutate(v)
+          }}
+        >
+          <Form.Item label={t('backends.name')} name="name" rules={[{ required: true }]}>
+            <Input placeholder="upstream-app" />
+          </Form.Item>
+          <Form.Item label={t('backends.scheme')} name="scheme" rules={[{ required: true }]}>
+            <Select options={[{ value: 'http', label: 'http' }, { value: 'https', label: 'https' }]} />
+          </Form.Item>
+          <Form.Item label={t('backends.address')} name="address" rules={[{ required: true }]}>
+            <Input placeholder="10.0.0.10" />
+          </Form.Item>
+          <Form.Item label={t('backends.port')} name="port" rules={[{ required: true }]}>
+            <InputNumber min={1} max={65535} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label={t('backends.healthCheck')} name="health_check_path">
+            <Input placeholder="/health" />
+          </Form.Item>
+          <Form.Item label={t('backends.active')} name="active" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}

management-ui/src/pages/RoutingRules/index.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, Typography, message } from 'antd'
+import type { ColumnsType } from 'antd/es/table'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+
+import apiClient, { isEnvelope } from '../../api/client'
+
+interface RoutingRule {
+  id: number
+  domain_id: number
+  path_prefix: string
+  backend_id: number
+  priority: number
+  active: boolean
+  created_at: string
+  updated_at: string
+}
+
+interface RuleFormValues {
+  domain_id: number
+  path_prefix: string
+  backend_id: number
+  priority: number
+  active: boolean
+}
+
+interface Domain { id: number; name: string }
+interface Backend { id: number; name: string; address: string; port: number }
+
+async function listRules(): Promise<RoutingRule[]> {
+  const r = await apiClient.get('/routing-rules')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { routing_rules?: RoutingRule[] }).routing_rules ?? []
+}
+async function listDomains(): Promise<Domain[]> {
+  const r = await apiClient.get('/domains')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { domains?: Domain[] }).domains ?? []
+}
+async function listBackends(): Promise<Backend[]> {
+  const r = await apiClient.get('/backends')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { backends?: Backend[] }).backends ?? []
+}
+
+export default function RoutingRulesPage() {
+  const { t } = useTranslation()
+  const qc = useQueryClient()
+
+  const { data: rules, isLoading } = useQuery({ queryKey: ['routing-rules'], queryFn: listRules })
+  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
+  const { data: backends } = useQuery({ queryKey: ['backends'], queryFn: listBackends })
+
+  const domainName = (id: number) => domains?.find((d) => d.id === id)?.name ?? `#${id}`
+  const backendLabel = (id: number) => {
+    const b = backends?.find((x) => x.id === id)
+    return b ? `${b.name} (${b.address}:${b.port})` : `#${id}`
+  }
+
+  const [editing, setEditing] = useState<RoutingRule | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [form] = Form.useForm<RuleFormValues>()
+
+  const create = useMutation({
+    mutationFn: async (v: RuleFormValues) => { await apiClient.post('/routing-rules', v) },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setCreating(false)
+      form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['routing-rules'] })
+    },
+  })
+  const update = useMutation({
+    mutationFn: async ({ id, v }: { id: number; v: RuleFormValues }) => {
+      await apiClient.put(`/routing-rules/${id}`, v)
+    },
+    onSuccess: () => {
+      message.success(t('common.save'))
+      setEditing(null)
+      form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['routing-rules'] })
+    },
+  })
+  const del = useMutation({
+    mutationFn: async (id: number) => { await apiClient.delete(`/routing-rules/${id}`) },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['routing-rules'] }) },
+  })
+
+  const columns: ColumnsType<RoutingRule> = [
+    { title: t('routing.domain'), dataIndex: 'domain_id', key: 'domain', render: (id: number) => domainName(id) },
+    { title: t('routing.pathPrefix'), dataIndex: 'path_prefix', key: 'path' },
+    { title: t('routing.backend'), dataIndex: 'backend_id', key: 'backend', render: (id: number) => backendLabel(id) },
+    { title: t('routing.priority'), dataIndex: 'priority', key: 'priority' },
+    { title: t('routing.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => v ? t('common.yes') : t('common.no') },
+    {
+      title: t('routing.actions'), key: 'actions',
+      render: (_, row) => (
+        <Space>
+          <Button size="small" onClick={() => {
+            setEditing(row)
+            form.setFieldsValue({
+              domain_id: row.domain_id,
+              path_prefix: row.path_prefix,
+              backend_id: row.backend_id,
+              priority: row.priority,
+              active: row.active,
+            })
+          }}>{t('common.edit')}</Button>
+          <Popconfirm
+            title={t('routing.deleteConfirm')}
+            onConfirm={() => del.mutate(row.id)}
+          >
+            <Button size="small" danger>{t('common.delete')}</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <Typography.Title level={3}>{t('routing.title')}</Typography.Title>
+      <Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
+        setCreating(true)
+        form.resetFields()
+        form.setFieldsValue({ priority: 100, path_prefix: '/', active: true })
+      }}>
+        {t('routing.addRule')}
+      </Button>
+      <Table rowKey="id" loading={isLoading} dataSource={rules ?? []} columns={columns} pagination={false} />
+      <Modal
+        title={editing ? t('routing.editRule') : t('routing.addRule')}
+        open={editing !== null || creating}
+        onCancel={() => { setEditing(null); setCreating(false) }}
+        onOk={() => { void form.submit() }}
+        confirmLoading={create.isPending || update.isPending}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={(v) => {
+            if (editing) update.mutate({ id: editing.id, v })
+            else create.mutate(v)
+          }}
+        >
+          <Form.Item label={t('routing.domain')} name="domain_id" rules={[{ required: true }]}>
+            <Select
+              options={(domains ?? []).map((d) => ({ value: d.id, label: d.name }))}
+              placeholder={t('routing.selectDomain')}
+            />
+          </Form.Item>
+          <Form.Item label={t('routing.pathPrefix')} name="path_prefix" rules={[{ required: true }]}>
+            <Input placeholder="/" />
+          </Form.Item>
+          <Form.Item label={t('routing.backend')} name="backend_id" rules={[{ required: true }]}>
+            <Select
+              options={(backends ?? []).map((b) => ({ value: b.id, label: `${b.name} (${b.address}:${b.port})` }))}
+              placeholder={t('routing.selectBackend')}
+            />
+          </Form.Item>
+          <Form.Item label={t('routing.priority')} name="priority" rules={[{ required: true }]}>
+            <InputNumber style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label={t('routing.active')} name="active" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}

management-ui/src/pages/Settings/index.tsx

@@ -0,0 +1,66 @@
+import { Card, Descriptions, Spin, Typography } from 'antd'
+import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+
+import apiClient, { isEnvelope } from '../../api/client'
+
+interface SetupStatus {
+  completed: boolean
+  admin_email: string
+  fqdn: string
+}
+
+interface SystemHealth {
+  status: string
+  version: string
+}
+
+export default function SettingsPage() {
+  const { t } = useTranslation()
+
+  const { data: setupStatus, isLoading: loadingSetup } = useQuery({
+    queryKey: ['setup', 'status'],
+    queryFn: async () => {
+      const r = await apiClient.get('/setup/status')
+      if (isEnvelope(r.data)) return r.data.data as SetupStatus
+      return null
+    },
+  })
+
+  const { data: health, isLoading: loadingHealth } = useQuery({
+    queryKey: ['system', 'health'],
+    queryFn: async () => {
+      const r = await apiClient.get('/system/health')
+      if (isEnvelope(r.data)) return r.data.data as SystemHealth
+      return null
+    },
+  })
+
+  if (loadingSetup || loadingHealth) {
+    return <Spin />
+  }
+
+  return (
+    <div>
+      <Typography.Title level={3}>{t('settings.title')}</Typography.Title>
+      <Typography.Paragraph type="secondary">{t('settings.intro')}</Typography.Paragraph>
+
+      <Card title={t('settings.systemInfo')} style={{ marginBottom: 16 }}>
+        <Descriptions column={1}>
+          <Descriptions.Item label={t('settings.version')}>{health?.version ?? '—'}</Descriptions.Item>
+          <Descriptions.Item label={t('settings.status')}>{health?.status ?? '—'}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+
+      <Card title={t('settings.setupInfo')}>
+        <Descriptions column={1}>
+          <Descriptions.Item label={t('settings.adminEmail')}>{setupStatus?.admin_email ?? '—'}</Descriptions.Item>
+          <Descriptions.Item label={t('settings.fqdn')}>{setupStatus?.fqdn ?? '—'}</Descriptions.Item>
+          <Descriptions.Item label={t('settings.setupCompleted')}>
+            {setupStatus?.completed ? t('common.yes') : t('common.no')}
+          </Descriptions.Item>
+        </Descriptions>
+      </Card>
+    </div>
+  )
+}