gru/expense-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zmiany

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-06 14:37:42 +02:00
parent 237596bd52
commit 80e181ea3f
41 changed files with 14959 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
web/src/app/features/cashflow/cashflow.component.ts Normal file
View File

@@ -0,0 +1,87 @@
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
import { AfterViewChecked, 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, AfterViewChecked, OnDestroy {
readonly ui = inject(UiService);
private readonly statsService = inject(StatsService);
readonly data = signal<CashflowResponse | null>(null);
private chart?: Chart;
private chartPending = false;
ngOnInit() { this.statsService.cashflow().subscribe({ next: (response) => { this.data.set(response); this.chartPending = true; } }); }
ngAfterViewChecked() { if (this.chartPending) { this.chartPending = false; 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) 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' } } } }
});
}
}