Add React.memo to heavy dashboard components

frontend/src/components/BanTrendChart.tsx

@@ -4,7 +4,7 @@
  * Calls `useBanTrend` internally and handles loading, error, and empty states.
  */
 
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import {
   Area,
   AreaChart,
@@ -194,7 +194,7 @@ function TrendTooltip(props: TrendTooltipProps): React.JSX.Element | null {
  *
  * @param props - `timeRange` and `origin` filter props.
  */
-export function BanTrendChart({
+export const BanTrendChart = memo(function BanTrendChart({
   timeRange,
   origin,
   source = "fail2ban",
@@ -271,5 +271,5 @@ export function BanTrendChart({
       </div>
     </ChartStateWrapper>
   );
-}
+});