feat: add hosts and params files, fix rules SECTION NEW header

frontend/src/routes/ConfigDetail.tsx

@@ -12,7 +12,7 @@ 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, snatApi, configsApi } from '../api'
+import { zonesApi, interfacesApi, policiesApi, rulesApi, snatApi, hostsApi, paramsApi, configsApi } from '../api'
 
 // ---- Types ----
 interface Zone { id: number; name: string; type: string; options: string }
@@ -20,6 +20,8 @@ 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 Snat { id: number; source_network: string; out_interface: string; to_address: string; comment: string }
+interface Host { id: number; zone_id: number; interface: string; subnet: string; options: string }
+interface Param { id: number; name: string; value: string }
 
 type AnyEntity = { id: number } & Record<string, unknown>
 
@@ -34,6 +36,8 @@ export default function ConfigDetail() {
   const [policies, setPolicies] = useState<Policy[]>([])
   const [rules, setRules] = useState<Rule[]>([])
   const [snat, setSnat] = useState<Snat[]>([])
+  const [hosts, setHosts] = useState<Host[]>([])
+  const [paramsList, setParamsList] = useState<Param[]>([])
   const [formOpen, setFormOpen] = useState(false)
   const [editing, setEditing] = useState<AnyEntity | null>(null)
   const [generateOpen, setGenerateOpen] = useState(false)
@@ -45,6 +49,8 @@ export default function ConfigDetail() {
     policiesApi.list(configId).then((r) => setPolicies(r.data))
     rulesApi.list(configId).then((r) => setRules(r.data))
     snatApi.list(configId).then((r) => setSnat(r.data))
+    hostsApi.list(configId).then((r) => setHosts(r.data))
+    paramsApi.list(configId).then((r) => setParamsList(r.data))
   }, [configId])
 
   const zoneOptions = zones.map((z) => ({ value: z.id, label: z.name }))
@@ -168,6 +174,38 @@ export default function ConfigDetail() {
         { name: 'comment', label: 'Comment' },
       ] as FieldDef[],
     },
+    {
+      label: 'Hosts',
+      rows: hosts as unknown as AnyEntity[],
+      setRows: setHosts as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
+      api: hostsApi,
+      columns: [
+        { key: 'zone_id' as const, label: 'Zone' },
+        { key: 'interface' as const, label: 'Interface' },
+        { key: 'subnet' as const, label: 'Subnet' },
+        { key: 'options' as const, label: 'Options' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'zone_id', label: 'Zone', type: 'select' as const, options: zoneOptions, required: true },
+        { name: 'interface', label: 'Interface', required: true },
+        { name: 'subnet', label: 'Subnet', required: true },
+        { name: 'options', label: 'Options' },
+      ] as FieldDef[],
+    },
+    {
+      label: 'Params',
+      rows: paramsList as unknown as AnyEntity[],
+      setRows: setParamsList as unknown as Dispatch<SetStateAction<AnyEntity[]>>,
+      api: paramsApi,
+      columns: [
+        { key: 'name' as const, label: 'Name' },
+        { key: 'value' as const, label: 'Value' },
+      ] as Column<AnyEntity>[],
+      fields: [
+        { name: 'name', label: 'Name', required: true },
+        { name: 'value', label: 'Value', required: true },
+      ] as FieldDef[],
+    },
   ]
 
   const current = tabConfig[tab]