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

import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { GroupOutlined } from '@ant-design/icons'

import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'

import apiClient, { isEnvelope } from '../../api/client'
import { useAuthStore } from '../../stores/auth'
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 isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  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>
          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
            <Button size="small" disabled={isViewer} onClick={() => {
              setEditing(row)
              form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
            }}>{t('common.edit')}</Button>
          </Tooltip>
          {isViewer ? (
            <Tooltip title={t('auth.viewerBadge')}>
              <Button size="small" danger disabled>{t('common.delete')}</Button>
            </Tooltip>
          ) : (
            <Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
              <Button size="small" danger>{t('common.delete')}</Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ]

  const openCreate = () => {
    setCreating(true); form.resetFields()
    form.setFieldsValue({ member_ids: [] })
  }

  return (
    <>
      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
          {t('fw.sg.add')}
        </Button>
      </Tooltip>
      <DataTable
        rowKey="id"
        loading={isLoading}
        dataSource={groups ?? []}
        columns={columns}
        emptyContent={
          <EmptyState
            icon={<GroupOutlined />}
            title={t('fw.sg.emptyTitle')}
            description={t('fw.sg.emptyDesc')}
            action={
              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.sg.add')}</Button>
              </Tooltip>
            }
          />
        }
      />
      <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>
    </>
  )
}