From df0528b2c2fe37e9c1407a60b721c9ce802c0f77 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.pupkalipinski@lpl-mind.de>
Date: Wed, 11 Mar 2026 16:50:04 +0100
Subject: [PATCH] Integrate BanTrendChart into DashboardPage (Task 4.3)

Add full-width 'Ban Trend' section card above the country charts.
BanTrendChart shares the existing timeRange / originFilter state;
loading, error, and empty states are handled inside the component.
---
 Docs/Tasks.md                        |  9 ++++++++-
 frontend/src/pages/DashboardPage.tsx | 17 ++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/Docs/Tasks.md b/Docs/Tasks.md
index ae242b9..4629c69 100644
--- a/Docs/Tasks.md
+++ b/Docs/Tasks.md
@@ -323,7 +323,14 @@ Create `frontend/src/components/BanTrendChart.tsx`. This component renders an **
 
 ### Task 4.3 — Integrate the trend chart into `DashboardPage`
 
-**Status:** `not started`
+**Status:** `done`
+
+Added a "Ban Trend" full-width section card to `DashboardPage` between the
+`ServerStatusBar` and the "Top Countries" section. The section renders
+`<BanTrendChart timeRange={timeRange} origin={originFilter} />`, sharing the
+same state already used by the country charts and ban list. Loading, error,
+and empty states are handled inside `BanTrendChart` itself. `tsc --noEmit` and
+ESLint pass with zero warnings.
 
 Add the `BanTrendChart` to the dashboard page **above** the two country charts and **below** the `ServerStatusBar`.
 
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 4ffe9da..669f136 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -18,9 +18,10 @@ import {
   tokens,
 } from "@fluentui/react-components";
 import { BanTable } from "../components/BanTable";
+import { BanTrendChart } from "../components/BanTrendChart";
 import { ServerStatusBar } from "../components/ServerStatusBar";
-import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
 import { TopCountriesBarChart } from "../components/TopCountriesBarChart";
+import { TopCountriesPieChart } from "../components/TopCountriesPieChart";
 import { useDashboardCountryData } from "../hooks/useDashboardCountryData";
 import type { BanOriginFilter, TimeRange } from "../types/ban";
 import { BAN_ORIGIN_FILTER_LABELS, TIME_RANGE_LABELS } from "../types/ban";
@@ -117,6 +118,20 @@ export function DashboardPage(): React.JSX.Element {
       {/* ------------------------------------------------------------------ */}
       <ServerStatusBar />
 
+      {/* ------------------------------------------------------------------ */}
+      {/* Ban Trend section                                                   */}
+      {/* ------------------------------------------------------------------ */}
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <Text as="h2" size={500} weight="semibold">
+            Ban Trend
+          </Text>
+        </div>
+        <div className={styles.tabContent}>
+          <BanTrendChart timeRange={timeRange} origin={originFilter} />
+        </div>
+      </div>
+
       {/* ------------------------------------------------------------------ */}
       {/* Charts section                                                      */}
       {/* ------------------------------------------------------------------ */}