fix: Use dynamic import for Highcharts accessibility module in history reports

Static import caused TypeError: Cannot read properties of undefined
(reading 'Templating') because the accessibility module's UMD wrapper
expects Highcharts core to be initialized first. Dynamic import inside
useGuardedEffect matches the pattern already used in ReportsPageClient.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jhf

app/src/app/reports/history-reports.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo, useState, type ReactNode } from "react";
-import "highcharts/modules/accessibility";
+import { useGuardedEffect } from "@/hooks/use-guarded-effect";
 
 import { useStatisticalHistoryHighcharts } from "./history-changes/use-statistical-history-highcharts";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -52,6 +52,14 @@ export function HistoryReports({
     return Array.from(new Set(years)).sort((a, b) => b - a);
   }, [timeContexts]);
 
+  const [highchartsModulesLoaded, setHighchartsModulesLoaded] = useState(false);
+
+  useGuardedEffect(() => {
+    import("highcharts/modules/accessibility").then(() => {
+      setHighchartsModulesLoaded(true);
+    });
+  }, [], 'HistoryReports:importHighchartsModules');
+
   const { history, isLoading } = useStatisticalHistoryHighcharts(
     resolution,
     selectedUnitType,
@@ -93,7 +101,7 @@ export function HistoryReports({
 
           </div>
         </div>
-        {!isLoading && history ? (
+        {!isLoading && history && highchartsModulesLoaded ? (
           children({
             history,
             isYearlyView: selectedYear === "all",