feat(ui): Quick-Toggles überall vervollständigt

NTP-Pools, User-Accounts, Backend-Server im Detail-Panel und
Routing-Rules im Domain-Detail-Panel — alle aktiv-Felder sind
jetzt inline schaltbar, kein Modale nötig.

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

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

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next'
 import apiClient, { isEnvelope } from '../../api/client'
 import PageHeader from '../../components/PageHeader'
 import ActionButtons from '../../components/ActionButtons'
-import StatusDot from '../../components/StatusDot'
 
 const { Text } = Typography
 
@@ -275,6 +274,14 @@ function ServerPanel({ backendID, haproxyStats }: { backendID: number; haproxySt
     },
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: BackendServer; checked: boolean }) => {
+      const { id: _id, ...body } = row
+      await apiClient.put(`/backend-servers/${id}`, { ...body, active: checked })
+    },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['backend-servers', backendID] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const cols: ColumnsType<BackendServer> = [
     {
@@ -292,7 +299,14 @@ function ServerPanel({ backendID, haproxyStats }: { backendID: number; haproxySt
     },
     {
       title: t('backends.active'), dataIndex: 'active', width: 80,
-      render: (v: boolean) => <StatusDot active={v} />,
+      render: (v: boolean, r: BackendServer) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === r.id}
+          onChange={(checked) => quickToggle.mutate({ id: r.id, row: r, checked })}
+        />
+      ),
     },
     {
       title: 'Live', key: 'live', width: 160,

management-ui/src/pages/Domains/Detail.tsx

@@ -406,6 +406,12 @@ function RoutingRulesPanel({ domainID, domainName }: { domainID: number; domainN
     onSuccess: invalidate,
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: RoutingRule; checked: boolean }) =>
+      apiClient.put(`/routing-rules/${id}`, { ...row, active: checked }),
+    onSuccess: invalidate,
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const backendLabel = (id: number) => {
     const b = backends?.find(x => x.id === id)
@@ -418,7 +424,14 @@ function RoutingRulesPanel({ domainID, domainName }: { domainID: number; domainN
     { title: t('routing.priority'), dataIndex: 'priority', key: 'priority', width: 90 },
     {
       title: t('routing.active'), dataIndex: 'active', key: 'active', width: 80,
-      render: (v: boolean) => <StatusDot active={v} />,
+      render: (v: boolean, r: RoutingRule) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === r.id}
+          onChange={(checked) => quickToggle.mutate({ id: r.id, row: r, checked })}
+        />
+      ),
     },
     {
       title: t('common.actions'), key: 'a', width: 90,

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

@@ -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
 
@@ -184,6 +183,14 @@ function PoolsTab() {
     onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ntp', 'pools'] }) },
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: Pool; checked: boolean }) => {
+      const { id: _id, ...body } = row
+      await apiClient.put(`/ntp/pools/${id}`, { ...body, active: checked })
+    },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ntp', 'pools'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const cols: ColumnsType<Pool> = [
     { title: t('ntp.pool.kind'), dataIndex: 'kind', key: 'kind',
@@ -201,8 +208,17 @@ function PoolsTab() {
       ) },
     { title: t('ntp.pool.description'), dataIndex: 'description', key: 'description',
       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: Pool) => (
+        <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) => (

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

@@ -13,7 +13,6 @@ import PageHeader from '../../components/PageHeader'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import ActionButtons from '../../components/ActionButtons'
-import StatusDot from '../../components/StatusDot'
 
 const { Text } = Typography
 
@@ -74,6 +73,12 @@ export default function UsersPage() {
     onSuccess: invalidate,
     onError: (e: Error) => message.error(e.message),
   })
+  const quickToggle = useMutation({
+    mutationFn: ({ id, row, checked }: { id: number; row: User; checked: boolean }) =>
+      apiClient.put(`/users/${id}`, { email: row.email, role: row.role, active: checked }),
+    onSuccess: invalidate,
+    onError: (e: Error) => message.error(e.message),
+  })
 
   const roleOptions = [
     { value: 'admin',  label: t('users.roleAdmin') },
@@ -99,8 +104,15 @@ export default function UsersPage() {
       ),
     },
     {
-      title: t('users.active'), dataIndex: 'active', key: 'active', width: 70,
+      title: t('users.active'), dataIndex: 'active', key: 'active', width: 80,
-      render: (v: boolean) => <StatusDot active={v} />,
+      render: (v: boolean, row: User) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
+          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
+        />
+      ),
     },
     {
       title: t('users.lastLogin'), key: 'lastLogin', width: 160,