96 lines
5.9 KiB
TypeScript
96 lines
5.9 KiB
TypeScript
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
|
|
import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
|
|
import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
|
|
import { StatsService } from '../../core/services/stats.service';
|
|
import { UiService } from '../../core/services/ui.service';
|
|
import type { CashflowResponse } from '../../shared/models';
|
|
|
|
Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend);
|
|
|
|
@Component({
|
|
selector: 'app-cashflow',
|
|
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.cashflow') }}</h2><div class="text-secondary">{{ ui.t('cashflow.subtitle') }}</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('cashflow.actual') }}</div><div class="display-6">{{ (data()?.actualCurrent || 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('cashflow.budget') }}</div><div class="display-6">{{ (data()?.totalBudget || 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('cashflow.forecast') }}</div><div class="display-6">{{ (data()?.forecastCurrentMonth || 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('cashflow.pending') }}</div><div class="display-6">{{ data()?.pendingApproval || 0 }}</div></div></div></div>
|
|
|
|
<div class="col-lg-8 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('cashflow.trend') }}</h3></div>
|
|
<div class="card-body"><div class="ec-chart-wrap"><canvas id="cashflowTrendChart"></canvas></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 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('budget.alerts') }}</h3></div>
|
|
<div class="card-body d-grid gap-2">
|
|
@for (alert of data()?.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 class="col-lg-6">
|
|
<div class="card overflow-hidden">
|
|
<div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.statusSummary') }}</h3></div>
|
|
<div class="table-responsive"><table class="table table-vcenter card-table mb-0"><thead><tr><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr></thead><tbody>@for (item of data()?.statusSummary || []; track item.status) { <tr><td>{{ ui.t('status.' + item.status.toLowerCase()) }}</td><td class="text-end">{{ item.count }}</td></tr> } @empty { <tr><td colspan="2" class="text-secondary">{{ ui.t('common.noData') }}</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 data()?.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 CashflowComponent implements OnInit, OnDestroy {
|
|
readonly ui = inject(UiService);
|
|
private readonly statsService = inject(StatsService);
|
|
readonly data = signal<CashflowResponse | null>(null);
|
|
private chart?: Chart;
|
|
ngOnInit() {
|
|
this.statsService.cashflow().subscribe({
|
|
next: (response) => {
|
|
this.data.set(response);
|
|
requestAnimationFrame(() => this.renderChart());
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() { this.chart?.destroy(); }
|
|
|
|
private renderChart() {
|
|
const canvas = document.getElementById('cashflowTrendChart') as HTMLCanvasElement | null;
|
|
const data = this.data();
|
|
if (!canvas || !data?.trend?.length) {
|
|
this.chart?.destroy();
|
|
return;
|
|
}
|
|
this.chart?.destroy();
|
|
this.chart = new Chart(canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.trend.map((item) => item.label),
|
|
datasets: [
|
|
{ label: this.ui.t('cashflow.actual'), data: data.trend.map((item) => item.actual), borderColor: '#206bc4', backgroundColor: '#206bc4', tension: 0.25 },
|
|
{ label: this.ui.t('cashflow.budget'), data: data.trend.map((item) => item.budget), borderColor: '#2fb344', backgroundColor: '#2fb344', tension: 0.25 }
|
|
]
|
|
},
|
|
options: { maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { color: '#9ca3af' } } }, scales: { x: { ticks: { color: '#9ca3af' } }, y: { ticks: { color: '#9ca3af' } } } }
|
|
});
|
|
}
|
|
}
|