230 lines
12 KiB
TypeScript
230 lines
12 KiB
TypeScript
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 { 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);
|
|
|
|
const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-v6';
|
|
const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
|
|
|
|
const formatLocalDate = (date: Date) => {
|
|
const year = date.getFullYear();
|
|
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
|
const day = `${date.getDate()}`.padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
const getMonthRange = () => {
|
|
const today = new Date();
|
|
return {
|
|
start: formatLocalDate(new Date(today.getFullYear(), today.getMonth(), 1)),
|
|
end: formatLocalDate(today)
|
|
};
|
|
};
|
|
|
|
@Component({
|
|
selector: 'app-dashboard',
|
|
standalone: true,
|
|
imports: [CommonModule, CurrencyPipe, DatePipe],
|
|
template: `
|
|
<div class="page-header d-print-none mb-3 ec-page-header">
|
|
<div class="row align-items-center g-3">
|
|
<div class="col">
|
|
<h2 class="page-title mb-1">{{ ui.t('nav.dashboard') }}</h2>
|
|
<div class="text-secondary">{{ ui.t('dashboard.cashflowHint') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.total') }}</div><div class="display-6">{{ (stats?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</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('dashboard.count') }}</div><div class="display-6">{{ stats?.count || 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('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>
|
|
|
|
<div class="col-lg-7 d-flex align-items-stretch">
|
|
<div class="card pv-card h-100 w-100 overflow-hidden">
|
|
<div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.share') }}</h3></div>
|
|
<div class="card-body">
|
|
@if (stats?.byCategory?.length) {
|
|
<div class="ec-chart-wrap"><canvas id="dashboardCategoryChart"></canvas></div>
|
|
} @else {
|
|
<div class="alert alert-info mb-0">{{ ui.t('dashboard.noChartData') }}</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5 d-flex align-items-stretch">
|
|
<div class="card pv-card h-100 w-100 overflow-hidden">
|
|
<div class="card-header"><h3 class="card-title">{{ ui.t('nav.cashflow') }}</h3></div>
|
|
<div class="card-body d-grid gap-3">
|
|
<div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.actual') }}</span><strong>{{ (cashflow?.actualCurrent || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
|
|
<div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.budget') }}</span><strong>{{ (cashflow?.totalBudget || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
|
|
<div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.pending') }}</span><strong>{{ cashflow?.pendingApproval || 0 }}</strong></div>
|
|
<div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.duplicates') }}</span><strong>{{ cashflow?.duplicateCount || 0 }}</strong></div>
|
|
<div>
|
|
<div class="form-label mb-2">{{ ui.t('budget.alerts') }}</div>
|
|
<div class="d-grid gap-2">
|
|
@for (alert of cashflow?.alerts || []; track alert.id) {
|
|
<div class="alert alert-warning mb-0 py-2 px-3">{{ alert.name }} · {{ alert.usagePercent }}%</div>
|
|
} @empty {
|
|
<div class="text-secondary">{{ ui.t('common.noData') }}</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card overflow-hidden">
|
|
<div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.recent') }}</h3></div>
|
|
<div class="table-responsive">
|
|
<table class="table table-vcenter card-table mb-0">
|
|
<thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.category') }}</th><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
|
|
<tbody>
|
|
@for (item of recentExpenses; track item.id) {
|
|
<tr>
|
|
<td>
|
|
<div class="fw-semibold">{{ item.title }}</div>
|
|
<div class="text-secondary small">{{ item.merchant || ui.t('expenses.noMerchant') }}</div>
|
|
</td>
|
|
<td>{{ item.category.name }}</td>
|
|
<td><span class="badge" [ngClass]="statusBadgeClass(item.status)">{{ ui.t('status.' + item.status.toLowerCase()) }}</span></td>
|
|
<td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="4" class="text-secondary">{{ ui.t('common.noExpenses') }}</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card overflow-hidden">
|
|
<div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.upcomingRecurring') }}</h3></div>
|
|
<div class="table-responsive">
|
|
<table class="table table-vcenter card-table mb-0">
|
|
<thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
|
|
<tbody>
|
|
@for (item of cashflow?.upcomingRecurring || []; track item.id) {
|
|
<tr><td>{{ item.title }}</td><td>{{ item.nextRunDate | date:'yyyy-MM-dd' }}</td><td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td></tr>
|
|
} @empty {
|
|
<tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
|
|
readonly ui = inject(UiService);
|
|
private readonly expensesService = inject(ExpensesService);
|
|
private readonly statsService = inject(StatsService);
|
|
private readonly shoppingIntegration = inject(ShoppingListIntegrationService);
|
|
|
|
recentExpenses: Expense[] = [];
|
|
stats: StatsResponse | null = null;
|
|
cashflow: CashflowResponse | null = null;
|
|
externalSummary: ShoppingListSummary | null = null;
|
|
private categoryChart?: Chart;
|
|
private chartPending = false;
|
|
|
|
ngOnInit() {
|
|
this.restoreCache();
|
|
this.loadDashboard();
|
|
}
|
|
|
|
ngAfterViewChecked() {
|
|
if (this.chartPending) {
|
|
this.chartPending = false;
|
|
this.renderChart();
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.categoryChart?.destroy();
|
|
}
|
|
|
|
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; } });
|
|
}
|
|
|
|
externalAmount() { return Number(this.externalSummary?.total ?? this.externalSummary?.amount ?? this.externalSummary?.meta?.total_amount ?? 0); }
|
|
externalCount() { return Number(this.externalSummary?.count ?? this.externalSummary?.records ?? this.externalSummary?.meta?.total_count ?? 0); }
|
|
|
|
statusBadgeClass(status: string) {
|
|
return {
|
|
DRAFT: 'text-bg-secondary',
|
|
PENDING: 'text-bg-warning',
|
|
APPROVED: 'text-bg-success',
|
|
REJECTED: 'text-bg-danger'
|
|
}[status] || 'text-bg-secondary';
|
|
}
|
|
|
|
private scheduleChartRender() {
|
|
requestAnimationFrame(() => this.renderChart());
|
|
}
|
|
|
|
private renderChart() {
|
|
const canvas = document.getElementById('dashboardCategoryChart') as HTMLCanvasElement | null;
|
|
if (!canvas || !this.stats?.byCategory?.length) {
|
|
this.categoryChart?.destroy();
|
|
return;
|
|
}
|
|
|
|
const colors = this.stats.byCategory.map((_, index) => chartPalette[index % chartPalette.length]);
|
|
this.categoryChart?.destroy();
|
|
this.categoryChart = new Chart(canvas, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: this.stats.byCategory.map((item) => item.categoryName),
|
|
datasets: [{ data: this.stats.byCategory.map((item) => item.total), backgroundColor: colors, borderColor: '#ffffff', hoverOffset: 10 }]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '66%',
|
|
plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10, 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 };
|
|
this.recentExpenses = parsed.recentExpenses ?? [];
|
|
this.stats = parsed.stats ?? null;
|
|
this.cashflow = parsed.cashflow ?? null;
|
|
this.externalSummary = parsed.externalSummary ?? null;
|
|
this.chartPending = Boolean(this.stats?.byCategory?.length);
|
|
} catch {}
|
|
}
|
|
|
|
private persistCache() {
|
|
try {
|
|
localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({ recentExpenses: this.recentExpenses, stats: this.stats, cashflow: this.cashflow, externalSummary: this.externalSummary }));
|
|
} catch {}
|
|
}
|
|
}
|