fixy

2026-04-07 11:41:05 +02:00
parent ca9c78d88d
commit dda1c47764
5 changed files with 455 additions and 255 deletions
--- a/web/src/app/core/services/ui.service.ts
+++ b/web/src/app/core/services/ui.service.ts
@@ -82,6 +82,14 @@ const translations: Record<UiLanguage, Record<string, string>> = {
    'dashboard.recent': 'Ostatnie wydatki',
    'dashboard.recentHint': 'Ostatnio dodane pozycje wraz z kontrahentami.',
    'dashboard.noChartData': 'Brak danych do pokazania wykresu kategorii.',
+    'dashboard.trend': 'Wykres wydatków',
+    'dashboard.noTrendData': 'Brak danych do wykresu wydatków.',
+    'dashboard.range.1m': 'Miesiąc',
+    'dashboard.range.2m': '2 mies.',
+    'dashboard.range.3m': '3 mies.',
+    'dashboard.range.q': 'Kwartał',
+    'dashboard.range.6m': 'Pół roku',
+    'dashboard.range.12m': 'Rok',

    'stats.title': 'Statystyki',
    'stats.subtitle': 'Analiza miesięczna, kwartalna i roczna z podziałem na kategorie i zakres dat.',
@@ -529,6 +537,14 @@ const translations: Record<UiLanguage, Record<string, string>> = {
    'dashboard.recent': 'Recent expenses',
    'dashboard.recentHint': 'Most recently added items with merchants.',
    'dashboard.noChartData': 'No category chart data available.',
+    'dashboard.trend': 'Expense trend',
+    'dashboard.noTrendData': 'No expense trend data available.',
+    'dashboard.range.1m': 'Month',
+    'dashboard.range.2m': '2 mo',
+    'dashboard.range.3m': '3 mo',
+    'dashboard.range.q': 'Quarter',
+    'dashboard.range.6m': 'Half year',
+    'dashboard.range.12m': 'Year',

    'stats.title': 'Statistics',
    'stats.subtitle': 'Monthly, quarterly and yearly analysis by category and date range.',
--- a/web/src/app/features/dashboard/dashboard.component.ts
+++ b/web/src/app/features/dashboard/dashboard.component.ts
@@ -1,16 +1,23 @@
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import { AfterViewChecked, Component, OnDestroy, OnInit, inject } from '@angular/core';
-import { Chart, ArcElement, DoughnutController, Legend, Tooltip } from 'chart.js';
+import { AfterViewChecked, Component, OnDestroy, OnInit, effect, inject } from '@angular/core';
+import { Chart, ArcElement, CategoryScale, DoughnutController, Legend, LineController, LineElement, LinearScale, PointElement, Tooltip } from 'chart.js';
+import { AuthService } from '../../core/services/auth.service';
 import { ExpensesService } from '../../core/services/expenses.service';
 import { ShoppingListIntegrationService } from '../../core/services/shopping-list-integration.service';
 import { StatsService } from '../../core/services/stats.service';
 import { UiService } from '../../core/services/ui.service';
 import type { CashflowResponse, Expense, ShoppingListSummary, StatsResponse } from '../../shared/models';

-Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
+Chart.register(DoughnutController, ArcElement, Tooltip, Legend, LineController, LineElement, PointElement, CategoryScale, LinearScale);

-const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-v6';
+const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-v7';
 const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
+type TimelineRangeKey = '1m' | '2m' | '3m' | 'q' | '6m' | '12m';
+
+type TimelineRangeOption = {
+  value: TimelineRangeKey;
+  labelKey: string;
+};

 const formatLocalDate = (date: Date) => {
  const year = date.getFullYear();
@@ -19,10 +26,27 @@ const formatLocalDate = (date: Date) => {
  return `${year}-${month}-${day}`;
 };

+const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1);
+
+const addMonths = (date: Date, amount: number) => {
+  const next = new Date(date);
+  next.setMonth(next.getMonth() + amount, 1);
+  return next;
+};
+
 const getMonthRange = () => {
  const today = new Date();
  return {
-    start: formatLocalDate(new Date(today.getFullYear(), today.getMonth(), 1)),
+    start: formatLocalDate(startOfMonth(today)),
+    end: formatLocalDate(today)
+  };
+};
+
+const getTimelineRange = (range: TimelineRangeKey) => {
+  const today = new Date();
+  const monthsBack = ({ '1m': 0, '2m': 1, '3m': 2, q: 2, '6m': 5, '12m': 11 } as Record<TimelineRangeKey, number>)[range] ?? 0;
+  return {
+    start: formatLocalDate(startOfMonth(addMonths(today, -monthsBack))),
    end: formatLocalDate(today)
  };
 };
@@ -47,8 +71,36 @@ const getMonthRange = () => {
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.budgetUsage') }}</div><div class="display-6">{{ cashflow?.budgetUsagePercent || 0 }}%</div></div></div></div>
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.forecast') }}</div><div class="display-6">{{ (cashflow?.forecastCurrentMonth || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>

-      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalSpend') }}</div><div class="display-6">{{ externalAmount() | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
-      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalRecords') }}</div><div class="display-6">{{ externalCount() }}</div></div></div></div>
+      @if (canShowExternalStats()) {
+        <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalSpend') }}</div><div class="display-6">{{ externalAmount() | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
+        <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalRecords') }}</div><div class="display-6">{{ externalCount() }}</div></div></div></div>
+      }
+
+      <div class="col-12 d-flex align-items-stretch">
+        <div class="card pv-card h-100 w-100 overflow-hidden">
+          <div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
+            <h3 class="card-title mb-0">{{ ui.t('dashboard.trend') }}</h3>
+            <div class="btn-list">
+              @for (option of timelineRangeOptions; track option.value) {
+                <button class="btn btn-sm"
+                        type="button"
+                        [class.btn-primary]="selectedTimelineRange === option.value"
+                        [class.btn-outline-secondary]="selectedTimelineRange !== option.value"
+                        (click)="changeTimelineRange(option.value)">
+                  {{ ui.t(option.labelKey) }}
+                </button>
+              }
+            </div>
+          </div>
+          <div class="card-body">
+            @if (timelineStats?.timeline?.length) {
+              <div class="ec-chart-wrap"><canvas id="dashboardTimelineChart"></canvas></div>
+            } @else {
+              <div class="alert alert-info mb-0">{{ ui.t('dashboard.noTrendData') }}</div>
+            }
+          </div>
+        </div>
+      </div>

      <div class="col-lg-7 d-flex align-items-stretch">
        <div class="card pv-card h-100 w-100 overflow-hidden">
@@ -133,39 +185,118 @@ const getMonthRange = () => {
 })
 export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
  readonly ui = inject(UiService);
+  readonly auth = inject(AuthService);
  private readonly expensesService = inject(ExpensesService);
  private readonly statsService = inject(StatsService);
  private readonly shoppingIntegration = inject(ShoppingListIntegrationService);
+  readonly timelineRangeOptions: TimelineRangeOption[] = [
+    { value: '1m', labelKey: 'dashboard.range.1m' },
+    { value: '2m', labelKey: 'dashboard.range.2m' },
+    { value: '3m', labelKey: 'dashboard.range.3m' },
+    { value: 'q', labelKey: 'dashboard.range.q' },
+    { value: '6m', labelKey: 'dashboard.range.6m' },
+    { value: '12m', labelKey: 'dashboard.range.12m' }
+  ];

  recentExpenses: Expense[] = [];
  stats: StatsResponse | null = null;
+  timelineStats: StatsResponse | null = null;
  cashflow: CashflowResponse | null = null;
  externalSummary: ShoppingListSummary | null = null;
+  selectedTimelineRange: TimelineRangeKey = '3m';
  private categoryChart?: Chart;
-  private chartPending = false;
+  private timelineChart?: Chart;
+  private categoryChartPending = false;
+  private timelineChartPending = false;
+
+  constructor() {
+    effect(() => {
+      if (this.canShowExternalStats()) this.loadExternalSummary();
+      else {
+        this.externalSummary = null;
+        this.persistCache();
+      }
+    });
+  }

  ngOnInit() {
    this.restoreCache();
    this.loadDashboard();
+    this.loadTimeline();
  }

  ngAfterViewChecked() {
-    if (this.chartPending) {
-      this.chartPending = false;
-      this.renderChart();
+    if (this.categoryChartPending) {
+      this.categoryChartPending = false;
+      this.renderCategoryChart();
+    }
+
+    if (this.timelineChartPending) {
+      this.timelineChartPending = false;
+      this.renderTimelineChart();
    }
  }

  ngOnDestroy() {
    this.categoryChart?.destroy();
+    this.timelineChart?.destroy();
+  }
+
+  canShowExternalStats() {
+    return Boolean(this.auth.currentUser()?.integrationsEnabled);
  }

  loadDashboard() {
    const range = getMonthRange();
-    this.expensesService.list().subscribe({ next: (response) => { this.recentExpenses = response.items.slice(0, 8); this.persistCache(); } });
-    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({ next: (response) => { this.stats = response; this.chartPending = true; this.persistCache(); } });
-    this.statsService.cashflow().subscribe({ next: (response) => { this.cashflow = response; this.persistCache(); } });
-    this.shoppingIntegration.summary({ start_date: range.start, end_date: range.end }).subscribe({ next: (response) => { this.externalSummary = response; this.persistCache(); }, error: () => { this.externalSummary = this.externalSummary ?? null; } });
+    this.expensesService.list().subscribe({
+      next: (response) => {
+        this.recentExpenses = response.items.slice(0, 8);
+        this.persistCache();
+      }
+    });
+    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({
+      next: (response) => {
+        this.stats = response;
+        this.categoryChartPending = true;
+        this.persistCache();
+      }
+    });
+    this.statsService.cashflow().subscribe({
+      next: (response) => {
+        this.cashflow = response;
+        this.persistCache();
+      }
+    });
+  }
+
+  changeTimelineRange(range: TimelineRangeKey) {
+    if (this.selectedTimelineRange === range) return;
+    this.selectedTimelineRange = range;
+    this.loadTimeline();
+  }
+
+  loadTimeline() {
+    const range = getTimelineRange(this.selectedTimelineRange);
+    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({
+      next: (response) => {
+        this.timelineStats = response;
+        this.timelineChartPending = true;
+        this.persistCache();
+      }
+    });
+  }
+
+  private loadExternalSummary() {
+    const range = getMonthRange();
+    this.shoppingIntegration.summary({ start_date: range.start, end_date: range.end }).subscribe({
+      next: (response) => {
+        this.externalSummary = response;
+        this.persistCache();
+      },
+      error: () => {
+        this.externalSummary = this.externalSummary ?? null;
+      }
+    });
  }

  externalAmount() { return Number(this.externalSummary?.total ?? this.externalSummary?.amount ?? this.externalSummary?.meta?.total_amount ?? 0); }
@@ -180,11 +311,7 @@ export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
    }[status] || 'text-bg-secondary';
  }

-  private scheduleChartRender() {
-    requestAnimationFrame(() => this.renderChart());
-  }
-
-  private renderChart() {
+  private renderCategoryChart() {
    const canvas = document.getElementById('dashboardCategoryChart') as HTMLCanvasElement | null;
    if (!canvas || !this.stats?.byCategory?.length) {
      this.categoryChart?.destroy();
@@ -208,22 +335,69 @@ export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
    });
  }

+  private renderTimelineChart() {
+    const canvas = document.getElementById('dashboardTimelineChart') as HTMLCanvasElement | null;
+    if (!canvas || !this.timelineStats?.timeline?.length) {
+      this.timelineChart?.destroy();
+      return;
+    }
+
+    this.timelineChart?.destroy();
+    this.timelineChart = new Chart(canvas, {
+      type: 'line',
+      data: {
+        labels: this.timelineStats.timeline.map((item) => item.label),
+        datasets: [{
+          label: this.ui.t('stats.expensesLabel'),
+          data: this.timelineStats.timeline.map((item) => item.total),
+          borderColor: '#206bc4',
+          backgroundColor: '#206bc4',
+          tension: 0.25,
+          fill: false
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: { x: { ticks: { color: '#9ca3af' } }, y: { ticks: { color: '#9ca3af' } } }
+      }
+    });
+  }
+
  private restoreCache() {
    try {
      const raw = localStorage.getItem(DASHBOARD_CACHE_KEY);
      if (!raw) return;
-      const parsed = JSON.parse(raw) as { recentExpenses?: Expense[]; stats?: StatsResponse | null; cashflow?: CashflowResponse | null; externalSummary?: ShoppingListSummary | null };
+      const parsed = JSON.parse(raw) as {
+        recentExpenses?: Expense[];
+        stats?: StatsResponse | null;
+        timelineStats?: StatsResponse | null;
+        cashflow?: CashflowResponse | null;
+        externalSummary?: ShoppingListSummary | null;
+        selectedTimelineRange?: TimelineRangeKey;
+      };
      this.recentExpenses = parsed.recentExpenses ?? [];
      this.stats = parsed.stats ?? null;
+      this.timelineStats = parsed.timelineStats ?? null;
      this.cashflow = parsed.cashflow ?? null;
      this.externalSummary = parsed.externalSummary ?? null;
-      this.chartPending = Boolean(this.stats?.byCategory?.length);
+      this.selectedTimelineRange = parsed.selectedTimelineRange ?? '3m';
+      this.categoryChartPending = Boolean(this.stats?.byCategory?.length);
+      this.timelineChartPending = Boolean(this.timelineStats?.timeline?.length);
    } catch {}
  }

  private persistCache() {
    try {
-      localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({ recentExpenses: this.recentExpenses, stats: this.stats, cashflow: this.cashflow, externalSummary: this.externalSummary }));
+      localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({
+        recentExpenses: this.recentExpenses,
+        stats: this.stats,
+        timelineStats: this.timelineStats,
+        cashflow: this.cashflow,
+        externalSummary: this.externalSummary,
+        selectedTimelineRange: this.selectedTimelineRange
+      }));
    } catch {}
  }
 }
--- a/web/src/app/layout/shell.component.ts
+++ b/web/src/app/layout/shell.component.ts
@@ -45,11 +45,9 @@ import { UiService } from '../core/services/ui.service';
              </button>
            </div>
            <div class="pv-navbar-user text-end me-1"><div class="fw-semibold text-truncate">{{ auth.currentUser()?.fullName }}</div><div class="small text-secondary text-truncate">{{ auth.currentUser()?.email }}</div></div>
-            <button class="btn btn-primary btn-sm px-3 flex-shrink-0 pv-logout-btn" type="button" (click)="logout()" [attr.aria-label]="ui.t('action.logout')" [attr.title]="ui.t('action.logout')">
-              <span class="pv-logout-btn__content">
+            <button class="btn btn-primary btn-sm" type="button" (click)="logout()" [attr.aria-label]="ui.t('action.logout')" [attr.title]="ui.t('action.logout')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 12v.01"/><path d="M3 21h18"/><path d="M5 21v-14a2 2 0 0 1 2 -2h5m4 0h1a2 2 0 0 1 2 2v14"/><path d="M14 7l3 -3l3 3"/></svg>
                <span>{{ ui.t('action.logout') }}</span>
-              </span>
            </button>
          </div>
        </div>