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

import { useState } from 'react'
import { Button, Form, Input, InputNumber, 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 DataTable from '../../components/DataTable'

import apiClient, { isEnvelope } from '../../api/client'
import type { FwService } from './types'

interface FormValues {
  name: string
  proto: FwService['proto']
  port_start?: number
  port_end?: number
  description?: string
}

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 ServicesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
  const { data, isLoading } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })

  const [editing, setEditing] = useState<FwService | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<FormValues>()

  const create = useMutation({
    mutationFn: async (v: FormValues) => { await apiClient.post('/firewall/services', v) },
    onSuccess: () => {
      message.success(t('common.save')); setCreating(false); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['fw', 'svc'] })
    },
  })
  const update = useMutation({
    mutationFn: async ({ id, v }: { id: number; v: FormValues }) => { await apiClient.put(`/firewall/services/${id}`, v) },
    onSuccess: () => {
      message.success(t('common.save')); setEditing(null); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['fw', 'svc'] })
    },
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/firewall/services/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw', 'svc'] }) },
  })

  const columns: ColumnsType<FwService> = [
    {
      title: t('fw.svc.name'), dataIndex: 'name', key: 'name',
      render: (s: string, row) => <Space>{s}{row.builtin && <Tooltip title={t('fw.svc.builtinHint')}><Tag color="default">builtin</Tag></Tooltip>}</Space>,
    },
    { title: t('fw.svc.proto'), dataIndex: 'proto', key: 'proto', render: (p: string) => <Tag>{p}</Tag> },
    {
      title: t('fw.svc.ports'), key: 'ports',
      render: (_, row) => row.proto === 'tcp' || row.proto === 'udp'
        ? <code>{row.port_start === row.port_end ? row.port_start : `${row.port_start}-${row.port_end}`}</code>
        : '—',
    },
    { title: t('fw.svc.description'), dataIndex: 'description', key: 'desc', render: (v?: string) => v ?? '—' },
    {
      title: t('common.edit'), key: 'actions',
      render: (_, row) => (
        <Space>
          <Button size="small" disabled={row.builtin} onClick={() => {
            setEditing(row)
            form.setFieldsValue({
              name: row.name, proto: row.proto,
              port_start: row.port_start ?? undefined,
              port_end: row.port_end ?? undefined,
              description: row.description ?? undefined,
            })
          }}>{t('common.edit')}</Button>
          <Popconfirm
            title={t('fw.svc.deleteConfirm', { name: row.name })}
            onConfirm={() => del.mutate(row.id)}
            disabled={row.builtin}
          >
            <Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <>
      <Button type="primary" className="mb-16" onClick={() => {
        setCreating(true); form.resetFields()
        form.setFieldsValue({ proto: 'tcp' })
      }}>
        {t('fw.svc.add')}
      </Button>
      <DataTable rowKey="id" loading={isLoading} dataSource={data ?? []} columns={columns}  />
      <Modal
        title={editing ? t('fw.svc.edit') : t('fw.svc.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) => {
            // For non-tcp/udp protocols, leave ports empty
            const cleaned = (v.proto === 'tcp' || v.proto === 'udp') ? v : { ...v, port_start: undefined, port_end: undefined }
            if (editing) update.mutate({ id: editing.id, v: cleaned }); else create.mutate(cleaned)
          }}
        >
          <Form.Item label={t('fw.svc.name')} name="name" rules={[{ required: true }]}>
            <Input placeholder="My-Custom-App" />
          </Form.Item>
          <Form.Item label={t('fw.svc.proto')} name="proto" rules={[{ required: true }]}>
            <Select options={(['tcp','udp','icmp','icmpv6','any'] as const).map(p => ({ value: p, label: p }))} />
          </Form.Item>
          <Form.Item noStyle shouldUpdate={(p, c) => p.proto !== c.proto}>
            {({ getFieldValue }) => {
              const proto = getFieldValue('proto') as FwService['proto']
              if (proto !== 'tcp' && proto !== 'udp') return null
              return (
                <Space>
                  <Form.Item label={t('fw.svc.portStart')} name="port_start" rules={[{ required: true }]}>
                    <InputNumber min={1} max={65535} />
                  </Form.Item>
                  <Form.Item label={t('fw.svc.portEnd')} name="port_end" rules={[{ required: true }]}>
                    <InputNumber min={1} max={65535} />
                  </Form.Item>
                </Space>
              )
            }}
          </Form.Item>
          <Form.Item label={t('fw.svc.description')} name="description">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}