feat(networks+ips): Quick-Toggles für Netzwerk-Interfaces und IP-Adressen

Inline Switch statt read-only StatusDot — konsistent mit allen anderen Seiten.

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

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

@@ -4,7 +4,6 @@ import { NodeIndexOutlined, PlusOutlined } from '@ant-design/icons'
 import PageHeader from '../../components/PageHeader'
 import ActionButtons from '../../components/ActionButtons'
 import EmptyState from '../../components/EmptyState'
-import StatusDot from '../../components/StatusDot'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -120,6 +119,14 @@ export default function IPAddressesPage() {
       void qc.invalidateQueries({ queryKey: ['ip-addresses'] })
     },
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: IPAddress; checked: boolean }) => {
+      const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row
+      await apiClient.put(`/ip-addresses/${id}`, { ...body, active: checked })
+    },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
   const del = useMutation({
     mutationFn: async (id: number) => { await apiClient.delete(`/ip-addresses/${id}`) },
     onSuccess: () => { void qc.invalidateQueries({ queryKey: ['ip-addresses'] }) },
@@ -137,7 +144,17 @@ export default function IPAddressesPage() {
         ? <Tag color="gold">VIP{row.vip_priority != null ? ` · prio ${row.vip_priority}` : ''}</Tag>
         : '—',
     },
-    { title: t('ips.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => <StatusDot active={v} /> },
+    {
+      title: t('ips.active'), dataIndex: 'active', key: 'active', width: 80,
+      render: (v: boolean, row: IPAddress) => (
+        <Switch
+          size="small"
+          checked={v}
+          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
+          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
+        />
+      ),
+    },
     { title: t('ips.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
     {
       title: t('common.actions'), key: 'actions',

management-ui/src/pages/Networks/Interfaces.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import ActionButtons from '../../components/ActionButtons'
-import StatusDot from '../../components/StatusDot'
 
 import apiClient, { isEnvelope } from '../../api/client'
 
@@ -107,6 +106,14 @@ export default function InterfacesTab() {
     mutationFn: async (id: number) => { await apiClient.delete(`/network-interfaces/${id}`) },
     onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
   })
+  const quickToggle = useMutation({
+    mutationFn: async ({ id, row, checked }: { id: number; row: NetworkInterface; checked: boolean }) => {
+      const { id: _id, created_at: _ca, updated_at: _ua, ...body } = row
+      await apiClient.put(`/network-interfaces/${id}`, { ...body, active: checked })
+    },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['network-interfaces'] }) },
+    onError: (e: Error) => message.error(e.message),
+  })
 
   // Stable colour palette for role tags. Builtin zones get a fixed
   // colour; custom zones cycle through the palette by name hash so
@@ -138,7 +145,17 @@ export default function InterfacesTab() {
       render: (r: string) => <Tag color={roleColor(r)}>{r.toUpperCase()}</Tag>,
     },
     { title: t('networks.mtu'), dataIndex: 'mtu', key: 'mtu', render: (v?: number) => v ?? '—' },
-    { title: t('networks.active'), dataIndex: 'active', key: 'active', render: (v: boolean) => <StatusDot active={v} /> },
+    {
+      title: t('networks.active'), dataIndex: 'active', key: 'active', width: 80,
+      render: (v: boolean, row: NetworkInterface) => (
+        <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) => (