From 3a82801360d79129a45c9a9d21fb39ed4ee6f09d Mon Sep 17 00:00:00 2001
From: "Adrian A. Baumann" <ade@adebaumann.com>
Date: Sat, 28 Feb 2026 21:29:04 +0100
Subject: [PATCH] fix: import ReactNode, Dispatch, SetStateAction explicitly
 (React namespace not in scope)

---
 frontend/src/components/DataTable.tsx |  3 ++-
 frontend/src/routes/ConfigDetail.tsx  | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index 4f44177..bcff162 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -13,7 +14,7 @@ import Typography from '@mui/material/Typography'
 export interface Column<T> {
   key: keyof T
   label: string
-  render?: (row: T) => React.ReactNode
+  render?: (row: T) => ReactNode
 }
 
 interface Props<T extends { id: number }> {
diff --git a/frontend/src/routes/ConfigDetail.tsx b/frontend/src/routes/ConfigDetail.tsx
index 47a2bee..3418842 100644
--- a/frontend/src/routes/ConfigDetail.tsx
+++ b/frontend/src/routes/ConfigDetail.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, Dispatch, SetStateAction } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import Layout from '../components/Layout'
 import DataTable, { Column } from '../components/DataTable'
@@ -54,7 +54,7 @@ export default function ConfigDetail() {
     {
       label: 'Zones',
       rows: zones as AnyEntity[],
-      setRows: setZones as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      setRows: setZones as Dispatch<SetStateAction<AnyEntity[]>>,
       api: zonesApi,
       columns: [
         { key: 'name' as const, label: 'Name' },
@@ -70,7 +70,7 @@ export default function ConfigDetail() {
     {
       label: 'Interfaces',
       rows: interfaces as AnyEntity[],
-      setRows: setInterfaces as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      setRows: setInterfaces as Dispatch<SetStateAction<AnyEntity[]>>,
       api: interfacesApi,
       columns: [
         { key: 'name' as const, label: 'Interface' },
@@ -90,7 +90,7 @@ export default function ConfigDetail() {
     {
       label: 'Policies',
       rows: policies as AnyEntity[],
-      setRows: setPolicies as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      setRows: setPolicies as Dispatch<SetStateAction<AnyEntity[]>>,
       api: policiesApi,
       columns: [
         {
@@ -119,7 +119,7 @@ export default function ConfigDetail() {
     {
       label: 'Rules',
       rows: rules as AnyEntity[],
-      setRows: setRules as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      setRows: setRules as Dispatch<SetStateAction<AnyEntity[]>>,
       api: rulesApi,
       columns: [
         { key: 'action' as const, label: 'Action' },
@@ -153,7 +153,7 @@ export default function ConfigDetail() {
     {
       label: 'Masq/NAT',
       rows: masq as AnyEntity[],
-      setRows: setMasq as React.Dispatch<React.SetStateAction<AnyEntity[]>>,
+      setRows: setMasq as Dispatch<SetStateAction<AnyEntity[]>>,
       api: masqApi,
       columns: [
         { key: 'out_interface' as const, label: 'Out Interface' },