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

poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-06 10:46:48 +02:00
parent 1ba1a26291
commit 0c7414101a
23 changed files with 962 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/app/features/admin/admin.component.ts
View File

@@ -4,6 +4,7 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { AdminService } from '../../core/services/admin.service';
import { AppSettingsService } from '../../core/services/app-settings.service';
import { ToastService } from '../../core/services/toast.service';
import { UiService } from '../../core/services/ui.service';
import type { AppSettings, User } from '../../shared/models';
@Component({
@@ -14,8 +15,8 @@ import type { AppSettings, User } from '../../shared/models';
<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">Administracja</h2>
<div class="text-secondary">Ustawienia aplikacji, SMTP oraz zarządzanie użytkownikami.</div>
<h2 class="page-title mb-1">{{ ui.t('admin.title') }}</h2>
<div class="text-secondary">{{ ui.t('admin.subtitle') }}</div>
</div>
</div>
</div>
@@ -23,52 +24,52 @@ import type { AppSettings, User } from '../../shared/models';
<div class="row row-cards align-items-start">
<div class="col-xl-5">
<div class="card pv-card overflow-hidden">
<div class="card-header"><h3 class="card-title">Ustawienia aplikacji</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('admin.settings') }}</h3></div>
<div class="card-body">
<form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
<div>
<label class="form-label">Nazwa aplikacji</label>
<label class="form-label">{{ ui.t('admin.appName') }}</label>
<input class="form-control" formControlName="appName" />
</div>
<div class="row g-3">
<div class="col-md-6"><label class="form-label">Domyślna waluta</label><input class="form-control" formControlName="defaultCurrency" /></div>
<div class="col-md-6"><label class="form-label">Typy potwierdzeń</label><input class="form-control" formControlName="allowedProofTypes" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.defaultCurrency') }}</label><input class="form-control" formControlName="defaultCurrency" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.allowedProofTypes') }}</label><input class="form-control" formControlName="allowedProofTypes" /></div>
</div>
<label class="form-check">
<input class="form-check-input" type="checkbox" formControlName="registrationEnabled" />
<span class="form-check-label">Włącz rejestrację</span>
<span class="form-check-label">{{ ui.t('admin.registration') }}</span>
</label>
<hr class="my-2" />
<div class="fw-semibold">SMTP</div>
<div class="fw-semibold">{{ ui.t('admin.smtp') }}</div>
<label class="form-check">
<input class="form-check-input" type="checkbox" formControlName="smtpEnabled" />
<span class="form-check-label">Włącz SMTP</span>
<span class="form-check-label">{{ ui.t('admin.smtpEnabled') }}</span>
</label>
<div class="row g-3">
<div class="col-md-7"><label class="form-label">Host</label><input class="form-control" formControlName="smtpHost" /></div>
<div class="col-md-5"><label class="form-label">Port</label><input class="form-control" type="number" formControlName="smtpPort" /></div>
<div class="col-md-6"><label class="form-label">Użytkownik</label><input class="form-control" formControlName="smtpUser" /></div>
<div class="col-md-6"><label class="form-label">Hasło</label><input class="form-control" type="password" formControlName="smtpPassword" /></div>
<div class="col-md-6"><label class="form-label">Nazwa nadawcy</label><input class="form-control" formControlName="smtpFromName" /></div>
<div class="col-md-6"><label class="form-label">E-mail nadawcy</label><input class="form-control" formControlName="smtpFromEmail" /></div>
<div class="col-md-7"><label class="form-label">{{ ui.t('admin.host') }}</label><input class="form-control" formControlName="smtpHost" /></div>
<div class="col-md-5"><label class="form-label">{{ ui.t('admin.port') }}</label><input class="form-control" type="number" formControlName="smtpPort" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.user') }}</label><input class="form-control" formControlName="smtpUser" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.password') }}</label><input class="form-control" type="password" formControlName="smtpPassword" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.fromName') }}</label><input class="form-control" formControlName="smtpFromName" /></div>
<div class="col-md-6"><label class="form-label">{{ ui.t('admin.fromEmail') }}</label><input class="form-control" formControlName="smtpFromEmail" /></div>
</div>
<label class="form-check">
<input class="form-check-input" type="checkbox" formControlName="smtpSecure" />
<span class="form-check-label">Bezpieczne połączenie</span>
<span class="form-check-label">{{ ui.t('admin.secureConnection') }}</span>
</label>
<div class="btn-list flex-wrap">
<button class="btn btn-success d-inline-flex align-items-center gap-2" [disabled]="form.invalid || saving()">
<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="M5 12l5 5l10 -10"/></svg>
<span>Zapisz</span>
<span>{{ ui.t('action.save') }}</span>
</button>
<button class="btn btn-outline-info" type="button" (click)="sendTest()">Test SMTP</button>
<button class="btn btn-outline-info" type="button" (click)="sendTest()">{{ ui.t('action.testSmtp') }}</button>
</div>
</form>
</div>
@@ -78,12 +79,12 @@ import type { AppSettings, User } from '../../shared/models';
<div class="col-xl-7">
<div class="card pv-card overflow-hidden">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="card-title">Użytkownicy</h3>
<h3 class="card-title">{{ ui.t('admin.users') }}</h3>
<span class="badge bg-dark-lt">{{ users().length }}</span>
</div>
<div class="table-responsive">
<table class="table table-vcenter card-table mb-0">
<thead><tr><th>Użytkownik</th><th>Rola</th><th>Status</th><th>Data</th><th class="w-1"></th></tr></thead>
<thead><tr><th>{{ ui.t('admin.userLabel') }}</th><th>{{ ui.t('admin.role') }}</th><th>{{ ui.t('admin.status') }}</th><th>{{ ui.t('admin.date') }}</th><th class="w-1"></th></tr></thead>
<tbody>
@for (user of users(); track user.id) {
<tr>
@@ -94,23 +95,23 @@ import type { AppSettings, User } from '../../shared/models';
<td>{{ user.role }}</td>
<td>
<span class="badge" [class.bg-success]="user.isActive" [class.bg-secondary]="!user.isActive">
{{ user.isActive ? 'Aktywny' : 'Zablokowany' }}
{{ user.isActive ? ui.t('common.active') : ui.t('common.blocked') }}
</span>
</td>
<td>{{ user.createdAt | date:'short' }}</td>
<td>
<div class="btn-list flex-nowrap">
<button class="btn btn-outline-warning btn-sm" type="button" (click)="toggleRole(user)">
{{ user.role === 'ADMIN' ? 'Ustaw USER' : 'Ustaw ADMIN' }}
{{ user.role === 'ADMIN' ? ui.t('action.setUser') : ui.t('action.setAdmin') }}
</button>
<button class="btn btn-sm" [class.btn-danger]="user.isActive" [class.btn-success]="!user.isActive" type="button" (click)="toggleActive(user)">
{{ user.isActive ? 'Zablokuj' : 'Odblokuj' }}
{{ user.isActive ? ui.t('action.block') : ui.t('action.unblock') }}
</button>
</div>
</td>
</tr>
} @empty {
<tr><td colspan="5" class="text-secondary">Brak użytkowników.</td></tr>
<tr><td colspan="5" class="text-secondary">{{ ui.t('admin.noUsers') }}</td></tr>
}
</tbody>
</table>
@@ -121,6 +122,7 @@ import type { AppSettings, User } from '../../shared/models';
`
})
export class AdminComponent implements OnInit {
readonly ui = inject(UiService);
private readonly fb = inject(FormBuilder);
private readonly admin = inject(AdminService);
private readonly appSettings = inject(AppSettingsService);
@@ -199,11 +201,11 @@ export class AdminComponent implements OnInit {
this.saving.set(false);
this.settings.set(response.item);
this.appSettings.applySettings(response.item);
this.toast.success('Ustawienia zapisane.');
this.toast.success(this.ui.t('admin.settingsSaved'));
},
error: (error) => {
this.saving.set(false);
this.toast.error(error.error?.message ?? 'Nie udało się zapisać ustawień.');
this.toast.error(error.error?.message ?? this.ui.t('admin.settingsError'));
}
});
}
@@ -211,12 +213,12 @@ export class AdminComponent implements OnInit {
sendTest() {
const to = this.form.getRawValue().smtpFromEmail;
if (!to) {
this.toast.error('Uzupełnij e-mail nadawcy.');
this.toast.error(this.ui.t('admin.missingFromEmail'));
return;
}
this.admin.testSmtp(to).subscribe({
next: () => this.toast.success('Wiadomość testowa została wysłana.'),
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się wysłać testu SMTP.')
next: () => this.toast.success(this.ui.t('admin.testSent')),
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('admin.testError'))
});
}
@@ -224,9 +226,9 @@ export class AdminComponent implements OnInit {
this.admin.updateUser(user.id, { role: user.role === 'ADMIN' ? 'USER' : 'ADMIN' }).subscribe({
next: (response) => {
this.users.update((items) => items.map((item) => (item.id === user.id ? response.item : item)));
this.toast.success('Rola została zaktualizowana.');
this.toast.success(this.ui.t('admin.roleUpdated'));
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zmienić roli.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('admin.roleError'))
});
}
@@ -234,9 +236,9 @@ export class AdminComponent implements OnInit {
this.admin.updateUser(user.id, { isActive: !user.isActive }).subscribe({
next: (response) => {
this.users.update((items) => items.map((item) => (item.id === user.id ? response.item : item)));
this.toast.success('Status konta został zaktualizowany.');
this.toast.success(this.ui.t('admin.statusUpdated'));
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zmienić statusu.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('admin.statusError'))
});
}
}

22
web/src/app/features/auth/login.component.ts
View File

@@ -76,9 +76,7 @@ import { UiService } from '../../core/services/ui.service';
</form>
<div class="login-footer-note">
{{ mode() === 'login'
? (ui.language() === 'pl' ? 'Użyj swojego konta, aby zarządzać wydatkami, raportami i uprawnieniami.' : 'Use your account to manage expenses, reports and user permissions.')
: (ui.language() === 'pl' ? 'Po utworzeniu konta od razu wrócisz do logowania.' : 'After creating an account you will be taken back to sign in.') }}
{{ mode() === 'login' ? ui.t('login.footer') : ui.t('register.footer') }}
</div>
@if (appSettings.registrationEnabled()) {
@@ -133,7 +131,7 @@ export class LoginComponent {
this.router.navigate(['/']);
},
error: (error) => {
const message = error.error?.message ?? 'Nie udało się zalogować.';
const message = error.error?.message ?? this.ui.t('login.error');
this.loading.set(false);
this.errorMessage.set(message);
this.toast.error(message);
@@ -146,11 +144,11 @@ export class LoginComponent {
next: () => {
this.loading.set(false);
this.errorMessage.set(null);
this.toast.success('Konto zostało utworzone.');
this.toast.success(this.ui.t('register.success'));
this.mode.set('login');
},
error: (error) => {
const message = error.error?.message ?? 'Nie udało się utworzyć konta.';
const message = error.error?.message ?? this.ui.t('register.error');
this.loading.set(false);
this.errorMessage.set(message);
this.toast.error(message);
@@ -168,22 +166,18 @@ export class LoginComponent {
}
loginSubtitle() {
return this.ui.language() === 'pl'
? 'Zaloguj się, aby zarządzać wydatkami, kontrahentami i raportami.'
: 'Sign in to manage expenses, merchants and reports.';
return this.ui.t('login.subtitle');
}
registerSubtitle() {
return this.ui.language() === 'pl'
? 'Utwórz konto i zacznij zbierać potwierdzenia oraz statystyki.'
: 'Create an account and start collecting proofs and analytics.';
return this.ui.t('register.subtitle');
}
switchToRegisterLabel() {
return this.ui.language() === 'pl' ? 'Nie masz konta?' : 'Need an account?';
return this.ui.t('login.needAccount');
}
switchToLoginLabel() {
return this.ui.language() === 'pl' ? 'Masz już konto?' : 'Already registered?';
return this.ui.t('login.haveAccount');
}
}

69
web/src/app/features/categories/categories.component.ts
View File

@@ -3,6 +3,7 @@ import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CategoriesService } from '../../core/services/categories.service';
import { ToastService } from '../../core/services/toast.service';
import { UiService } from '../../core/services/ui.service';
import type { Category } from '../../shared/models';
const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b', '#475569'];
@@ -15,8 +16,8 @@ const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b
<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">Kategorie</h2>
<div class="text-secondary">Zarządzaj kategoriami systemowymi i własnymi dla raportów oraz wydatków.</div>
<h2 class="page-title mb-1">{{ ui.t('categories.title') }}</h2>
<div class="text-secondary">{{ ui.t('categories.subtitle') }}</div>
</div>
</div>
</div>
@@ -24,16 +25,16 @@ const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b
<div class="row row-cards align-items-start">
<div class="col-lg-4">
<div class="card pv-card overflow-hidden">
<div class="card-header"><h3 class="card-title">{{ editingId ? 'Edytuj kategorię' : 'Nowa kategoria' }}</h3></div>
<div class="card-header"><h3 class="card-title">{{ editingId ? ui.t('categories.edit') : ui.t('categories.new') }}</h3></div>
<div class="card-body">
<form [formGroup]="form" (ngSubmit)="submit()" class="d-grid gap-3">
<div>
<label class="form-label">Nazwa</label>
<label class="form-label">{{ ui.t('categories.name') }}</label>
<input class="form-control" formControlName="name" />
</div>
<div>
<label class="form-label">Kolor</label>
<label class="form-label">{{ ui.t('categories.color') }}</label>
<div class="input-group">
<span class="input-group-text p-1"><span class="ec-color-swatch" [style.background]="form.getRawValue().color"></span></span>
<input class="form-control" formControlName="color" />
@@ -51,10 +52,10 @@ const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b
<div class="btn-list">
<button class="btn btn-success d-inline-flex align-items-center gap-2" [disabled]="form.invalid">
<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="M5 12l5 5l10 -10"/></svg>
<span>{{ editingId ? 'Zapisz' : 'Dodaj' }}</span>
<span>{{ editingId ? ui.t('action.save') : ui.t('action.addCategory') }}</span>
</button>
@if (editingId) {
<button class="btn btn-outline-secondary" type="button" (click)="reset()">Anuluj</button>
<button class="btn btn-outline-secondary" type="button" (click)="resetForm()">{{ ui.t('action.cancel') }}</button>
}
</div>
</form>
@@ -64,29 +65,28 @@ const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b
<div class="col-lg-8">
<div class="card pv-card overflow-hidden">
<div class="card-header"><h3 class="card-title">Kategorie</h3></div>
<div class="table-responsive">
<table class="table table-vcenter card-table mb-0">
<thead><tr><th>Nazwa</th><th>Typ</th><th class="w-1"></th></tr></thead>
<thead>
<tr><th>{{ ui.t('categories.name') }}</th><th>{{ ui.t('categories.color') }}</th><th>{{ ui.t('categories.type') }}</th><th class="w-1"></th></tr>
</thead>
<tbody>
@for (item of items(); track item.id) {
<tr>
<td>
<span class="badge me-2" [style.background]="item.color">&nbsp;</span>
{{ item.name }}
</td>
<td>{{ item.isSystem ? 'Systemowa' : 'Własna' }}</td>
<td>{{ item.name }}</td>
<td><span class="ec-color-swatch" [style.background]="item.color"></span> <span class="ms-2">{{ item.color }}</span></td>
<td>{{ item.isSystem ? ui.t('categories.system') : ui.t('categories.custom') }}</td>
<td>
<div class="btn-list flex-nowrap">
<button class="btn btn-outline-primary btn-sm" type="button" (click)="edit(item)">{{ ui.t('action.edit') }}</button>
@if (!item.isSystem) {
<button class="btn btn-outline-primary btn-sm" type="button" (click)="edit(item)">Edytuj</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="remove(item)">Usuń</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="remove(item)">{{ ui.t('action.delete') }}</button>
}
</div>
</td>
</tr>
} @empty {
<tr><td colspan="3" class="text-secondary">Brak kategorii.</td></tr>
<tr><td colspan="4" class="text-secondary">{{ ui.t('common.noCategories') }}</td></tr>
}
</tbody>
</table>
@@ -97,17 +97,18 @@ const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b
`
})
export class CategoriesComponent implements OnInit {
readonly ui = inject(UiService);
readonly presets = presets;
private readonly fb = inject(FormBuilder);
private readonly categories = inject(CategoriesService);
private readonly toast = inject(ToastService);
readonly items = this.categories.items;
readonly presets = presets;
editingId: string | null = null;
readonly form = this.fb.nonNullable.group({
name: ['', [Validators.required, Validators.minLength(2)]],
color: ['#2563eb', Validators.required]
color: [presets[0], Validators.required]
});
ngOnInit() {
@@ -118,6 +119,16 @@ export class CategoriesComponent implements OnInit {
this.form.patchValue({ color });
}
edit(item: Category) {
this.editingId = item.id;
this.form.reset({ name: item.name, color: item.color || presets[0] });
}
resetForm() {
this.editingId = null;
this.form.reset({ name: '', color: presets[0] });
}
submit() {
if (this.form.invalid) return;
const payload = this.form.getRawValue();
@@ -125,27 +136,17 @@ export class CategoriesComponent implements OnInit {
request.subscribe({
next: () => {
this.toast.success(this.editingId ? 'Kategoria została zapisana.' : 'Kategoria została dodana.');
this.reset();
this.toast.success(this.editingId ? this.ui.t('categories.saved') : this.ui.t('categories.added'));
this.resetForm();
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać kategorii.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('categories.saveError'))
});
}
edit(item: Category) {
this.editingId = item.id;
this.form.patchValue({ name: item.name, color: item.color });
}
reset() {
this.editingId = null;
this.form.reset({ name: '', color: '#2563eb' });
}
remove(item: Category) {
this.categories.delete(item.id).subscribe({
next: () => this.toast.success('Kategoria została usunięta.'),
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się usunąć kategorii.')
next: () => this.toast.success(this.ui.t('categories.deleted')),
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('categories.deleteError'))
});
}
}

125
web/src/app/features/dashboard/dashboard.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
import { Component, OnInit, inject } from '@angular/core';
import { AfterViewChecked, Component, OnDestroy, OnInit, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { Chart, DoughnutController, ArcElement, Tooltip, Legend } from 'chart.js';
import { AuthService } from '../../core/services/auth.service';
@@ -10,6 +10,24 @@ import type { Expense, StatsResponse } from '../../shared/models';
Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-cache';
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 now = new Date();
return {
start: formatLocalDate(new Date(now.getFullYear(), now.getMonth(), 1)),
end: formatLocalDate(now)
};
};
@Component({
selector: 'app-dashboard',
standalone: true,
@@ -19,7 +37,6 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="row align-items-center g-3">
<div class="col">
<h2 class="page-title mb-1">{{ auth.currentUser()?.fullName }}</h2>
<div class="text-secondary">{{ ui.t('dashboard.subtitle') }}</div>
</div>
<div class="col-12 col-xl d-flex justify-content-xl-end">
<div class="ec-page-header-actions">
@@ -38,8 +55,8 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="card-body">
<div class="row align-items-center g-3">
<div class="col-lg-7">
<div class="display-6 fw-bold mb-2">{{ stats?.total || 0 | currency:'PLN':'symbol':'1.2-2' }}</div>
<div class="text-secondary">{{ ui.t('dashboard.subtitle') }}</div>
<div class="text-secondary text-uppercase small fw-semibold mb-2">{{ ui.t('dashboard.total') }}</div>
<div class="display-6 fw-bold mb-0">{{ (stats?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div>
</div>
<div class="col-lg-5">
<div class="row g-3">
@@ -52,7 +69,7 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="col-6">
<div class="border rounded-3 p-3 h-100 ec-metric-card">
<div class="text-secondary small">{{ ui.t('dashboard.avg') }}</div>
<div class="h2 mb-0">{{ stats?.average || 0 | currency:'PLN':'symbol':'1.2-2' }}</div>
<div class="h2 mb-0">{{ (stats?.average || 0) | currency:'PLN':'symbol':'1.2-2' }}</div>
</div>
</div>
<div class="col-12">
@@ -73,7 +90,7 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="card-header">
<div>
<h3 class="card-title">{{ ui.t('dashboard.share') }}</h3>
<div class="ec-card-header-muted">Miesięczny przekrój kosztów według kategorii.</div>
<div class="ec-card-header-muted">{{ ui.t('dashboard.shareHint') }}</div>
</div>
</div>
<div class="card-body">
@@ -82,7 +99,7 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<canvas id="dashboardCategoryChart"></canvas>
</div>
} @else {
<div class="alert alert-info mb-0">Brak danych do pokazania wykresu kategorii.</div>
<div class="alert alert-info mb-0">{{ ui.t('dashboard.noChartData') }}</div>
}
</div>
</div>
@@ -93,13 +110,13 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="card-header">
<div>
<h3 class="card-title">{{ ui.t('dashboard.areas') }}</h3>
<div class="ec-card-header-muted">Najważniejsze obszary kosztowe w aktualnym okresie.</div>
<div class="ec-card-header-muted">{{ ui.t('dashboard.areasHint') }}</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-vcenter card-table table-striped mb-0">
<thead>
<tr><th>Kategoria</th><th class="text-end">Kwota</th><th class="text-end">Liczba</th></tr>
<tr><th>{{ ui.t('table.category') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr>
</thead>
<tbody>
@for (row of stats?.byCategory || []; track row.categoryId) {
@@ -122,14 +139,14 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
<div class="card-header">
<div>
<h3 class="card-title">{{ ui.t('dashboard.recent') }}</h3>
<div class="ec-card-header-muted">Ostatnio dodane pozycje wraz z kontrahentami.</div>
<div class="ec-card-header-muted">{{ ui.t('dashboard.recentHint') }}</div>
</div>
</div>
@if (recentExpenses.length) {
<div class="table-responsive">
<table class="table table-vcenter card-table table-striped mb-0">
<thead>
<tr><th>Tytuł</th><th>Kontrahent</th><th>Data</th><th class="text-end">Kwota</th></tr>
<tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.merchant') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr>
</thead>
<tbody>
@for (item of recentExpenses; track item.id) {
@@ -153,7 +170,7 @@ Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
</div>
`
})
export class DashboardComponent implements OnInit {
export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
readonly auth = inject(AuthService);
readonly ui = inject(UiService);
private readonly expensesService = inject(ExpensesService);
@@ -162,48 +179,102 @@ export class DashboardComponent implements OnInit {
recentExpenses: Expense[] = [];
stats: StatsResponse | null = null;
private categoryChart?: Chart;
private chartPending = false;
ngOnInit() {
const now = new Date();
const start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1)).toISOString().slice(0, 10);
const end = now.toISOString().slice(0, 10);
this.restoreCache();
this.loadDashboard();
}
this.expensesService.list({ startDate: start, endDate: end }).subscribe({
next: (response) => (this.recentExpenses = response.items.slice(0, 8))
});
ngAfterViewChecked() {
if (this.chartPending) {
this.chartPending = false;
this.renderChart();
}
}
this.statsService.overview({ startDate: start, endDate: end, bucket: 'month' }).subscribe({
next: (response) => {
this.stats = response;
setTimeout(() => this.renderChart(), 0);
}
});
ngOnDestroy() {
this.categoryChart?.destroy();
}
hasCategoryData() {
return Boolean(this.stats?.byCategory?.length);
}
private 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();
}
});
}
private renderChart() {
const canvas = document.getElementById('dashboardCategoryChart') as HTMLCanvasElement | null;
if (!canvas || !this.stats?.byCategory.length) {
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) }]
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' } }
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 };
this.recentExpenses = parsed.recentExpenses ?? [];
this.stats = parsed.stats ?? 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 }));
} catch {}
}
}

175
web/src/app/features/expenses/expenses.component.ts
View File

@@ -6,9 +6,17 @@ import { CategoriesService } from '../../core/services/categories.service';
import { ExpensesService } from '../../core/services/expenses.service';
import { MerchantsService } from '../../core/services/merchants.service';
import { ToastService } from '../../core/services/toast.service';
import { UiService } from '../../core/services/ui.service';
import type { Expense, Merchant, Proof } from '../../shared/models';
const today = new Date().toISOString().slice(0, 10);
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 today = formatLocalDate(new Date());
@Component({
selector: 'app-expenses',
@@ -18,8 +26,8 @@ const today = new Date().toISOString().slice(0, 10);
<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">Wydatki</h2>
<div class="text-secondary">Dodawaj wydatki, zapisuj potwierdzenia i wybieraj kontrahentów z listy.</div>
<h2 class="page-title mb-1">{{ ui.t('expenses.title') }}</h2>
<div class="text-secondary">{{ ui.t('expenses.subtitle') }}</div>
</div>
</div>
</div>
@@ -28,64 +36,80 @@ const today = new Date().toISOString().slice(0, 10);
<div class="col-xl-7">
<div class="card overflow-hidden">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="card-title">{{ editingExpenseId() ? 'Edytuj wydatek' : 'Nowy wydatek' }}</h3>
<h3 class="card-title">{{ editingExpenseId() ? ui.t('expenses.edit') : ui.t('expenses.new') }}</h3>
@if (editingExpenseId()) {
<button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">Anuluj edycję</button>
<button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">{{ ui.t('action.cancelEdit') }}</button>
}
</div>
<div class="card-body">
<form [formGroup]="expenseForm" (ngSubmit)="submitExpense()" class="d-grid gap-3">
<form [formGroup]="expenseForm" (ngSubmit)="submitExpense()" class="d-grid gap-3" novalidate>
@if (submitted() && expenseForm.invalid) {
<div class="alert alert-danger mb-0">{{ ui.t('expenses.requiredHint') }}</div>
}
<div class="row g-3">
<div class="col-md-7">
<label class="form-label">Tytuł</label>
<input class="form-control" formControlName="title" />
<label class="form-label">{{ ui.t('expenses.field.title') }} <span class="text-danger">*</span></label>
<input class="form-control" formControlName="title" [class.is-invalid]="expenseForm.controls.title.invalid && (expenseForm.controls.title.touched || submitted())" />
@if (expenseForm.controls.title.invalid && (expenseForm.controls.title.touched || submitted())) {
<div class="invalid-feedback d-block">{{ ui.t('expenses.validation.title') }}</div>
}
</div>
<div class="col-md-5">
<label class="form-label">Kwota</label>
<input class="form-control" type="number" step="0.01" formControlName="amount" />
<label class="form-label">{{ ui.t('expenses.field.amount') }} <span class="text-danger">*</span></label>
<input class="form-control" type="number" step="0.01" formControlName="amount" [class.is-invalid]="expenseForm.controls.amount.invalid && (expenseForm.controls.amount.touched || submitted())" />
@if (expenseForm.controls.amount.invalid && (expenseForm.controls.amount.touched || submitted())) {
<div class="invalid-feedback d-block">{{ ui.t('expenses.validation.amount') }}</div>
}
</div>
<div class="col-md-4">
<label class="form-label">Data</label>
<input class="form-control" type="date" formControlName="expenseDate" />
<label class="form-label">{{ ui.t('expenses.field.date') }} <span class="text-danger">*</span></label>
<input class="form-control" type="date" formControlName="expenseDate" [class.is-invalid]="expenseForm.controls.expenseDate.invalid && (expenseForm.controls.expenseDate.touched || submitted())" />
@if (expenseForm.controls.expenseDate.invalid && (expenseForm.controls.expenseDate.touched || submitted())) {
<div class="invalid-feedback d-block">{{ ui.t('expenses.validation.date') }}</div>
}
</div>
<div class="col-md-4">
<label class="form-label">Kategoria</label>
<select class="form-select" formControlName="categoryId">
<option value="">Wybierz</option>
<label class="form-label">{{ ui.t('expenses.field.category') }} <span class="text-danger">*</span></label>
<select class="form-select" formControlName="categoryId" [class.is-invalid]="expenseForm.controls.categoryId.invalid && (expenseForm.controls.categoryId.touched || submitted())">
<option value="">{{ ui.t('common.select') }}</option>
@for (category of categories(); track category.id) {
<option [value]="category.id">{{ category.name }}</option>
}
</select>
@if (expenseForm.controls.categoryId.invalid && (expenseForm.controls.categoryId.touched || submitted())) {
<div class="invalid-feedback d-block">{{ ui.t('expenses.validation.category') }}</div>
}
</div>
<div class="col-md-4">
<label class="form-label">Płatność</label>
<label class="form-label">{{ ui.t('expenses.field.payment') }}</label>
<select class="form-select" formControlName="paymentMethod">
<option value="">Brak</option>
<option value="CARD">Karta</option>
<option value="CASH">Gotówka</option>
<option value="TRANSFER">Przelew</option>
<option value="">{{ ui.t('expenses.payment.none') }}</option>
<option value="CARD">{{ ui.t('expenses.payment.card') }}</option>
<option value="CASH">{{ ui.t('expenses.payment.cash') }}</option>
<option value="TRANSFER">{{ ui.t('expenses.payment.transfer') }}</option>
<option value="BLIK">BLIK</option>
<option value="OTHER">Inne</option>
<option value="OTHER">{{ ui.t('expenses.payment.other') }}</option>
</select>
</div>
<div class="col-md-9">
<label class="form-label">Kontrahent</label>
<label class="form-label">{{ ui.t('expenses.field.merchantPicker') }}</label>
<div class="input-group">
<select class="form-select" [value]="selectedMerchantId()" (change)="selectMerchant($any($event.target).value)">
<option value="">Własny wpis</option>
<option value="">{{ ui.t('expenses.customEntry') }}</option>
@for (item of activeMerchants(); track item.id) {
<option [value]="item.id">{{ item.name }}</option>
}
</select>
<button class="btn btn-outline-primary" type="button" (click)="openMerchantModal()">Dodaj</button>
<button class="btn btn-outline-primary" type="button" (click)="openMerchantModal()">{{ ui.t('action.add') }}</button>
</div>
</div>
<div class="col-md-3">
<label class="form-label">Nazwa w wydatku</label>
<label class="form-label">{{ ui.t('expenses.field.merchantName') }}</label>
<input class="form-control" formControlName="merchant" />
</div>
<div class="col-12">
<label class="form-label">Opis</label>
<label class="form-label">{{ ui.t('expenses.field.description') }}</label>
<textarea class="form-control" rows="3" formControlName="description"></textarea>
</div>
</div>
@@ -95,49 +119,49 @@ const today = new Date().toISOString().slice(0, 10);
<div class="card-body d-grid gap-3">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Typ potwierdzenia</label>
<label class="form-label">{{ ui.t('expenses.field.proofType') }}</label>
<select class="form-select" formControlName="proofType">
<option value="RECEIPT">Paragon</option>
<option value="INVOICE">Faktura</option>
<option value="NOTE">Notatka</option>
<option value="BANK_STATEMENT">Wyciąg</option>
<option value="OTHER">Inne</option>
<option value="RECEIPT">{{ ui.t('proof.receipt') }}</option>
<option value="INVOICE">{{ ui.t('proof.invoice') }}</option>
<option value="NOTE">{{ ui.t('proof.note') }}</option>
<option value="BANK_STATEMENT">{{ ui.t('proof.statement') }}</option>
<option value="OTHER">{{ ui.t('proof.other') }}</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Etykieta</label>
<label class="form-label">{{ ui.t('expenses.field.proofLabel') }}</label>
<input class="form-control" formControlName="proofLabel" />
</div>
<div class="col-md-4">
<label class="form-label">Plik</label>
<label class="form-label">{{ ui.t('expenses.field.file') }}</label>
<input class="form-control" type="file" accept="image/*,.pdf" (change)="onProofSelected($event)" />
</div>
<div class="col-12">
<label class="form-label">Notatka do potwierdzenia</label>
<label class="form-label">{{ ui.t('expenses.field.proofNote') }}</label>
<textarea class="form-control" rows="2" formControlName="proofNote"></textarea>
</div>
</div>
@if (showCropper()) {
<div>
<div class="form-label">Kadrowanie</div>
<div class="form-label">{{ ui.t('expenses.field.crop') }}</div>
<image-cropper [imageChangedEvent]="imageChangedEvent()" [maintainAspectRatio]="false" format="png" (imageCropped)="onImageCropped($event)"></image-cropper>
</div>
}
@if (croppedPreview()) {
<div>
<div class="form-label">Podgląd po cropie</div>
<img class="img-fluid rounded" [src]="croppedPreview()" alt="Podgląd" />
<div class="form-label">{{ ui.t('expenses.field.cropPreview') }}</div>
<img class="img-fluid rounded" [src]="croppedPreview()" [alt]="ui.t('expenses.field.cropPreview')" />
</div>
}
</div>
</div>
}
<button class="btn btn-success d-inline-flex align-items-center justify-content-center gap-2" [disabled]="expenseForm.invalid || saving()">
<button class="btn btn-success d-inline-flex align-items-center justify-content-center gap-2" [disabled]="saving()">
<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="M5 12l5 5l10 -10"/></svg>
<span>{{ saving() ? 'Zapisywanie...' : (editingExpenseId() ? 'Zapisz zmiany' : 'Dodaj wydatek') }}</span>
<span>{{ saving() ? ui.t('expenses.saving') : (editingExpenseId() ? ui.t('action.saveChanges') : ui.t('action.addExpense')) }}</span>
</button>
</form>
</div>
@@ -146,23 +170,23 @@ const today = new Date().toISOString().slice(0, 10);
<div class="col-xl-5">
<div class="card sticky-top overflow-hidden" style="top: 1rem;">
<div class="card-header"><h3 class="card-title">Filtry i ostatnie wydatki</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('expenses.filters') }}</h3></div>
<div class="card-body">
<form [formGroup]="filterForm" (ngSubmit)="loadExpenses()" class="row g-2 mb-4">
<div class="col-6"><input class="form-control" type="date" formControlName="startDate" /></div>
<div class="col-6"><input class="form-control" type="date" formControlName="endDate" /></div>
<div class="col-12">
<select class="form-select" formControlName="categoryId">
<option value="">Wszystkie kategorie</option>
<option value="">{{ ui.t('expenses.allCategories') }}</option>
@for (category of categories(); track category.id) {
<option [value]="category.id">{{ category.name }}</option>
}
</select>
</div>
<div class="col-12"><input class="form-control" formControlName="search" placeholder="Szukaj" /></div>
<div class="col-12"><input class="form-control" formControlName="search" [placeholder]="ui.t('expenses.search')" /></div>
<div class="col-12 d-flex gap-2">
<button class="btn btn-primary flex-fill">Filtruj</button>
<button class="btn btn-outline-secondary" type="button" (click)="resetFilters()">Reset</button>
<button class="btn btn-primary flex-fill">{{ ui.t('action.filter') }}</button>
<button class="btn btn-outline-secondary" type="button" (click)="resetFilters()">{{ ui.t('action.reset') }}</button>
</div>
</form>
@@ -173,14 +197,14 @@ const today = new Date().toISOString().slice(0, 10);
<div class="d-flex justify-content-between gap-3">
<div>
<div class="fw-semibold">{{ expense.title }}</div>
<div class="small text-secondary">{{ expense.merchant || 'Brak kontrahenta' }} • {{ expense.expenseDate | date:'shortDate' }}</div>
<div class="small text-secondary">{{ expense.merchant || ui.t('expenses.noMerchant') }} • {{ expense.expenseDate | date:'shortDate' }}</div>
<div class="small text-secondary">{{ expense.category.name }}</div>
</div>
<div class="text-end">
<div class="fw-bold">{{ expense.amount | currency:expense.currency:'symbol':'1.2-2' }}</div>
<div class="btn-list justify-content-end mt-2">
<button class="btn btn-outline-primary btn-sm" type="button" (click)="startEdit(expense)">Edytuj</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="removeExpense(expense)">Usuń</button>
<button class="btn btn-outline-primary btn-sm" type="button" (click)="startEdit(expense)">{{ ui.t('action.edit') }}</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="removeExpense(expense)">{{ ui.t('action.delete') }}</button>
</div>
</div>
</div>
@@ -188,7 +212,7 @@ const today = new Date().toISOString().slice(0, 10);
<div class="btn-list mt-3">
@for (proof of expense.proofs; track proof.id) {
<button class="btn btn-outline-info btn-sm" type="button" (click)="openProof(proof)">
{{ proof.label || proof.originalName || 'Potwierdzenie' }}
{{ proof.label || proof.originalName || ui.t('expenses.proof') }}
</button>
}
</div>
@@ -197,7 +221,7 @@ const today = new Date().toISOString().slice(0, 10);
}
</div>
} @else {
<div class="alert alert-warning mb-0">Brak wydatków do wyświetlenia.</div>
<div class="alert alert-warning mb-0">{{ ui.t('expenses.noItems') }}</div>
}
</div>
</div>
@@ -209,33 +233,33 @@ const today = new Date().toISOString().slice(0, 10);
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nowy kontrahent</h5>
<h5 class="modal-title">{{ ui.t('merchant.new') }}</h5>
<button class="btn-close" type="button" (click)="closeMerchantModal()"></button>
</div>
<form [formGroup]="merchantForm" (ngSubmit)="saveMerchant()">
<div class="modal-body">
<div class="d-grid gap-3">
<div>
<label class="form-label">Nazwa</label>
<label class="form-label">{{ ui.t('merchant.name') }}</label>
<input class="form-control" formControlName="name" />
</div>
<div>
<label class="form-label">Typ</label>
<label class="form-label">{{ ui.t('merchant.type') }}</label>
<select class="form-select" formControlName="kind">
<option value="MERCHANT">Sprzedawca</option>
<option value="SERVICE_PROVIDER">Usługodawca</option>
<option value="OTHER">Inny</option>
<option value="MERCHANT">{{ ui.t('merchant.kind.merchant') }}</option>
<option value="SERVICE_PROVIDER">{{ ui.t('merchant.kind.service') }}</option>
<option value="OTHER">{{ ui.t('merchant.kind.other') }}</option>
</select>
</div>
<div>
<label class="form-label">Notatki</label>
<label class="form-label">{{ ui.t('merchant.notes') }}</label>
<textarea class="form-control" rows="3" formControlName="notes"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost-secondary" type="button" (click)="closeMerchantModal()">Anuluj</button>
<button class="btn btn-success" [disabled]="merchantForm.invalid">Zapisz kontrahenta</button>
<button class="btn btn-ghost-secondary" type="button" (click)="closeMerchantModal()">{{ ui.t('action.cancel') }}</button>
<button class="btn btn-success" [disabled]="merchantForm.invalid">{{ ui.t('action.saveMerchant') }}</button>
</div>
</form>
</div>
@@ -249,14 +273,14 @@ const today = new Date().toISOString().slice(0, 10);
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ proofPreview()?.label || proofPreview()?.originalName || 'Potwierdzenie' }}</h5>
<h5 class="modal-title">{{ proofPreview()?.label || proofPreview()?.originalName || ui.t('expenses.proof') }}</h5>
<button class="btn-close" type="button" (click)="closeProofPreview()"></button>
</div>
<div class="modal-body">
@if ((proofPreview()?.mimeType || '').includes('pdf')) {
<embed [attr.src]="proofPreview()?.fileUrl" type="application/pdf" style="width:100%;height:75vh;" />
} @else {
<img class="img-fluid" [src]="proofPreview()?.fileUrl" alt="Potwierdzenie" />
<img class="img-fluid" [src]="proofPreview()?.fileUrl" [alt]="ui.t('expenses.proof')" />
}
</div>
</div>
@@ -267,6 +291,7 @@ const today = new Date().toISOString().slice(0, 10);
`
})
export class ExpensesComponent implements OnInit {
readonly ui = inject(UiService);
private readonly fb = inject(FormBuilder);
private readonly categoriesService = inject(CategoriesService);
private readonly merchantsService = inject(MerchantsService);
@@ -279,6 +304,7 @@ export class ExpensesComponent implements OnInit {
readonly selectedMerchantId = signal('');
readonly editingExpenseId = signal<string | null>(null);
readonly saving = signal(false);
readonly submitted = signal(false);
readonly merchantModalOpen = signal(false);
readonly proofPreview = signal<Proof | null>(null);
@@ -289,7 +315,7 @@ export class ExpensesComponent implements OnInit {
readonly expenseForm = this.fb.nonNullable.group({
title: ['', [Validators.required, Validators.minLength(2)]],
amount: [0],
amount: [0, [Validators.required, Validators.min(0.01)]],
expenseDate: [today, Validators.required],
categoryId: ['', Validators.required],
merchant: [''],
@@ -349,12 +375,12 @@ export class ExpensesComponent implements OnInit {
if (this.merchantForm.invalid) return;
this.merchantsService.create({ ...this.merchantForm.getRawValue(), isActive: true }).subscribe({
next: (response) => {
this.toast.success('Kontrahent został dodany.');
this.toast.success(this.ui.t('merchant.added'));
this.merchantModalOpen.set(false);
this.selectedMerchantId.set(response.item.id);
this.expenseForm.patchValue({ merchant: response.item.name });
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się dodać kontrahenta.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('merchant.saveError'))
});
}
@@ -380,7 +406,12 @@ export class ExpensesComponent implements OnInit {
}
submitExpense() {
this.submitted.set(true);
this.expenseForm.markAllAsTouched();
this.expenseForm.updateValueAndValidity();
if (this.expenseForm.invalid) return;
const raw = this.expenseForm.getRawValue();
this.saving.set(true);
@@ -399,13 +430,14 @@ export class ExpensesComponent implements OnInit {
.subscribe({
next: () => {
this.saving.set(false);
this.toast.success('Wydatek został zapisany.');
this.submitted.set(false);
this.toast.success(this.ui.t('expenses.saved'));
this.cancelEdit();
this.loadExpenses();
},
error: (error) => {
this.saving.set(false);
this.toast.error(error.error?.message ?? 'Nie udało się zapisać wydatku.');
this.toast.error(error.error?.message ?? this.ui.t('expenses.saveError'));
}
});
return;
@@ -428,7 +460,8 @@ export class ExpensesComponent implements OnInit {
this.expensesService.create(formData).subscribe({
next: () => {
this.saving.set(false);
this.toast.success('Wydatek został dodany.');
this.submitted.set(false);
this.toast.success(this.ui.t('expenses.added'));
this.expenseForm.reset({
title: '',
amount: 0,
@@ -449,13 +482,14 @@ export class ExpensesComponent implements OnInit {
},
error: (error) => {
this.saving.set(false);
this.toast.error(error.error?.message ?? 'Nie udało się dodać wydatku.');
this.toast.error(error.error?.message ?? this.ui.t('expenses.addError'));
}
});
}
startEdit(item: Expense) {
this.editingExpenseId.set(item.id);
this.submitted.set(false);
this.expenseForm.patchValue({
title: item.title,
amount: item.amount,
@@ -469,6 +503,7 @@ export class ExpensesComponent implements OnInit {
cancelEdit() {
this.editingExpenseId.set(null);
this.submitted.set(false);
this.expenseForm.reset({
title: '',
amount: 0,
@@ -486,10 +521,10 @@ export class ExpensesComponent implements OnInit {
removeExpense(item: Expense) {
this.expensesService.delete(item.id).subscribe({
next: () => {
this.toast.success('Wydatek został usunięty.');
this.toast.success(this.ui.t('expenses.deleted'));
this.loadExpenses();
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się usunąć wydatku.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('expenses.deleteError'))
});
}

61
web/src/app/features/merchants/merchants.component.ts
View File

@@ -3,6 +3,7 @@ import { Component, OnInit, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { MerchantsService } from '../../core/services/merchants.service';
import { ToastService } from '../../core/services/toast.service';
import { UiService } from '../../core/services/ui.service';
import type { Merchant } from '../../shared/models';
@Component({
@@ -13,14 +14,14 @@ import type { Merchant } from '../../shared/models';
<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">Kontrahenci</h2>
<div class="text-secondary">Zapisani sprzedawcy i usługodawcy do szybkiego wyboru przy wydatkach.</div>
<h2 class="page-title mb-1">{{ ui.t('merchant.title') }}</h2>
<div class="text-secondary">{{ ui.t('merchant.subtitle') }}</div>
</div>
<div class="col-12 col-xl d-flex justify-content-xl-end">
<div class="ec-page-header-actions">
<button class="btn btn-success d-inline-flex align-items-center gap-2" type="button" (click)="openCreate()">
<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="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
<span>Dodaj kontrahenta</span>
<span>{{ ui.t('action.addMerchant') }}</span>
</button>
</div>
</div>
@@ -31,24 +32,24 @@ import type { Merchant } from '../../shared/models';
<div class="table-responsive">
<table class="table table-vcenter card-table mb-0">
<thead>
<tr><th>Nazwa</th><th>Typ</th><th>Status</th><th>Notatki</th><th class="w-1"></th></tr>
<tr><th>{{ ui.t('merchant.name') }}</th><th>{{ ui.t('merchant.type') }}</th><th>{{ ui.t('admin.status') }}</th><th>{{ ui.t('merchant.notes') }}</th><th class="w-1"></th></tr>
</thead>
<tbody>
@for (item of items(); track item.id) {
<tr>
<td>{{ item.name }}</td>
<td>{{ labelKind(item.kind) }}</td>
<td><span class="badge" [class.bg-success]="item.isActive" [class.bg-secondary]="!item.isActive">{{ item.isActive ? 'Aktywny' : 'Ukryty' }}</span></td>
<td>{{ item.notes || 'Brak' }}</td>
<td><span class="badge" [class.bg-success]="item.isActive" [class.bg-secondary]="!item.isActive">{{ item.isActive ? ui.t('common.active') : ui.t('common.hidden') }}</span></td>
<td>{{ item.notes || ui.t('common.none') }}</td>
<td>
<div class="btn-list flex-nowrap">
<button class="btn btn-outline-primary btn-sm" type="button" (click)="openEdit(item)">Edytuj</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="remove(item)">Usuń</button>
<button class="btn btn-outline-primary btn-sm" type="button" (click)="openEdit(item)">{{ ui.t('action.edit') }}</button>
<button class="btn btn-outline-danger btn-sm" type="button" (click)="remove(item)">{{ ui.t('action.delete') }}</button>
</div>
</td>
</tr>
} @empty {
<tr><td colspan="5" class="text-secondary">Brak zapisanych kontrahentów.</td></tr>
<tr><td colspan="5" class="text-secondary">{{ ui.t('merchant.noneSaved') }}</td></tr>
}
</tbody>
</table>
@@ -60,39 +61,39 @@ import type { Merchant } from '../../shared/models';
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ editingId() ? 'Edytuj kontrahenta' : 'Nowy kontrahent' }}</h5>
<h5 class="modal-title">{{ editingId() ? ui.t('merchant.edit') : ui.t('merchant.new') }}</h5>
<button type="button" class="btn-close" (click)="closeModal()"></button>
</div>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Nazwa</label>
<label class="form-label">{{ ui.t('merchant.name') }}</label>
<input class="form-control" formControlName="name" />
</div>
<div class="col-md-6">
<label class="form-label">Typ</label>
<label class="form-label">{{ ui.t('merchant.type') }}</label>
<select class="form-select" formControlName="kind">
<option value="MERCHANT">Sprzedawca</option>
<option value="SERVICE_PROVIDER">Usługodawca</option>
<option value="OTHER">Inny</option>
<option value="MERCHANT">{{ ui.t('merchant.kind.merchant') }}</option>
<option value="SERVICE_PROVIDER">{{ ui.t('merchant.kind.service') }}</option>
<option value="OTHER">{{ ui.t('merchant.kind.other') }}</option>
</select>
</div>
<div class="col-12">
<label class="form-label">Notatki</label>
<label class="form-label">{{ ui.t('merchant.notes') }}</label>
<textarea class="form-control" rows="4" formControlName="notes"></textarea>
</div>
<div class="col-12">
<label class="form-check">
<input class="form-check-input" type="checkbox" formControlName="isActive" />
<span class="form-check-label">Pokazuj na listach wyboru</span>
<span class="form-check-label">{{ ui.t('merchant.showOnLists') }}</span>
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost-secondary" type="button" (click)="closeModal()">Anuluj</button>
<button class="btn btn-success" [disabled]="form.invalid">{{ editingId() ? 'Zapisz' : 'Dodaj' }}</button>
<button class="btn btn-ghost-secondary" type="button" (click)="closeModal()">{{ ui.t('action.cancel') }}</button>
<button class="btn btn-success" [disabled]="form.invalid">{{ editingId() ? ui.t('action.save') : ui.t('action.add') }}</button>
</div>
</form>
</div>
@@ -103,6 +104,7 @@ import type { Merchant } from '../../shared/models';
`
})
export class MerchantsComponent implements OnInit {
readonly ui = inject(UiService);
private readonly fb = inject(FormBuilder);
private readonly merchants = inject(MerchantsService);
private readonly toast = inject(ToastService);
@@ -123,7 +125,11 @@ export class MerchantsComponent implements OnInit {
}
labelKind(kind: Merchant['kind']) {
return kind === 'SERVICE_PROVIDER' ? 'Usługodawca' : kind === 'MERCHANT' ? 'Sprzedawca' : 'Inny';
return kind === 'SERVICE_PROVIDER'
? this.ui.t('merchant.kind.service')
: kind === 'MERCHANT'
? this.ui.t('merchant.kind.merchant')
: this.ui.t('merchant.kind.other');
}
openCreate() {
@@ -134,12 +140,7 @@ export class MerchantsComponent implements OnInit {
openEdit(item: Merchant) {
this.editingId.set(item.id);
this.form.reset({
name: item.name,
kind: item.kind,
notes: item.notes ?? '',
isActive: item.isActive
});
this.form.reset({ name: item.name, kind: item.kind, notes: item.notes ?? '', isActive: item.isActive });
this.modalOpen.set(true);
}
@@ -154,17 +155,17 @@ export class MerchantsComponent implements OnInit {
request.subscribe({
next: () => {
this.toast.success(this.editingId() ? 'Kontrahent został zapisany.' : 'Kontrahent został dodany.');
this.toast.success(this.editingId() ? this.ui.t('merchant.saved') : this.ui.t('merchant.added'));
this.closeModal();
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać kontrahenta.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('merchant.saveError'))
});
}
remove(item: Merchant) {
this.merchants.delete(item.id).subscribe({
next: () => this.toast.success('Kontrahent został usunięty.'),
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się usunąć kontrahenta.')
next: () => this.toast.success(this.ui.t('merchant.deleted')),
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('merchant.deleteError'))
});
}
}

62
web/src/app/features/reports/reports.component.ts
View File

@@ -4,6 +4,7 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CategoriesService } from '../../core/services/categories.service';
import { ReportsService } from '../../core/services/reports.service';
import { ToastService } from '../../core/services/toast.service';
import { UiService } from '../../core/services/ui.service';
import type { ReportPreferences, StatsResponse } from '../../shared/models';
import { CategoryPickerComponent } from '../../shared/ui/category-picker.component';
@@ -15,53 +16,53 @@ import { CategoryPickerComponent } from '../../shared/ui/category-picker.compone
<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">Raporty</h2>
<div class="text-secondary">Skonfiguruj raporty SMTP, podgląd i ręczne wysyłanie podsumowań.</div>
<h2 class="page-title mb-1">{{ ui.t('reports.title') }}</h2>
<div class="text-secondary">{{ ui.t('reports.subtitle') }}</div>
</div>
</div>
</div>
<div class="row row-cards">
<div class="col-lg-5">
<div class="card pv-card overflow-hidden">
<div class="card-header"><h3 class="card-title">Raporty e-mail</h3></div>
<div class="card pv-card overflow-visible">
<div class="card-header"><h3 class="card-title">{{ ui.t('reports.emailTitle') }}</h3></div>
<div class="card-body">
<form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
<label class="form-check">
<input class="form-check-input" type="checkbox" formControlName="enabled" />
<span class="form-check-label">Włącz raporty</span>
<span class="form-check-label">{{ ui.t('reports.enable') }}</span>
</label>
<div>
<label class="form-label">Częstotliwość</label>
<label class="form-label">{{ ui.t('reports.frequency') }}</label>
<select class="form-select" formControlName="frequency">
<option value="monthly">Miesięczna</option>
<option value="yearly">Roczna</option>
<option value="threshold">Po przekroczeniu progu</option>
<option value="monthly">{{ ui.t('reports.frequency.monthly') }}</option>
<option value="yearly">{{ ui.t('reports.frequency.yearly') }}</option>
<option value="threshold">{{ ui.t('reports.frequency.threshold') }}</option>
</select>
</div>
<div>
<label class="form-label">Adres docelowy</label>
<label class="form-label">{{ ui.t('reports.targetEmail') }}</label>
<input class="form-control" formControlName="sendToEmail" />
</div>
<div>
<label class="form-label">Próg kwotowy</label>
<label class="form-label">{{ ui.t('reports.threshold') }}</label>
<input class="form-control" type="number" step="0.01" formControlName="thresholdAmount" />
</div>
<div>
<label class="form-label">Kategorie raportu</label>
<label class="form-label">{{ ui.t('reports.categories') }}</label>
<app-category-picker
[items]="categories()"
[selectedIds]="form.getRawValue().categoryIds"
placeholder="Wszystkie kategorie"
[placeholder]="ui.t('expenses.allCategories')"
(changed)="setCategoryIds($event)"></app-category-picker>
</div>
<div class="btn-list flex-wrap">
<button class="btn btn-success d-inline-flex align-items-center gap-2" [disabled]="form.invalid" type="submit">
<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="M5 12l5 5l10 -10"/></svg>
<span>Zapisz</span>
<span>{{ ui.t('action.save') }}</span>
</button>
<button class="btn btn-outline-info" type="button" (click)="preview()">Odśwież podgląd</button>
<button class="btn btn-warning" type="button" (click)="send()">Wyślij teraz</button>
<button class="btn btn-outline-info" type="button" (click)="preview()">{{ ui.t('action.refreshPreview') }}</button>
<button class="btn btn-warning" type="button" (click)="send()">{{ ui.t('action.sendNow') }}</button>
</div>
</form>
</div>
@@ -70,13 +71,13 @@ import { CategoryPickerComponent } from '../../shared/ui/category-picker.compone
<div class="col-lg-7">
<div class="card pv-card overflow-hidden">
<div class="card-header"><h3 class="card-title">Podgląd raportu</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('reports.preview') }}</h3></div>
<div class="card-body">
@if (summary()) {
<div class="row g-3 mb-4">
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Suma</div><div class="h1">{{ summary()!.total.toFixed(2) }}</div></div></div></div>
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Liczba</div><div class="h1">{{ summary()!.count }}</div></div></div></div>
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Średnia</div><div class="h1">{{ summary()!.average.toFixed(2) }}</div></div></div></div>
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.sum') }}</div><div class="h1">{{ summary()!.total.toFixed(2) }}</div></div></div></div>
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.count') }}</div><div class="h1">{{ summary()!.count }}</div></div></div></div>
<div class="col-sm-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.average') }}</div><div class="h1">{{ summary()!.average.toFixed(2) }}</div></div></div></div>
</div>
}
<div class="card bg-body-tertiary overflow-hidden">
@@ -91,13 +92,14 @@ import { CategoryPickerComponent } from '../../shared/ui/category-picker.compone
`
})
export class ReportsComponent implements OnInit {
readonly ui = inject(UiService);
private readonly fb = inject(FormBuilder);
private readonly categoriesService = inject(CategoriesService);
private readonly reports = inject(ReportsService);
private readonly toast = inject(ToastService);
readonly categories = this.categoriesService.items;
readonly html = signal('<div class="text-secondary">Brak danych raportu.</div>');
readonly html = signal(`<div class="text-secondary">${this.ui.t('reports.noData')}</div>`);
readonly summary = signal<StatsResponse | null>(null);
readonly form = this.fb.nonNullable.group({
@@ -130,31 +132,29 @@ export class ReportsComponent implements OnInit {
save() {
if (this.form.invalid) return;
const payload: ReportPreferences = this.form.getRawValue();
this.reports.updatePreferences(payload).subscribe({
this.reports.updatePreferences(this.form.getRawValue()).subscribe({
next: () => {
this.toast.success('Ustawienia raportów zapisane.');
this.toast.success(this.ui.t('reports.saved'));
this.preview();
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać raportów.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.saveError'))
});
}
preview() {
const payload: ReportPreferences = this.form.getRawValue();
this.reports.preview(payload).subscribe({
this.reports.preview(this.form.getRawValue()).subscribe({
next: (response) => {
this.html.set(response.html);
this.summary.set(response.summary);
this.html.set(response.html || `<div class="text-secondary">${this.ui.t('reports.noData')}</div>`);
},
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się pobrać podglądu.')
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.previewError'))
});
}
send() {
this.reports.send().subscribe({
next: (response) => this.toast.success(`Raport wysłano na ${response.sentTo}.`),
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się wysłać raportu.')
next: (response) => this.toast.success(this.ui.t('reports.sentTo', { email: response.sentTo })),
error: (error) => this.toast.error(error.error?.message ?? this.ui.t('reports.sendError'))
});
}
}

126
web/src/app/features/stats/stats.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule, CurrencyPipe } from '@angular/common';
import { Component, OnInit, inject, signal } from '@angular/core';
import { AfterViewChecked, Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import {
Chart,
@@ -15,6 +15,7 @@ import {
} from 'chart.js';
import { CategoriesService } from '../../core/services/categories.service';
import { StatsService } from '../../core/services/stats.service';
import { UiService } from '../../core/services/ui.service';
import type { StatsResponse } from '../../shared/models';
import { CategoryPickerComponent } from '../../shared/ui/category-picker.component';
@@ -30,6 +31,8 @@ Chart.register(
LinearScale
);
const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];
@Component({
selector: 'app-stats',
standalone: true,
@@ -38,61 +41,61 @@ Chart.register(
<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">Statystyki</h2>
<div class="text-secondary">Analiza miesięczna, kwartalna i roczna z podziałem na kategorie i zakres dat.</div>
<h2 class="page-title mb-1">{{ ui.t('stats.title') }}</h2>
<div class="text-secondary">{{ ui.t('stats.subtitle') }}</div>
</div>
</div>
</div>
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-hidden">
<div class="card overflow-visible">
<div class="card-body">
<form [formGroup]="form" (ngSubmit)="load()" class="row g-3 align-items-end">
<div class="col-md-3">
<label class="form-label">Okres</label>
<label class="form-label">{{ ui.t('stats.period') }}</label>
<select class="form-select" formControlName="bucket">
<option value="month">Miesięczny</option>
<option value="quarter">Kwartalny</option>
<option value="year">Roczny</option>
<option value="month">{{ ui.t('stats.period.month') }}</option>
<option value="quarter">{{ ui.t('stats.period.quarter') }}</option>
<option value="year">{{ ui.t('stats.period.year') }}</option>
</select>
</div>
<div class="col-md-3"><label class="form-label">Od</label><input class="form-control" type="date" formControlName="startDate" /></div>
<div class="col-md-3"><label class="form-label">Do</label><input class="form-control" type="date" formControlName="endDate" /></div>
<div class="col-md-3"><label class="form-label">{{ ui.t('stats.from') }}</label><input class="form-control" type="date" formControlName="startDate" /></div>
<div class="col-md-3"><label class="form-label">{{ ui.t('stats.to') }}</label><input class="form-control" type="date" formControlName="endDate" /></div>
<div class="col-md-3">
<label class="form-label">Kategorie</label>
<label class="form-label">{{ ui.t('reports.categories') }}</label>
<app-category-picker
[items]="categories()"
[selectedIds]="form.getRawValue().categoryIds"
placeholder="Wszystkie kategorie"
[placeholder]="ui.t('expenses.allCategories')"
(changed)="setCategoryIds($event)"></app-category-picker>
</div>
<div class="col-12 d-flex gap-2 flex-wrap">
<button class="btn btn-success d-inline-flex align-items-center gap-2" type="submit">
<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="M5 12l5 5l10 -10"/></svg>
<span>Pokaż</span>
<span>{{ ui.t('action.show') }}</span>
</button>
<button class="btn btn-outline-secondary" type="button" (click)="reset()">Reset</button>
<button class="btn btn-outline-secondary" type="button" (click)="reset()">{{ ui.t('action.reset') }}</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Suma</div><div class="display-6">{{ stats()?.total || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
<div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Liczba</div><div class="display-6">{{ stats()?.count || 0 }}</div></div></div></div>
<div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">Średnia</div><div class="display-6">{{ stats()?.average || 0 | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
<div class="col-md-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.sum') }}</div><div class="display-6">{{ (stats()?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
<div class="col-md-4"><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-4"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('stats.average') }}</div><div class="display-6">{{ (stats()?.average || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
<div class="col-lg-6 d-flex align-items-stretch">
<div class="card pv-card h-100 w-100 overflow-hidden">
<div class="card-header"><h3 class="card-title">Udział kategorii</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('stats.share') }}</h3></div>
<div class="card-body">
@if (hasCategoryData()) {
<div class="ec-chart-wrap ec-chart-wrap-sm">
<canvas id="statsCategoryChart"></canvas>
</div>
} @else {
<div class="alert alert-info mb-0">Brak danych do wykresu kategorii.</div>
<div class="alert alert-info mb-0">{{ ui.t('stats.noCategoryChart') }}</div>
}
</div>
</div>
@@ -100,14 +103,14 @@ Chart.register(
<div class="col-lg-6 d-flex align-items-stretch">
<div class="card pv-card h-100 w-100 overflow-hidden">
<div class="card-header"><h3 class="card-title">Trend wydatków</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('stats.trend') }}</h3></div>
<div class="card-body">
@if (hasTimelineData()) {
<div class="ec-chart-wrap ec-chart-wrap-sm">
<canvas id="statsLineChart"></canvas>
</div>
} @else {
<div class="alert alert-info mb-0">Brak danych do wykresu trendu.</div>
<div class="alert alert-info mb-0">{{ ui.t('stats.noTrendChart') }}</div>
}
</div>
</div>
@@ -115,10 +118,10 @@ Chart.register(
<div class="col-12">
<div class="card overflow-hidden">
<div class="card-header"><h3 class="card-title">Podział kategorii</h3></div>
<div class="card-header"><h3 class="card-title">{{ ui.t('stats.breakdown') }}</h3></div>
<div class="table-responsive">
<table class="table table-vcenter card-table mb-0">
<thead><tr><th>Kategoria</th><th class="text-end">Kwota</th><th class="text-end">Liczba</th></tr></thead>
<thead><tr><th>{{ ui.t('table.category') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th><th class="text-end">{{ ui.t('table.count') }}</th></tr></thead>
<tbody>
@for (row of stats()?.byCategory || []; track row.categoryId) {
<tr>
@@ -127,7 +130,7 @@ Chart.register(
<td class="text-end">{{ row.count }}</td>
</tr>
} @empty {
<tr><td colspan="3" class="text-secondary">Brak danych.</td></tr>
<tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
}
</tbody>
</table>
@@ -137,7 +140,8 @@ Chart.register(
</div>
`
})
export class StatsComponent implements OnInit {
export class StatsComponent implements OnInit, AfterViewChecked, OnDestroy {
readonly ui = inject(UiService);
private readonly fb = inject(FormBuilder);
private readonly categoriesService = inject(CategoriesService);
private readonly statsService = inject(StatsService);
@@ -146,6 +150,7 @@ export class StatsComponent implements OnInit {
readonly stats = signal<StatsResponse | null>(null);
private categoryChart?: Chart;
private lineChart?: Chart;
private chartsPending = false;
readonly form = this.fb.nonNullable.group({
bucket: ['month' as 'month' | 'quarter' | 'year'],
@@ -159,6 +164,18 @@ export class StatsComponent implements OnInit {
this.load();
}
ngAfterViewChecked() {
if (this.chartsPending) {
this.chartsPending = false;
this.renderCharts();
}
}
ngOnDestroy() {
this.categoryChart?.destroy();
this.lineChart?.destroy();
}
setCategoryIds(categoryIds: string[]) {
this.form.patchValue({ categoryIds });
}
@@ -175,7 +192,7 @@ export class StatsComponent implements OnInit {
.subscribe({
next: (response) => {
this.stats.set(response);
setTimeout(() => this.renderCharts(), 0);
this.chartsPending = true;
}
});
}
@@ -199,17 +216,34 @@ export class StatsComponent implements OnInit {
const lineCanvas = document.getElementById('statsLineChart') as HTMLCanvasElement | null;
if (categoryCanvas && current?.byCategory?.length) {
const colors = current.byCategory.map((_, index) => chartPalette[index % chartPalette.length]);
this.categoryChart?.destroy();
this.categoryChart = new Chart(categoryCanvas, {
type: 'doughnut',
data: {
labels: current.byCategory.map((item) => item.categoryName),
datasets: [{ data: current.byCategory.map((item) => item.total) }]
datasets: [
{
data: current.byCategory.map((item) => item.total),
backgroundColor: colors,
borderColor: '#ffffff',
hoverOffset: 10
}
]
},
options: {
maintainAspectRatio: false,
cutout: '64%',
plugins: { legend: { position: 'bottom' } }
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
boxWidth: 10,
color: '#9ca3af'
}
}
}
}
});
} else {
@@ -222,9 +256,41 @@ export class StatsComponent implements OnInit {
type: 'line',
data: {
labels: current.timeline.map((item) => item.label),
datasets: [{ label: 'Wydatki', data: current.timeline.map((item) => item.total), tension: 0.35 }]
datasets: [
{
label: this.ui.t('stats.expensesLabel'),
data: current.timeline.map((item) => item.total),
tension: 0.35,
borderColor: '#206bc4',
backgroundColor: 'rgba(32,107,196,0.18)',
pointBackgroundColor: '#2fb344',
pointBorderColor: '#ffffff',
pointRadius: 4,
pointHoverRadius: 6,
fill: true
}
]
},
options: { maintainAspectRatio: false }
options: {
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#9ca3af'
}
}
},
scales: {
x: {
ticks: { color: '#9ca3af' },
grid: { color: 'rgba(148,163,184,0.16)' }
},
y: {
ticks: { color: '#9ca3af' },
grid: { color: 'rgba(148,163,184,0.16)' }
}
}
}
});
} else {
this.lineChart?.destroy();