Refactor frontend date formatting helpers and mark Task 10 done

frontend/src/components/jail/BannedIpsSection.tsx

@@ -32,6 +32,7 @@ import {
   type TableColumnDefinition,
   createTableColumn,
 } from "@fluentui/react-components";
+import { formatTimestamp } from "../../utils/formatDate";
 import {
   ArrowClockwiseRegular,
   ChevronLeftRegular,
@@ -126,31 +127,6 @@ const useStyles = makeStyles({
   },
 });
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Format an ISO 8601 timestamp for compact display.
- *
- * @param iso - ISO 8601 string or `null`.
- * @returns A locale time string, or `"—"` when `null`.
- */
-function fmtTime(iso: string | null): string {
-  if (!iso) return "—";
-  try {
-    return new Date(iso).toLocaleString(undefined, {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  } catch {
-    return iso;
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Column definitions
 // ---------------------------------------------------------------------------
@@ -191,12 +167,16 @@ const columns: TableColumnDefinition<BanRow>[] = [
   createTableColumn<BanRow>({
     columnId: "banned_at",
     renderHeaderCell: () => "Banned At",
-    renderCell: ({ ban }) => <Text size={200}>{fmtTime(ban.banned_at)}</Text>,
+    renderCell: ({ ban }) => (
+      <Text size={200}>{ban.banned_at ? formatTimestamp(ban.banned_at) : "—"}</Text>
+    ),
   }),
   createTableColumn<BanRow>({
     columnId: "expires_at",
     renderHeaderCell: () => "Expires At",
-    renderCell: ({ ban }) => <Text size={200}>{fmtTime(ban.expires_at)}</Text>,
+    renderCell: ({ ban }) => (
+      <Text size={200}>{ban.expires_at ? formatTimestamp(ban.expires_at) : "—"}</Text>
+    ),
   }),
   createTableColumn<BanRow>({
     columnId: "actions",