feat(fw): Frontend /firewall mit 6 Tabs (Rules/NAT/Address-Objects/-Groups/Services/-Groups)

management-ui/src/pages/Firewall/:
* index.tsx — AntD Tabs default=Rules
* AddressObjects.tsx — Table + Modal (kind-Switch ändert Placeholder)
* AddressGroups.tsx — Members als Multi-Select aus Address-Objects
* Services.tsx — Builtin-Rows sind Edit/Delete-disabled mit Tooltip,
  Form blendet Port-Felder bei proto != tcp/udp aus
* ServiceGroups.tsx — analog AddressGroups
* Rules.tsx — Renderer mit object/group/cidr/any-Switch pro Seite
  + Service-Picker; Action+Zone als Tags in der Tabelle
* NATRules.tsx — kind-spezifische Form (DNAT braucht in_zone+dport,
  SNAT/MASQ braucht out_zone, MASQ verbietet target_addr)

Sidebar bekommt eigene Sektion "Sicherheit" mit FireOutlined-Icon
für /firewall. i18n de/en für alle 6 Tabs + Form-Labels.

Backend war schon im vorigen Commit fertig — diese Pages konsumieren
direkt /api/v1/firewall/{address-objects,address-groups,services,
service-groups,rules,nat-rules}. Renderer (nft aus den Joins) +
auto-apply folgen in den nächsten Commits — bis dahin sind die Rules
in der DB sichtbar aber noch nicht aktiv im Kernel.

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

management-ui/src/pages/Firewall/ServiceGroups.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Table, Tag, 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'
+import type { FwService, ServiceGroup } from './types'
+
+interface FormValues {
+  name: string
+  description?: string
+  member_ids?: number[]
+}
+
+async function listGroups(): Promise<ServiceGroup[]> {
+  const r = await apiClient.get('/firewall/service-groups')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { service_groups?: ServiceGroup[] }).service_groups ?? []
+}
+async function listServices(): Promise<FwService[]> {
+  const r = await apiClient.get('/firewall/services')
+  if (!isEnvelope(r.data)) return []
+  return (r.data.data as { services?: FwService[] }).services ?? []
+}
+
+export default function ServiceGroupsTab() {
+  const { t } = useTranslation()
+  const qc = useQueryClient()
+  const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listGroups })
+  const { data: services } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
+
+  const svcLabel = (id: number) => services?.find(s => s.id === id)?.name ?? `#${id}`
+
+  const [editing, setEditing] = useState<ServiceGroup | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [form] = Form.useForm<FormValues>()
+
+  const create = useMutation({
+    mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/service-groups', v) },
+    onSuccess: () => {
+      message.success(t('common.save')); setCreating(false); form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] })
+    },
+  })
+  const update = useMutation({
+    mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/service-groups/${id}`, v) },
+    onSuccess: () => {
+      message.success(t('common.save')); setEditing(null); form.resetFields()
+      void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] })
+    },
+  })
+  const del = useMutation({
+    mutationFn: async (id: number) => { await apiClient.delete(`/firewall/service-groups/${id}`) },
+    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'svc-grp'] }) },
+  })
+
+  const columns: ColumnsType<ServiceGroup> = [
+    { title: t('fw.sg.name'), dataIndex: 'name', key: 'name' },
+    {
+      title: t('fw.sg.members'), key: 'members',
+      render: (_, row) => (
+        <Space wrap>
+          {(row.member_ids ?? []).map((id) => <Tag key={id}>{svcLabel(id)}</Tag>)}
+          {(row.member_ids?.length ?? 0) === 0 && <span>—</span>}
+        </Space>
+      ),
+    },
+    { title: t('fw.sg.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
+    {
+      title: t('common.edit'), key: 'actions',
+      render: (_, row) => (
+        <Space>
+          <Button size="small" onClick={() => {
+            setEditing(row)
+            form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
+          }}>{t('common.edit')}</Button>
+          <Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
+            <Button size="small" danger>{t('common.delete')}</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <Button type="primary" style={{ marginBottom: 16 }} onClick={() => {
+        setCreating(true); form.resetFields()
+        form.setFieldsValue({ member_ids: [] })
+      }}>
+        {t('fw.sg.add')}
+      </Button>
+      <Table rowKey="id" loading={isLoading} dataSource={groups ?? []} columns={columns} pagination={false} />
+      <Modal
+        title={editing ? t('fw.sg.edit') : t('fw.sg.add')}
+        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('fw.sg.name')} name="name" rules={[{ required: true }]}>
+            <Input placeholder="Web-Stack" />
+          </Form.Item>
+          <Form.Item label={t('fw.sg.members')} name="member_ids">
+            <Select
+              mode="multiple"
+              showSearch
+              optionFilterProp="label"
+              placeholder={t('fw.sg.selectMembers')}
+              options={(services ?? []).map(s => ({
+                value: s.id,
+                label: `${s.name} (${s.proto}${s.port_start ? ' '+s.port_start : ''})`,
+              }))}
+            />
+          </Form.Item>
+          <Form.Item label={t('fw.sg.description')} name="description">
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  )
+}