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

import { useState } from 'react'
import { Button, Form, Input, Modal, Popconfirm, 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 { ApartmentOutlined } from '@ant-design/icons'

import apiClient, { isEnvelope } from '../../api/client'
import DataTable from '../../components/DataTable'
import EmptyState from '../../components/EmptyState'
import type { FwZone } from './types'

interface FormValues {
  name: string
  description?: string
}

async function listZones(): Promise<FwZone[]> {
  const r = await apiClient.get('/firewall/zones')
  if (!isEnvelope(r.data)) return []
  return (r.data.data as { zones?: FwZone[] }).zones ?? []
}

export default function ZonesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
  const [editing, setEditing] = useState<FwZone | null>(null)
  const [creating, setCreating] = useState(false)
  const [form] = Form.useForm<FormValues>()

  const { data, isLoading } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })

  const upsert = useMutation({
    mutationFn: async (vals: FormValues) => {
      if (editing) return (await apiClient.put(`/firewall/zones/${editing.id}`, vals)).data
      return (await apiClient.post('/firewall/zones', vals)).data
    },
    onSuccess: () => {
      message.success(t('common.save'))
      setEditing(null); setCreating(false); form.resetFields()
      void qc.invalidateQueries({ queryKey: ['fw-zones'] })
    },
    onError: (e: Error) => message.error(e.message),
  })
  const del = useMutation({
    mutationFn: async (id: number) => { await apiClient.delete(`/firewall/zones/${id}`) },
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['fw-zones'] }) },
    onError: (e: Error) => message.error(e.message),
  })

  const columns: ColumnsType<FwZone> = [
    { title: t('fw.zone.name'), dataIndex: 'name', key: 'name',
      render: (s: string, row) => row.builtin
        ? <Space><code>{s}</code><Tag color="blue">{t('fw.zone.builtin')}</Tag></Space>
        : <code>{s}</code>,
    },
    { title: t('fw.zone.description'), dataIndex: 'description', key: 'description',
      render: (v?: string | null) => v ?? '—' },
    {
      title: t('common.actions'), key: 'actions',
      render: (_, row) => (
        <Space>
          <Button size="small" onClick={() => {
            setEditing(row)
            form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
          }}>{t('common.edit')}</Button>
          {row.builtin
            ? <Tooltip title={t('fw.zone.builtinHint')}>
                <Button size="small" danger disabled>{t('common.delete')}</Button>
              </Tooltip>
            : <Popconfirm
                title={t('fw.zone.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() }

  return (
    <>
      <Button type="primary" className="mb-16" onClick={openCreate}>
        {t('fw.zone.add')}
      </Button>
      <DataTable
        rowKey="id"
        loading={isLoading}
        dataSource={data ?? []}
        columns={columns}
        emptyContent={
          <EmptyState
            icon={<ApartmentOutlined />}
            title={t('fw.zone.emptyTitle')}
            description={t('fw.zone.emptyDesc')}
            action={
              <Button type="primary" onClick={openCreate}>{t('fw.zone.add')}</Button>
            }
          />
        }
      />

      <Modal
        title={editing ? t('fw.zone.edit') : t('fw.zone.add')}
        open={editing !== null || creating}
        onCancel={() => { setEditing(null); setCreating(false); form.resetFields() }}
        onOk={() => { void form.submit() }}
        confirmLoading={upsert.isPending}
        width={520}
      >
        <Form form={form} layout="vertical" onFinish={(v) => upsert.mutate(v)}>
          <Form.Item
            label={t('fw.zone.name')}
            name="name"
            rules={[
              { required: true },
              { pattern: /^[a-z][a-z0-9_-]{0,31}$/, message: t('fw.zone.namePattern') },
            ]}
            extra={editing?.builtin ? t('fw.zone.builtinNameLocked') : undefined}
          >
            <Input disabled={editing?.builtin} />
          </Form.Item>
          <Form.Item label={t('fw.zone.description')} name="description">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}