frontend/src/pages/JailsPage.tsx

@@ -8,7 +8,7 @@ import { useJails } from "../hooks/useJailList";
 
 export function JailsPage(): React.JSX.Element {
   const styles = useJailsPageStyles();
-  const { jails } = useJails();
+  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
   const { banIp, unbanIp } = useActiveBans();
 
   const jailNames = jails.map((j) => j.name);
@@ -19,7 +19,18 @@ export function JailsPage(): React.JSX.Element {
         Jails
       </Text>
 
-      <JailOverviewSection />
+      <JailOverviewSection
+        jails={jails}
+        total={total}
+        loading={loading}
+        error={error}
+        refresh={refresh}
+        startJail={startJail}
+        stopJail={stopJail}
+        setIdle={setIdle}
+        reloadJail={reloadJail}
+        reloadAll={reloadAll}
+      />
 
       <BanUnbanForm jailNames={jailNames} onBan={banIp} onUnban={unbanIp} />
 

frontend/src/pages/jails/JailOverviewSection.tsx

@@ -27,7 +27,6 @@ import {
 } from "@fluentui/react-icons";
 import { useCommonSectionStyles } from "../../components/commonStyles";
 import { useJailsPageStyles } from "./jailsPageStyles";
-import { useJails } from "../../hooks/useJailList";
 import type { JailSummary } from "../../types/jail";
 
 const useOverviewStyles = makeStyles({
@@ -48,11 +47,24 @@ const useOverviewStyles = makeStyles({
   },
 });
 
-export function JailOverviewSection(): React.JSX.Element {
+interface JailOverviewSectionProps {
+  jails: JailSummary[];
+  total: number;
+  loading: boolean;
+  error: string | null;
+  refresh: () => void;
+  startJail: (name: string) => Promise<void>;
+  stopJail: (name: string) => Promise<void>;
+  setIdle: (name: string, on: boolean) => Promise<void>;
+  reloadJail: (name: string) => Promise<void>;
+  reloadAll: () => Promise<void>;
+}
+
+export function JailOverviewSection(props: JailOverviewSectionProps): React.JSX.Element {
+  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = props;
   const pageStyles = useJailsPageStyles();
   const overviewStyles = useOverviewStyles();
   const sectionStyles = useCommonSectionStyles();
-  const { jails, total, loading, error, refresh, startJail, stopJail, setIdle, reloadJail, reloadAll } = useJails();
   const [opError, setOpError] = useState<string | null>(null);
 
   const handle = (fn: () => Promise<void>): void => {