From 1d5c98739b6dc3428e6e07647cced8bc44c8eec8 Mon Sep 17 00:00:00 2001
From: "Adrian A. Baumann" <ade@adebaumann.com>
Date: Sat, 28 Feb 2026 20:09:15 +0100
Subject: [PATCH] feat: add Config Detail page with tabbed entity management

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/ConfigDetail.tsx | 246 +++++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 frontend/src/routes/ConfigDetail.tsx

diff --git a/frontend/src/routes/ConfigDetail.tsx b/frontend/src/routes/ConfigDetail.tsx
new file mode 100644
index 0000000..47a2bee
--- /dev/null
+++ b/frontend/src/routes/ConfigDetail.tsx
@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import Layout from '../components/Layout'
+import DataTable, { Column } from '../components/DataTable'
+import EntityForm, { FieldDef } from '../components/EntityForm'
+import GenerateModal from '../components/GenerateModal'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Typography from '@mui/material/Typography'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import AddIcon from '@mui/icons-material/Add'
+import BuildIcon from '@mui/icons-material/Build'
+import { zonesApi, interfacesApi, policiesApi, rulesApi, masqApi, configsApi } from '../api'
+
+// ---- Types ----
+interface Zone { id: number; name: string; type: string; options: string }
+interface Iface { id: number; name: string; zone_id: number; options: string }
+interface Policy { id: number; src_zone_id: number; dst_zone_id: number; policy: string; log_level: string; comment: string; position: number }
+interface Rule { id: number; action: string; src_zone_id: number | null; dst_zone_id: number | null; src_ip: string; dst_ip: string; proto: string; dport: string; sport: string; comment: string; position: number }
+interface Masq { id: number; source_network: string; out_interface: string; to_address: string; comment: string }
+
+type AnyEntity = { id: number } & Record<string, unknown>
+
+export default function ConfigDetail() {
+  const { id } = useParams<{ id: string }>()
+  const configId = Number(id)
+
+  const [configName, setConfigName] = useState('')
+  const [tab, setTab] = useState(0)
+  const [zones, setZones] = useState<Zone[]>([])
+  const [interfaces, setInterfaces] = useState<Iface[]>([])
+  const [policies, setPolicies] = useState<Policy[]>([])
+  const [rules, setRules] = useState<Rule[]>([])
+  const [masq, setMasq] = useState<Masq[]>([])
+  const [formOpen, setFormOpen] = useState(false)
+  const [editing, setEditing] = useState<AnyEntity | null>(null)
+  const [generateOpen, setGenerateOpen] = useState(false)
+
+  useEffect(() => {
+    configsApi.get(configId).then((r) => setConfigName(r.data.name))
+    zonesApi.list(configId).then((r) => setZones(r.data))
+    interfacesApi.list(configId).then((r) => setInterfaces(r.data))
+    policiesApi.list(configId).then((r) => setPolicies(r.data))
+    rulesApi.list(configId).then((r) => setRules(r.data))
+    masqApi.list(configId).then((r) => setMasq(r.data))
+  }, [configId])
+
+  const zoneOptions = zones.map((z) => ({ value: z.id, label: z.name }))
+
+  // ---- Tab configs ----
+  const tabConfig = [
+    {
+      label: 'Zones',
+      rows: zones as AnyEntity[],
+      setRows: setZones as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      api: zonesApi,
+      columns: [
+        { key: 'name' as const, label: 'Name' },
+        { key: 'type' as const, label: 'Type' },
+        { key: 'options' as const, label: 'Options' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'name', label: 'Name', required: true },
+        { name: 'type', label: 'Type', required: true, type: 'select' as const, options: [{ value: 'ipv4', label: 'ipv4' }, { value: 'ipv6', label: 'ipv6' }, { value: 'firewall', label: 'firewall' }] },
+        { name: 'options', label: 'Options' },
+      ] as FieldDef[],
+    },
+    {
+      label: 'Interfaces',
+      rows: interfaces as AnyEntity[],
+      setRows: setInterfaces as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      api: interfacesApi,
+      columns: [
+        { key: 'name' as const, label: 'Interface' },
+        {
+          key: 'zone_id' as const,
+          label: 'Zone',
+          render: (r: AnyEntity) => zones.find((z) => z.id === r['zone_id'])?.name ?? String(r['zone_id']),
+        },
+        { key: 'options' as const, label: 'Options' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'name', label: 'Interface Name', required: true },
+        { name: 'zone_id', label: 'Zone', required: true, type: 'select' as const, options: zoneOptions },
+        { name: 'options', label: 'Options' },
+      ] as FieldDef[],
+    },
+    {
+      label: 'Policies',
+      rows: policies as AnyEntity[],
+      setRows: setPolicies as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      api: policiesApi,
+      columns: [
+        {
+          key: 'src_zone_id' as const,
+          label: 'Source',
+          render: (r: AnyEntity) => zones.find((z) => z.id === r['src_zone_id'])?.name ?? String(r['src_zone_id']),
+        },
+        {
+          key: 'dst_zone_id' as const,
+          label: 'Destination',
+          render: (r: AnyEntity) => zones.find((z) => z.id === r['dst_zone_id'])?.name ?? String(r['dst_zone_id']),
+        },
+        { key: 'policy' as const, label: 'Policy' },
+        { key: 'log_level' as const, label: 'Log Level' },
+        { key: 'position' as const, label: 'Position' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'src_zone_id', label: 'Source Zone', required: true, type: 'select' as const, options: zoneOptions },
+        { name: 'dst_zone_id', label: 'Destination Zone', required: true, type: 'select' as const, options: zoneOptions },
+        { name: 'policy', label: 'Policy', required: true, type: 'select' as const, options: [{ value: 'ACCEPT', label: 'ACCEPT' }, { value: 'DROP', label: 'DROP' }, { value: 'REJECT', label: 'REJECT' }, { value: 'CONTINUE', label: 'CONTINUE' }] },
+        { name: 'log_level', label: 'Log Level' },
+        { name: 'comment', label: 'Comment' },
+        { name: 'position', label: 'Position', type: 'number' as const },
+      ] as FieldDef[],
+    },
+    {
+      label: 'Rules',
+      rows: rules as AnyEntity[],
+      setRows: setRules as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      api: rulesApi,
+      columns: [
+        { key: 'action' as const, label: 'Action' },
+        {
+          key: 'src_zone_id' as const,
+          label: 'Source',
+          render: (r: AnyEntity) => r['src_zone_id'] ? (zones.find((z) => z.id === r['src_zone_id'])?.name ?? String(r['src_zone_id'])) : 'all',
+        },
+        {
+          key: 'dst_zone_id' as const,
+          label: 'Destination',
+          render: (r: AnyEntity) => r['dst_zone_id'] ? (zones.find((z) => z.id === r['dst_zone_id'])?.name ?? String(r['dst_zone_id'])) : 'all',
+        },
+        { key: 'proto' as const, label: 'Proto' },
+        { key: 'dport' as const, label: 'DPort' },
+        { key: 'position' as const, label: 'Position' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'action', label: 'Action', required: true },
+        { name: 'src_zone_id', label: 'Source Zone', type: 'select' as const, options: zoneOptions },
+        { name: 'dst_zone_id', label: 'Dest Zone', type: 'select' as const, options: zoneOptions },
+        { name: 'src_ip', label: 'Source IP/CIDR' },
+        { name: 'dst_ip', label: 'Dest IP/CIDR' },
+        { name: 'proto', label: 'Protocol' },
+        { name: 'dport', label: 'Dest Port' },
+        { name: 'sport', label: 'Source Port' },
+        { name: 'comment', label: 'Comment' },
+        { name: 'position', label: 'Position', type: 'number' as const },
+      ] as FieldDef[],
+    },
+    {
+      label: 'Masq/NAT',
+      rows: masq as AnyEntity[],
+      setRows: setMasq as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      api: masqApi,
+      columns: [
+        { key: 'out_interface' as const, label: 'Out Interface' },
+        { key: 'source_network' as const, label: 'Source Network' },
+        { key: 'to_address' as const, label: 'To Address' },
+        { key: 'comment' as const, label: 'Comment' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'out_interface', label: 'Out Interface', required: true },
+        { name: 'source_network', label: 'Source Network', required: true },
+        { name: 'to_address', label: 'To Address' },
+        { name: 'comment', label: 'Comment' },
+      ] as FieldDef[],
+    },
+  ]
+
+  const current = tabConfig[tab]
+
+  const handleSubmit = async (values: Record<string, unknown>) => {
+    if (editing) {
+      await current.api.update(configId, editing.id, values)
+    } else {
+      await current.api.create(configId, values)
+    }
+    const res = await current.api.list(configId)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    current.setRows(res.data as any)
+    setFormOpen(false)
+    setEditing(null)
+  }
+
+  const handleDelete = async (row: AnyEntity) => {
+    if (!confirm('Delete this entry?')) return
+    await current.api.delete(configId, row.id)
+    const res = await current.api.list(configId)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    current.setRows(res.data as any)
+  }
+
+  return (
+    <Layout title={configName || 'Config Detail'}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <Breadcrumbs>
+          <Link to="/configs" style={{ color: 'inherit', textDecoration: 'none' }}>
+            <Typography variant="body2" color="text.secondary">Configurations</Typography>
+          </Link>
+          <Typography variant="body2">{configName}</Typography>
+        </Breadcrumbs>
+        <Button variant="contained" startIcon={<BuildIcon />} onClick={() => setGenerateOpen(true)}>
+          Generate Config
+        </Button>
+      </Box>
+
+      <Box sx={{ bgcolor: 'white', borderRadius: 2, border: '1px solid #e2e8f0', overflow: 'hidden' }}>
+        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ borderBottom: 1, borderColor: 'divider', px: 2 }}>
+          {tabConfig.map((tc) => <Tab key={tc.label} label={tc.label} />)}
+        </Tabs>
+        <Box sx={{ p: 3 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+            <Button size="small" variant="outlined" startIcon={<AddIcon />} onClick={() => { setEditing(null); setFormOpen(true) }}>
+              Add {current.label.replace('/NAT', '')}
+            </Button>
+          </Box>
+          <DataTable
+            columns={current.columns}
+            rows={current.rows}
+            onEdit={(row) => { setEditing(row); setFormOpen(true) }}
+            onDelete={handleDelete}
+          />
+        </Box>
+      </Box>
+
+      <EntityForm
+        open={formOpen}
+        title={`${editing ? 'Edit' : 'Add'} ${current.label}`}
+        fields={current.fields}
+        initialValues={editing ?? undefined}
+        onClose={() => { setFormOpen(false); setEditing(null) }}
+        onSubmit={handleSubmit}
+      />
+
+      <GenerateModal
+        open={generateOpen}
+        configId={configId}
+        configName={configName}
+        onClose={() => setGenerateOpen(false)}
+      />
+    </Layout>
+  )
+}