feat: Stage 4 — fail2ban connection and server status

frontend/src/pages/DashboardPage.tsx

@@ -1,24 +1,29 @@
 /**
- * Dashboard placeholder page.
+ * Dashboard page.
  *
- * Full implementation is delivered in Stage 5.
+ * Shows the fail2ban server status bar at the top.
+ * Full ban-list implementation is delivered in Stage 5.
  */
 
 import { Text, makeStyles, tokens } from "@fluentui/react-components";
+import { ServerStatusBar } from "../components/ServerStatusBar";
 
 const useStyles = makeStyles({
   root: {
-    padding: tokens.spacingVerticalXXL,
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalM,
   },
 });
 
 /**
- * Temporary dashboard placeholder rendered until Stage 5 is complete.
+ * Dashboard page — renders the server status bar and a Stage 5 placeholder.
  */
 export function DashboardPage(): JSX.Element {
   const styles = useStyles();
   return (
     <div className={styles.root}>
+      <ServerStatusBar />
       <Text as="h1" size={700} weight="semibold">
         Dashboard
       </Text>