Refactor frontend date formatting helpers and mark Task 10 done

frontend/src/pages/JailDetailPage.tsx

@@ -34,6 +34,7 @@ import {
 } from "@fluentui/react-icons";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useJailDetail, useJailBannedIps } from "../hooks/useJails";
+import { formatSeconds } from "../utils/formatDate";
 import type { Jail } from "../types/jail";
 import { BannedIpsSection } from "../components/jail/BannedIpsSection";
 
@@ -146,16 +147,9 @@ const useStyles = makeStyles({
 });
 
 // ---------------------------------------------------------------------------
-// Helpers
+// Components
 // ---------------------------------------------------------------------------
 
-function fmtSeconds(s: number): string {
-  if (s < 0) return "permanent";
-  if (s < 60) return `${String(s)} s`;
-  if (s < 3600) return `${String(Math.round(s / 60))} min`;
-  return `${String(Math.round(s / 3600))} h`;
-}
-
 function CodeList({ items, empty }: { items: string[]; empty: string }): React.JSX.Element {
   const styles = useStyles();
   if (items.length === 0) {
@@ -313,9 +307,9 @@ function JailInfoSection({ jail, onRefresh, onStart, onStop, onSetIdle, onReload
         <Text className={styles.label}>Backend:</Text>
         <Text className={styles.mono}>{jail.backend}</Text>
         <Text className={styles.label}>Find time:</Text>
-        <Text>{fmtSeconds(jail.find_time)}</Text>
+        <Text>{formatSeconds(jail.find_time)}</Text>
         <Text className={styles.label}>Ban time:</Text>
-        <Text>{fmtSeconds(jail.ban_time)}</Text>
+        <Text>{formatSeconds(jail.ban_time)}</Text>
         <Text className={styles.label}>Max retry:</Text>
         <Text>{String(jail.max_retry)}</Text>
         {jail.date_pattern && (
@@ -413,13 +407,13 @@ function BantimeEscalationSection({ jail }: { jail: Jail }): React.JSX.Element |
         {esc.max_time !== null && (
           <>
             <Text className={styles.label}>Max time:</Text>
-            <Text>{fmtSeconds(esc.max_time)}</Text>
+            <Text>{formatSeconds(esc.max_time)}</Text>
           </>
         )}
         {esc.rnd_time !== null && (
           <>
             <Text className={styles.label}>Random jitter:</Text>
-            <Text>{fmtSeconds(esc.rnd_time)}</Text>
+            <Text>{formatSeconds(esc.rnd_time)}</Text>
           </>
         )}
         <Text className={styles.label}>Count across all jails:</Text>