feat(ui): Quick-Toggles, Config-Preview, Dashboard-Alerts, Domain-Detail-Health

Quick-Toggle-Switches (kein Modal nötig) für: Backends, Backend-Server,
DNS-Zonen, DNS-Records, Domains (active), Firewall-Rules, NAT-Rules,
Forward-Proxy ACLs, Routing-Rules.

Dashboard: Alert-Banner für komplett ausgefallene Backends (HAProxy-Stats)
und Domains im Maintenance-Mode.

Domain-Detail: HAProxy-Live-Health-Badge (15s Polling), TLS-Cert
ausstellen/erneuern direkt aus dem Detail, Routing-Rules-Panel inline.

Config-Preview (Settings): alle 4 Generatoren (haproxy, nftables, squid,
unbound) rendern via RenderToString ohne Disk-Write — GET /system/config-preview.

ActionButtons: Viewer-Rolle blendet Delete aus (RBAC-Ergänzung).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import {
-  Alert, Button, Form, Input, InputNumber, Modal, Select, Switch, Tag, Typography, message,
+  Alert, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, Typography, message,
 } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
-import { CloudServerOutlined, PlusOutlined } from '@ant-design/icons'
+import { CheckCircleOutlined, CloseCircleOutlined, CloudServerOutlined, PlusOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
@@ -12,7 +12,6 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import PageHeader from '../../components/PageHeader'
 import ActionButtons from '../../components/ActionButtons'
-import StatusDot from '../../components/StatusDot'
 
 const { Text } = Typography
 
@@ -29,6 +28,8 @@ interface ACL {
   updated_at: string
 }
 
+interface ServiceStatus { label: string; unit: string; active: boolean; state: string }
+
 interface FormValues {
   name: string
   acl_type: string
@@ -69,6 +70,16 @@ export default function ForwardProxyPage() {
   const qc = useQueryClient()
   const { data, isLoading } = useQuery({ queryKey: ['fwd-proxy', 'acls'], queryFn: listACLs })
 
+  const { data: services } = useQuery({
+    queryKey: ['system', 'services'],
+    queryFn: async () => {
+      const r = await apiClient.get('/system/services')
+      return isEnvelope(r.data) ? (r.data.data as { services: ServiceStatus[] }).services : []
+    },
+    refetchInterval: 30_000,
+  })
+  const squid = services?.find(s => s.unit === 'squid.service' || s.unit === 'squid')
+
   const [editing, setEditing] = useState<ACL | null>(null)
   const [creating, setCreating] = useState(false)
   const [form] = Form.useForm<FormValues>()
@@ -90,6 +101,13 @@ export default function ForwardProxyPage() {
     onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fwd-proxy', 'acls'] }) },
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: ACL; checked: boolean }) => {
+      await apiClient.put(`/forward-proxy/acls/${id}`, { ...row, active: checked })
+    },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fwd-proxy', 'acls'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const cols: ColumnsType<ACL> = [
     { title: t('fwd.priority'), dataIndex: 'priority', key: 'priority', width: 90 },
@@ -102,8 +120,17 @@ export default function ForwardProxyPage() {
       render: (s: string) => <Text code style={{ fontSize: 12 }}>{s}</Text> },
     { title: t('fwd.comment'), dataIndex: 'comment', key: 'comment',
       render: (v?: string | null) => v ?? '—' },
-    { title: t('common.active'), dataIndex: 'active', key: 'active',
-      render: (v: boolean) => <StatusDot active={v} /> },
+    {
+      title: t('common.active'), dataIndex: 'active', key: 'active', width: 80,
+      render: (v: boolean, row: ACL) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
+          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
+        />
+      ),
+    },
     {
       title: t('common.actions'), key: 'actions',
       render: (_, row) => (
@@ -134,6 +161,17 @@ export default function ForwardProxyPage() {
         icon={<CloudServerOutlined />}
         title={t('fwd.title')}
         subtitle={t('fwd.intro')}
+        extra={squid && (
+          <Tag
+            icon={squid.active ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
+            color={squid.active ? 'green' : 'red'}
+          >
+            <Space size={4}>
+              <span>squid</span>
+              <span style={{ fontWeight: 400, opacity: 0.85 }}>{squid.state}</span>
+            </Space>
+          </Tag>
+        )}
       />
 
       <Alert