Add ban management features and update documentation

- Implement ban model, service, and router endpoints in backend
- Add ban table component and dashboard integration in frontend
- Update ban-related types and API endpoints
- Add comprehensive tests for ban service and dashboard router
- Update documentation (Features, Tasks, Architecture, Web-Design)
- Clean up old fail2ban configuration files
- Update Makefile with new commands

frontend/src/pages/DashboardPage.tsx

@@ -2,15 +2,12 @@
  * Dashboard page.
  *
  * Composes the fail2ban server status bar at the top, a shared time-range
- * selector, and two tabs: "Ban List" (aggregate bans) and "Access List"
- * (individual matched log lines).  The time-range selection is shared
- * between both tabs so users can compare data for the same period.
+ * selector, and the ban list showing aggregate bans from the fail2ban
+ * database.  The time-range selection controls how far back to look.
  */
 
 import { useState } from "react";
 import {
-  Tab,
-  TabList,
   Text,
   ToggleButton,
   Toolbar,
@@ -21,7 +18,7 @@ import { BanTable } from "../components/BanTable";
 import { ServerStatusBar } from "../components/ServerStatusBar";
 import type { TimeRange } from "../types/ban";
 import { TIME_RANGE_LABELS } from "../types/ban";
-import type { BanTableMode } from "../hooks/useBans";
+
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -83,13 +80,12 @@ const TIME_RANGES: TimeRange[] = ["24h", "7d", "30d", "365d"];
 /**
  * Main dashboard landing page.
  *
- * Displays the fail2ban server status, a time-range selector, and a
- * tabbed view toggling between the ban list and the access list.
+ * Displays the fail2ban server status, a time-range selector, and the
+ * ban list table.
  */
 export function DashboardPage(): React.JSX.Element {
   const styles = useStyles();
   const [timeRange, setTimeRange] = useState<TimeRange>("24h");
-  const [activeTab, setActiveTab] = useState<BanTableMode>("bans");
 
   return (
     <div className={styles.root}>
@@ -99,15 +95,15 @@ export function DashboardPage(): React.JSX.Element {
       <ServerStatusBar />
 
       {/* ------------------------------------------------------------------ */}
-      {/* Ban / access list section                                           */}
+      {/* Ban list section                                                    */}
       {/* ------------------------------------------------------------------ */}
       <div className={styles.section}>
         <div className={styles.sectionHeader}>
           <Text as="h2" size={500} weight="semibold">
-            {activeTab === "bans" ? "Ban List" : "Access List"}
+            Ban List
           </Text>
 
-          {/* Shared time-range selector */}
+          {/* Time-range selector */}
           <Toolbar aria-label="Time range" size="small">
             {TIME_RANGES.map((r) => (
               <ToggleButton
@@ -125,21 +121,9 @@ export function DashboardPage(): React.JSX.Element {
           </Toolbar>
         </div>
 
-        {/* Tab switcher */}
-        <TabList
-          selectedValue={activeTab}
-          onTabSelect={(_, data) => {
-            setActiveTab(data.value as BanTableMode);
-          }}
-          size="small"
-        >
-          <Tab value="bans">Ban List</Tab>
-          <Tab value="accesses">Access List</Tab>
-        </TabList>
-
-        {/* Active tab content */}
+        {/* Ban table */}
         <div className={styles.tabContent}>
-          <BanTable mode={activeTab} timeRange={timeRange} />
+          <BanTable timeRange={timeRange} />
         </div>
       </div>
     </div>