Refactor frontend API calls into hooks and complete task states

frontend/src/pages/JailDetailPage.tsx

@@ -33,7 +33,7 @@ import {
   StopRegular,
 } from "@fluentui/react-icons";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import { useJailDetail } from "../hooks/useJails";
+import { useJailDetail, useJailBannedIps } from "../hooks/useJails";
 import type { Jail } from "../types/jail";
 import { BannedIpsSection } from "../components/jail/BannedIpsSection";
 
@@ -574,6 +574,21 @@ export function JailDetailPage(): React.JSX.Element {
   const { name = "" } = useParams<{ name: string }>();
   const { jail, ignoreList, ignoreSelf, loading, error, refresh, addIp, removeIp, toggleIgnoreSelf, start, stop, reload, setIdle } =
     useJailDetail(name);
+  const {
+    items,
+    total,
+    page,
+    pageSize,
+    search,
+    loading: bannedLoading,
+    error: bannedError,
+    opError,
+    refresh: refreshBanned,
+    setPage,
+    setPageSize,
+    setSearch,
+    unban,
+  } = useJailBannedIps(name);
 
   if (loading && !jail) {
     return (
@@ -618,7 +633,21 @@ export function JailDetailPage(): React.JSX.Element {
       </div>
 
       <JailInfoSection jail={jail} onRefresh={refresh} onStart={start} onStop={stop} onReload={reload} onSetIdle={setIdle} />
-      <BannedIpsSection jailName={name} />
+      <BannedIpsSection
+        items={items}
+        total={total}
+        page={page}
+        pageSize={pageSize}
+        search={search}
+        loading={bannedLoading}
+        error={bannedError}
+        opError={opError}
+        onSearch={setSearch}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        onRefresh={refreshBanned}
+        onUnban={unban}
+      />
       <PatternsSection jail={jail} />
       <BantimeEscalationSection jail={jail} />
       <IgnoreListSection