Refactor frontend build and chart initialization

Moves chart data to JSON file for better separation of concerns
Implements lazy chart initialization in reports module
Updates build script and npm dependencies
Removes hardcoded chart scripts from Razor page

PlanTempus.Application/wwwroot/ts/modules/reports.ts

@@ -6,6 +6,7 @@
  */
 
 import Fuse from 'fuse.js';
+import { createChart } from '@sevenweirdpeople/swp-charting';
 
 interface SalesDataItem {
   index: number;
@@ -49,6 +50,31 @@ interface ChartSelectEvent extends CustomEvent {
   };
 }
 
+interface DataPoint {
+  x: string;
+  y: number;
+}
+
+interface SeriesConfig {
+  name: string;
+  color: string;
+  type: 'bar' | 'pie' | 'line';
+  data: DataPoint[];
+  unit?: string;
+  pie?: { innerRadius: number; outerRadius: number };
+}
+
+interface ChartDataConfig {
+  series: SeriesConfig[];
+}
+
+interface ReportsData {
+  revenue: ChartDataConfig;
+  payment: ChartDataConfig;
+  hours: ChartDataConfig;
+  absence: ChartDataConfig;
+}
+
 export class ReportsController {
   private searchInput: HTMLInputElement | null = null;
   private dateFromInput: HTMLInputElement | null = null;
@@ -59,6 +85,17 @@ export class ReportsController {
   private salesData: SalesDataItem[] = [];
   private fuse: Fuse<SalesDataItem> | null = null;
 
+  // Chart references for lazy initialization
+  private revenueChart: ReturnType<typeof createChart> | null = null;
+  private paymentChart: ReturnType<typeof createChart> | null = null;
+  private hoursChart: ReturnType<typeof createChart> | null = null;
+  private absenceChart: ReturnType<typeof createChart> | null = null;
+  private salesChartsInitialized = false;
+  private hoursChartsInitialized = false;
+
+  // Chart data loaded from JSON
+  private chartData: ReportsData | null = null;
+
   // Map pie chart series names to payment filter values
   private readonly paymentMap: Record<string, string> = {
     'Kort': 'card',
@@ -116,7 +153,26 @@ export class ReportsController {
     }
 
     this.setupTabs();
+    this.setupPeriodSelector();
     this.setupChartEvents();
+
+    // Load chart data from JSON and initialize charts
+    this.loadChartData().then(() => {
+      this.initializeSalesCharts();
+    });
+  }
+
+  /**
+   * Load chart data from JSON file
+   */
+  private async loadChartData(): Promise<void> {
+    try {
+      const response = await fetch('/data/reports-data.json');
+      if (!response.ok) return;
+      this.chartData = await response.json() as ReportsData;
+    } catch {
+      console.error('Failed to load reports chart data');
+    }
   }
 
   /**
@@ -332,6 +388,21 @@ export class ReportsController {
     statsRows.forEach(stats => {
       stats.classList.toggle('active', stats.dataset.forTab === targetTab);
     });
+
+    // Lazy-init charts for the active tab
+    if (targetTab === 'sales') {
+      if (this.chartData) {
+        this.initializeSalesCharts();
+      } else {
+        this.loadChartData().then(() => this.initializeSalesCharts());
+      }
+    } else if (targetTab === 'hours') {
+      if (this.chartData) {
+        this.initializeHoursCharts();
+      } else {
+        this.loadChartData().then(() => this.initializeHoursCharts());
+      }
+    }
   }
 
   /**
@@ -604,4 +675,120 @@ export class ReportsController {
     // Apply filters to update the table
     this.applyAllFilters();
   }
+
+  /**
+   * Initialize sales tab charts (lazy, only when visible)
+   */
+  private initializeSalesCharts(): void {
+    if (this.salesChartsInitialized) return;
+    this.revenueChart = this.initRevenueChart();
+    this.paymentChart = this.initPaymentChart();
+    this.salesChartsInitialized = true;
+  }
+
+  /**
+   * Initialize hours tab charts (lazy, only when visible)
+   */
+  private initializeHoursCharts(): void {
+    if (this.hoursChartsInitialized) return;
+    this.hoursChart = this.initHoursChart();
+    this.absenceChart = this.initAbsenceChart();
+    this.hoursChartsInitialized = true;
+  }
+
+  /**
+   * Initialize revenue bar chart (Salgsrapport)
+   */
+  private initRevenueChart(): ReturnType<typeof createChart> | null {
+    const el = document.getElementById('revenueChart');
+    if (!el || !this.chartData?.revenue) return null;
+
+    const series = this.chartData.revenue.series;
+    if (series.length === 0) return null;
+
+    const categories = series[0].data.map(p => p.x);
+
+    return createChart(el, {
+      deferRender: true,
+      height: 240,
+      xAxis: { categories },
+      yAxis: {
+        format: (v: number) => `${Math.round(v / 1000)}k`
+      },
+      series: series
+    });
+  }
+
+  /**
+   * Initialize payment methods pie chart (Salgsrapport)
+   */
+  private initPaymentChart(): ReturnType<typeof createChart> | null {
+    const el = document.getElementById('paymentChart');
+    if (!el || !this.chartData?.payment) return null;
+
+    const series = this.chartData.payment.series;
+    if (series.length === 0) return null;
+
+    return createChart(el, {
+      deferRender: true,
+      height: 240,
+      series: series,
+      tooltip: true,
+      legend: { position: 'right', align: 'center' }
+    });
+  }
+
+  /**
+   * Initialize hours per week bar chart (Timerapport)
+   */
+  private initHoursChart(): ReturnType<typeof createChart> | null {
+    const el = document.getElementById('hoursChart');
+    if (!el || !this.chartData?.hours) return null;
+
+    const series = this.chartData.hours.series;
+    if (series.length === 0) return null;
+
+    // Extract categories from first series
+    const categories = series[0]?.data.map(p => p.x) || [];
+
+    return createChart(el, {
+      deferRender: true,
+      height: 240,
+      xAxis: { categories },
+      yAxis: { format: (v: number) => v + ' t' },
+      series: series,
+      legend: { position: 'bottom', align: 'center', gap: 0 }
+    });
+  }
+
+  /**
+   * Initialize absence distribution pie chart (Timerapport)
+   */
+  private initAbsenceChart(): ReturnType<typeof createChart> | null {
+    const el = document.getElementById('absenceChart');
+    if (!el || !this.chartData?.absence) return null;
+
+    const series = this.chartData.absence.series;
+    if (series.length === 0) return null;
+
+    return createChart(el, {
+      deferRender: true,
+      height: 240,
+      series: series,
+      legend: { position: 'right', align: 'center' }
+    });
+  }
+
+  /**
+   * Setup period selector functionality (Timerapport)
+   */
+  private setupPeriodSelector(): void {
+    const buttons = document.querySelectorAll<HTMLButtonElement>('swp-period-selector button');
+    buttons.forEach(btn => {
+      btn.addEventListener('click', () => {
+        buttons.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+      });
+    });
+  }
 }