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

changes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-07 10:06:48 +02:00
parent deaa6dfe43
commit ca9c78d88d
36 changed files with 1801 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/app/features/cashflow/cashflow.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
import { AfterViewChecked, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
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';
@@ -17,9 +17,9 @@ Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearS
</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.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">
@@ -56,21 +56,29 @@ Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearS
</div>
`
})
export class CashflowComponent implements OnInit, AfterViewChecked, OnDestroy {
export class CashflowComponent implements OnInit, 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);
requestAnimationFrame(() => this.renderChart());
}
});
}
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;
if (!canvas || !data?.trend?.length) {
this.chart?.destroy();
return;
}
this.chart?.destroy();
this.chart = new Chart(canvas, {
type: 'line',