first commit
This commit is contained in:
Mateusz Gruszczyński
242
web/src/app/features/admin/admin.component.ts
Normal file
242
web/src/app/features/admin/admin.component.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
import { CommonModule, DatePipe } from '@angular/common';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
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 type { AppSettings, User } from '../../shared/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, 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">Administracja</h2>
|
||||
<div class="text-secondary">Ustawienia aplikacji, SMTP oraz zarządzanie użytkownikami.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-body">
|
||||
<form [formGroup]="form" (ngSubmit)="save()" class="d-grid gap-3">
|
||||
<div>
|
||||
<label class="form-label">Nazwa aplikacji</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>
|
||||
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" formControlName="registrationEnabled" />
|
||||
<span class="form-check-label">Włącz rejestrację</span>
|
||||
</label>
|
||||
|
||||
<hr class="my-2" />
|
||||
<div class="fw-semibold">SMTP</div>
|
||||
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" formControlName="smtpEnabled" />
|
||||
<span class="form-check-label">Włącz SMTP</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>
|
||||
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" formControlName="smtpSecure" />
|
||||
<span class="form-check-label">Bezpieczne połączenie</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>
|
||||
</button>
|
||||
<button class="btn btn-outline-info" type="button" (click)="sendTest()">Test SMTP</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<tbody>
|
||||
@for (user of users(); track user.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ user.fullName }}</div>
|
||||
<div class="small text-secondary">{{ user.email }}</div>
|
||||
</td>
|
||||
<td>{{ user.role }}</td>
|
||||
<td>
|
||||
<span class="badge" [class.bg-success]="user.isActive" [class.bg-secondary]="!user.isActive">
|
||||
{{ user.isActive ? 'Aktywny' : 'Zablokowany' }}
|
||||
</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' }}
|
||||
</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' }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr><td colspan="5" class="text-secondary">Brak użytkowników.</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class AdminComponent implements OnInit {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly admin = inject(AdminService);
|
||||
private readonly appSettings = inject(AppSettingsService);
|
||||
private readonly toast = inject(ToastService);
|
||||
|
||||
readonly users = signal<User[]>([]);
|
||||
readonly settings = signal<AppSettings | null>(null);
|
||||
readonly saving = signal(false);
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
appName: ['', [Validators.required, Validators.minLength(2)]],
|
||||
defaultCurrency: ['PLN', Validators.required],
|
||||
allowedProofTypes: ['RECEIPT,INVOICE,NOTE,BANK_STATEMENT,OTHER', Validators.required],
|
||||
registrationEnabled: [true],
|
||||
smtpEnabled: [false],
|
||||
smtpHost: [''],
|
||||
smtpPort: [587],
|
||||
smtpSecure: [false],
|
||||
smtpUser: [''],
|
||||
smtpPassword: [''],
|
||||
smtpFromName: [''],
|
||||
smtpFromEmail: ['']
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.load();
|
||||
}
|
||||
|
||||
load() {
|
||||
this.admin.getSettings().subscribe({
|
||||
next: (response) => {
|
||||
this.settings.set(response.item);
|
||||
this.appSettings.applySettings(response.item);
|
||||
this.form.reset({
|
||||
appName: response.item.appName,
|
||||
defaultCurrency: response.item.defaultCurrency,
|
||||
allowedProofTypes: response.item.allowedProofTypes.join(','),
|
||||
registrationEnabled: response.item.registrationEnabled,
|
||||
smtpEnabled: response.item.smtpEnabled,
|
||||
smtpHost: response.item.smtpHost ?? '',
|
||||
smtpPort: response.item.smtpPort,
|
||||
smtpSecure: response.item.smtpSecure,
|
||||
smtpUser: response.item.smtpUser ?? '',
|
||||
smtpPassword: response.item.smtpPassword ?? '',
|
||||
smtpFromName: response.item.smtpFromName ?? '',
|
||||
smtpFromEmail: response.item.smtpFromEmail ?? ''
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.admin.listUsers().subscribe({ next: (response) => this.users.set(response.items) });
|
||||
}
|
||||
|
||||
save() {
|
||||
if (this.form.invalid) return;
|
||||
this.saving.set(true);
|
||||
const raw = this.form.getRawValue();
|
||||
this.admin
|
||||
.updateSettings({
|
||||
appName: raw.appName,
|
||||
defaultCurrency: raw.defaultCurrency,
|
||||
registrationEnabled: raw.registrationEnabled,
|
||||
allowedProofTypes: raw.allowedProofTypes.split(',').map((item) => item.trim()).filter(Boolean),
|
||||
uiPreferences: { theme: 'dark', density: 'comfortable', defaultStatsPeriod: 'month' },
|
||||
smtpEnabled: raw.smtpEnabled,
|
||||
smtpHost: raw.smtpHost || null,
|
||||
smtpPort: Number(raw.smtpPort),
|
||||
smtpSecure: raw.smtpSecure,
|
||||
smtpUser: raw.smtpUser || null,
|
||||
smtpPassword: raw.smtpPassword || null,
|
||||
smtpFromName: raw.smtpFromName || null,
|
||||
smtpFromEmail: raw.smtpFromEmail || null
|
||||
})
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.saving.set(false);
|
||||
this.settings.set(response.item);
|
||||
this.appSettings.applySettings(response.item);
|
||||
this.toast.success('Ustawienia zapisane.');
|
||||
},
|
||||
error: (error) => {
|
||||
this.saving.set(false);
|
||||
this.toast.error(error.error?.message ?? 'Nie udało się zapisać ustawień.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
sendTest() {
|
||||
const to = this.form.getRawValue().smtpFromEmail;
|
||||
if (!to) {
|
||||
this.toast.error('Uzupełnij e-mail nadawcy.');
|
||||
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.')
|
||||
});
|
||||
}
|
||||
|
||||
toggleRole(user: User) {
|
||||
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.');
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zmienić roli.')
|
||||
});
|
||||
}
|
||||
|
||||
toggleActive(user: User) {
|
||||
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.');
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zmienić statusu.')
|
||||
});
|
||||
}
|
||||
}
|
||||
186
web/src/app/features/auth/login.component.ts
Normal file
186
web/src/app/features/auth/login.component.ts
Normal file
@@ -0,0 +1,186 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, inject, signal } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { AppSettingsService } from '../../core/services/app-settings.service';
|
||||
import { AuthService } from '../../core/services/auth.service';
|
||||
import { ToastService } from '../../core/services/toast.service';
|
||||
import { UiService } from '../../core/services/ui.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
template: `
|
||||
<div class="page page-center login-page-shell">
|
||||
<div class="container py-4">
|
||||
<div class="row justify-content-center align-items-stretch g-4 login-layout">
|
||||
<div class="col-12 col-md-10 col-lg-7 col-xl-5">
|
||||
<div class="card card-md login-card login-card-enhanced">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start gap-3 mb-4 flex-wrap">
|
||||
<div>
|
||||
<h1 class="h2 mb-1">{{ appSettings.appName() }}</h1>
|
||||
<div class="text-secondary">{{ mode() === 'login' ? loginSubtitle() : registerSubtitle() }}</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 login-toolbar-controls">
|
||||
<nav class="nav nav-segmented ec-segmented-control" role="tablist" [attr.aria-label]="ui.t('lang.label')">
|
||||
<button class="nav-link"
|
||||
type="button"
|
||||
role="tab"
|
||||
[class.active]="ui.language() === 'pl'"
|
||||
[attr.aria-selected]="ui.language() === 'pl'"
|
||||
[attr.aria-current]="ui.language() === 'pl' ? 'page' : null"
|
||||
(click)="ui.setLanguage('pl')">
|
||||
{{ ui.t('lang.pl') }}
|
||||
</button>
|
||||
<button class="nav-link"
|
||||
type="button"
|
||||
role="tab"
|
||||
[class.active]="ui.language() === 'en'"
|
||||
[attr.aria-selected]="ui.language() === 'en'"
|
||||
[attr.aria-current]="ui.language() === 'en' ? 'page' : null"
|
||||
(click)="ui.setLanguage('en')">
|
||||
{{ ui.t('lang.en') }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<nav class="nav nav-segmented ec-segmented-control" role="tablist" [attr.aria-label]="ui.t('theme.label')">
|
||||
<button class="nav-link d-inline-flex align-items-center gap-2"
|
||||
type="button"
|
||||
role="tab"
|
||||
[class.active]="ui.theme() === 'dark'"
|
||||
[attr.aria-selected]="ui.theme() === 'dark'"
|
||||
[attr.aria-current]="ui.theme() === 'dark' ? 'page' : null"
|
||||
(click)="ui.setTheme('dark')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" 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 3c.132 0 .263 0 .393 .007a8.5 8.5 0 0 0 0 16.986a9 9 0 1 1 -.393 -17z"/></svg>
|
||||
<span>{{ ui.t('theme.dark') }}</span>
|
||||
</button>
|
||||
<button class="nav-link d-inline-flex align-items-center gap-2"
|
||||
type="button"
|
||||
role="tab"
|
||||
[class.active]="ui.theme() === 'light'"
|
||||
[attr.aria-selected]="ui.theme() === 'light'"
|
||||
[attr.aria-current]="ui.theme() === 'light' ? 'page' : null"
|
||||
(click)="ui.setTheme('light')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" 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 3c.132 0 .263 0 .393 .007a9 9 0 1 0 0 17.986a9 9 0 0 0 -.393 -17.993z"/><path d="M12 3v1"/><path d="M12 20v1"/><path d="M3 12h1"/><path d="M20 12h1"/><path d="M5.6 5.6l.7 .7"/><path d="M17.7 17.7l.7 .7"/><path d="M17.7 6.3l.7 -.7"/><path d="M6.3 17.7l-.7 .7"/></svg>
|
||||
<span>{{ ui.t('theme.light') }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="submit()" class="login-input-stack">
|
||||
@if (mode() === 'register') {
|
||||
<div>
|
||||
<label class="form-label">{{ ui.t('login.fullName') }}</label>
|
||||
<input class="form-control form-control-lg" formControlName="fullName" autocomplete="name" />
|
||||
</div>
|
||||
}
|
||||
|
||||
<div>
|
||||
<label class="form-label">{{ ui.t('login.email') }}</label>
|
||||
<input class="form-control form-control-lg" formControlName="email" autocomplete="username" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">{{ ui.t('login.password') }}</label>
|
||||
<input class="form-control form-control-lg" type="password" formControlName="password" autocomplete="current-password" />
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary btn-lg w-100 login-submit-button" [disabled]="form.invalid || loading()">
|
||||
<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="M9 8l0 -2a2 2 0 1 1 4 0v2"/><path d="M5 8h14l0 12h-14z"/><path d="M12 12l0 .01"/></svg>
|
||||
{{ loading() ? (mode() === 'login' ? ui.t('action.loggingIn') : ui.t('action.creatingAccount')) : (mode() === 'login' ? ui.t('action.login') : ui.t('action.createAccount')) }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (appSettings.registrationEnabled()) {
|
||||
<div class="login-footer-note d-flex justify-content-between align-items-center gap-2 flex-wrap">
|
||||
<span>{{ mode() === 'login' ? switchToRegisterLabel() : switchToLoginLabel() }}</span>
|
||||
<button class="btn btn-ghost-primary btn-sm" type="button" (click)="mode.set(mode() === 'login' ? 'register' : 'login')">
|
||||
{{ mode() === 'login' ? ui.t('action.registerMode') : ui.t('action.loginMode') }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class LoginComponent {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly auth = inject(AuthService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly toast = inject(ToastService);
|
||||
readonly ui = inject(UiService);
|
||||
readonly appSettings = inject(AppSettingsService);
|
||||
|
||||
readonly loading = signal(false);
|
||||
readonly mode = signal<'login' | 'register'>('login');
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
password: ['', [Validators.required, Validators.minLength(6)]],
|
||||
fullName: ['']
|
||||
});
|
||||
|
||||
constructor() {
|
||||
this.appSettings.loadPublic().subscribe({ error: () => undefined });
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (this.form.invalid) return;
|
||||
this.loading.set(true);
|
||||
const raw = this.form.getRawValue();
|
||||
|
||||
if (this.mode() === 'login') {
|
||||
this.auth.login({ email: raw.email, password: raw.password }).subscribe({
|
||||
next: () => {
|
||||
this.loading.set(false);
|
||||
this.router.navigate(['/']);
|
||||
},
|
||||
error: (error) => {
|
||||
this.loading.set(false);
|
||||
this.toast.error(error.error?.message ?? 'Nie udało się zalogować.');
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.auth.register({ email: raw.email, password: raw.password, fullName: raw.fullName || raw.email }).subscribe({
|
||||
next: () => {
|
||||
this.loading.set(false);
|
||||
this.toast.success('Konto zostało utworzone.');
|
||||
this.mode.set('login');
|
||||
},
|
||||
error: (error) => {
|
||||
this.loading.set(false);
|
||||
this.toast.error(error.error?.message ?? 'Nie udało się utworzyć konta.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loginSubtitle() {
|
||||
return this.ui.language() === 'pl'
|
||||
? 'Zaloguj się, aby zarządzać wydatkami, kontrahentami i raportami.'
|
||||
: 'Sign in to manage expenses, merchants and reports.';
|
||||
}
|
||||
|
||||
registerSubtitle() {
|
||||
return this.ui.language() === 'pl'
|
||||
? 'Utwórz konto i zacznij zbierać potwierdzenia oraz statystyki.'
|
||||
: 'Create an account and start collecting proofs and analytics.';
|
||||
}
|
||||
|
||||
switchToRegisterLabel() {
|
||||
return this.ui.language() === 'pl' ? 'Nie masz konta?' : 'Need an account?';
|
||||
}
|
||||
|
||||
switchToLoginLabel() {
|
||||
return this.ui.language() === 'pl' ? 'Masz już konto?' : 'Already registered?';
|
||||
}
|
||||
}
|
||||
151
web/src/app/features/categories/categories.component.ts
Normal file
151
web/src/app/features/categories/categories.component.ts
Normal file
@@ -0,0 +1,151 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
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 type { Category } from '../../shared/models';
|
||||
|
||||
const presets = ['#b91c1c', '#2563eb', '#0891b2', '#16a34a', '#7c3aed', '#f59e0b', '#475569'];
|
||||
|
||||
@Component({
|
||||
selector: 'app-categories',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
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">Kategorie</h2>
|
||||
<div class="text-secondary">Zarządzaj kategoriami systemowymi i własnymi dla raportów oraz wydatków.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-body">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()" class="d-grid gap-3">
|
||||
<div>
|
||||
<label class="form-label">Nazwa</label>
|
||||
<input class="form-control" formControlName="name" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Kolor</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" />
|
||||
<input class="form-control form-control-color" type="color" formControlName="color" style="max-width: 4.25rem;" />
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-2 mt-2">
|
||||
@for (preset of presets; track preset) {
|
||||
<button class="btn btn-sm btn-outline-primary p-1" type="button" (click)="pickColor(preset)">
|
||||
<span class="ec-color-swatch" [style.background]="preset"></span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
@if (editingId) {
|
||||
<button class="btn btn-outline-secondary" type="button" (click)="reset()">Anuluj</button>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<tbody>
|
||||
@for (item of items(); track item.id) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge me-2" [style.background]="item.color"> </span>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td>{{ item.isSystem ? 'Systemowa' : 'Własna' }}</td>
|
||||
<td>
|
||||
<div class="btn-list flex-nowrap">
|
||||
@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>
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr><td colspan="3" class="text-secondary">Brak kategorii.</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class CategoriesComponent implements OnInit {
|
||||
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]
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.categories.ensureLoaded(true);
|
||||
}
|
||||
|
||||
pickColor(color: string) {
|
||||
this.form.patchValue({ color });
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (this.form.invalid) return;
|
||||
const payload = this.form.getRawValue();
|
||||
const request = this.editingId ? this.categories.update(this.editingId, payload) : this.categories.create(payload);
|
||||
|
||||
request.subscribe({
|
||||
next: () => {
|
||||
this.toast.success(this.editingId ? 'Kategoria została zapisana.' : 'Kategoria została dodana.');
|
||||
this.reset();
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać kategorii.')
|
||||
});
|
||||
}
|
||||
|
||||
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.')
|
||||
});
|
||||
}
|
||||
}
|
||||
209
web/src/app/features/dashboard/dashboard.component.ts
Normal file
209
web/src/app/features/dashboard/dashboard.component.ts
Normal file
@@ -0,0 +1,209 @@
|
||||
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
|
||||
import { Component, 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';
|
||||
import { UiService } from '../../core/services/ui.service';
|
||||
import { ExpensesService } from '../../core/services/expenses.service';
|
||||
import { StatsService } from '../../core/services/stats.service';
|
||||
import type { Expense, StatsResponse } from '../../shared/models';
|
||||
|
||||
Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule, CurrencyPipe, DatePipe, RouterLink],
|
||||
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">{{ 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">
|
||||
<a class="btn btn-success d-inline-flex align-items-center gap-2" routerLink="/expenses">
|
||||
<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>{{ ui.t('action.addExpense') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cards g-3">
|
||||
<div class="col-12">
|
||||
<div class="card pv-card pv-hero-card overflow-hidden">
|
||||
<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>
|
||||
<div class="col-lg-5">
|
||||
<div class="row g-3">
|
||||
<div class="col-6">
|
||||
<div class="border rounded-3 p-3 h-100 ec-metric-card">
|
||||
<div class="text-secondary small">{{ ui.t('dashboard.count') }}</div>
|
||||
<div class="h2 mb-0">{{ stats?.count || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="border rounded-3 p-3 h-100 ec-metric-card">
|
||||
<div class="text-secondary small">{{ ui.t('dashboard.top') }}</div>
|
||||
<div class="h3 mb-0">{{ stats?.topCategory?.categoryName || ui.t('common.none') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5 d-flex align-items-stretch">
|
||||
<div class="card pv-card w-100 overflow-hidden">
|
||||
<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>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if (hasCategoryData()) {
|
||||
<div class="ec-chart-wrap ec-chart-wrap-sm">
|
||||
<canvas id="dashboardCategoryChart"></canvas>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="alert alert-info mb-0">Brak danych do pokazania wykresu kategorii.</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7 d-flex align-items-stretch">
|
||||
<div class="card pv-card w-100 overflow-hidden">
|
||||
<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>
|
||||
</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (row of stats?.byCategory || []; track row.categoryId) {
|
||||
<tr>
|
||||
<td>{{ row.categoryName }}</td>
|
||||
<td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td>
|
||||
<td class="text-end">{{ row.count }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card pv-card overflow-hidden">
|
||||
<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>
|
||||
</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of recentExpenses; track item.id) {
|
||||
<tr>
|
||||
<td>{{ item.title }}</td>
|
||||
<td>{{ item.merchant || ui.t('common.none') }}</td>
|
||||
<td>{{ item.expenseDate | date:'shortDate' }}</td>
|
||||
<td class="text-end">{{ item.amount | currency:item.currency:'symbol':'1.2-2' }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="card-body">
|
||||
<div class="alert alert-warning mb-0">{{ ui.t('common.noExpenses') }}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
readonly auth = inject(AuthService);
|
||||
readonly ui = inject(UiService);
|
||||
private readonly expensesService = inject(ExpensesService);
|
||||
private readonly statsService = inject(StatsService);
|
||||
|
||||
recentExpenses: Expense[] = [];
|
||||
stats: StatsResponse | null = null;
|
||||
private categoryChart?: Chart;
|
||||
|
||||
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.expensesService.list({ startDate: start, endDate: end }).subscribe({
|
||||
next: (response) => (this.recentExpenses = response.items.slice(0, 8))
|
||||
});
|
||||
|
||||
this.statsService.overview({ startDate: start, endDate: end, bucket: 'month' }).subscribe({
|
||||
next: (response) => {
|
||||
this.stats = response;
|
||||
setTimeout(() => this.renderChart(), 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
hasCategoryData() {
|
||||
return Boolean(this.stats?.byCategory?.length);
|
||||
}
|
||||
|
||||
private renderChart() {
|
||||
const canvas = document.getElementById('dashboardCategoryChart') as HTMLCanvasElement | null;
|
||||
if (!canvas || !this.stats?.byCategory.length) {
|
||||
this.categoryChart?.destroy();
|
||||
return;
|
||||
}
|
||||
|
||||
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) }]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '66%',
|
||||
plugins: { legend: { position: 'bottom' } }
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
507
web/src/app/features/expenses/expenses.component.ts
Normal file
507
web/src/app/features/expenses/expenses.component.ts
Normal file
@@ -0,0 +1,507 @@
|
||||
import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
|
||||
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 type { Expense, Merchant, Proof } from '../../shared/models';
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
@Component({
|
||||
selector: 'app-expenses',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, DatePipe, ImageCropperComponent],
|
||||
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">Wydatki</h2>
|
||||
<div class="text-secondary">Dodawaj wydatki, zapisuj potwierdzenia i wybieraj kontrahentów z listy.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cards align-items-start">
|
||||
<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>
|
||||
@if (editingExpenseId()) {
|
||||
<button class="btn btn-outline-secondary btn-sm" type="button" (click)="cancelEdit()">Anuluj edycję</button>
|
||||
}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form [formGroup]="expenseForm" (ngSubmit)="submitExpense()" class="d-grid gap-3">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-7">
|
||||
<label class="form-label">Tytuł</label>
|
||||
<input class="form-control" formControlName="title" />
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label class="form-label">Kwota</label>
|
||||
<input class="form-control" type="number" step="0.01" formControlName="amount" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Data</label>
|
||||
<input class="form-control" type="date" formControlName="expenseDate" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Kategoria</label>
|
||||
<select class="form-select" formControlName="categoryId">
|
||||
<option value="">Wybierz</option>
|
||||
@for (category of categories(); track category.id) {
|
||||
<option [value]="category.id">{{ category.name }}</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Płatność</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="BLIK">BLIK</option>
|
||||
<option value="OTHER">Inne</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<label class="form-label">Kontrahent</label>
|
||||
<div class="input-group">
|
||||
<select class="form-select" [value]="selectedMerchantId()" (change)="selectMerchant($any($event.target).value)">
|
||||
<option value="">Własny wpis</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Nazwa w wydatku</label>
|
||||
<input class="form-control" formControlName="merchant" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Opis</label>
|
||||
<textarea class="form-control" rows="3" formControlName="description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!editingExpenseId()) {
|
||||
<div class="card bg-body-tertiary overflow-hidden">
|
||||
<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>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Etykieta</label>
|
||||
<input class="form-control" formControlName="proofLabel" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Plik</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>
|
||||
<textarea class="form-control" rows="2" formControlName="proofNote"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showCropper()) {
|
||||
<div>
|
||||
<div class="form-label">Kadrowanie</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>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<button class="btn btn-success d-inline-flex align-items-center justify-content-center gap-2" [disabled]="expenseForm.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>{{ saving() ? 'Zapisywanie...' : (editingExpenseId() ? 'Zapisz zmiany' : 'Dodaj wydatek') }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-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>
|
||||
@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 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>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if (expenses().length) {
|
||||
<div class="list-group list-group-flush">
|
||||
@for (expense of expenses(); track expense.id) {
|
||||
<div class="list-group-item px-0">
|
||||
<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.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (expense.proofs.length) {
|
||||
<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' }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="alert alert-warning mb-0">Brak wydatków do wyświetlenia.</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (merchantModalOpen()) {
|
||||
<div class="modal modal-blur fade show d-block" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Nowy kontrahent</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>
|
||||
<input class="form-control" formControlName="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Typ</label>
|
||||
<select class="form-select" formControlName="kind">
|
||||
<option value="MERCHANT">Sprzedawca</option>
|
||||
<option value="SERVICE_PROVIDER">Usługodawca</option>
|
||||
<option value="OTHER">Inny</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Notatki</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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop fade show"></div>
|
||||
}
|
||||
|
||||
@if (proofPreview()) {
|
||||
<div class="modal modal-blur fade show d-block" tabindex="-1">
|
||||
<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>
|
||||
<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" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop fade show"></div>
|
||||
}
|
||||
`
|
||||
})
|
||||
export class ExpensesComponent implements OnInit {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly categoriesService = inject(CategoriesService);
|
||||
private readonly merchantsService = inject(MerchantsService);
|
||||
private readonly expensesService = inject(ExpensesService);
|
||||
private readonly toast = inject(ToastService);
|
||||
|
||||
readonly categories = this.categoriesService.items;
|
||||
readonly merchants = this.merchantsService.items;
|
||||
readonly expenses = signal<Expense[]>([]);
|
||||
readonly selectedMerchantId = signal('');
|
||||
readonly editingExpenseId = signal<string | null>(null);
|
||||
readonly saving = signal(false);
|
||||
readonly merchantModalOpen = signal(false);
|
||||
readonly proofPreview = signal<Proof | null>(null);
|
||||
|
||||
readonly imageChangedEvent = signal<Event | null>(null);
|
||||
readonly croppedFile = signal<File | null>(null);
|
||||
readonly croppedPreview = signal<string | null>(null);
|
||||
readonly showCropper = signal(false);
|
||||
|
||||
readonly expenseForm = this.fb.nonNullable.group({
|
||||
title: ['', [Validators.required, Validators.minLength(2)]],
|
||||
amount: [0],
|
||||
expenseDate: [today, Validators.required],
|
||||
categoryId: ['', Validators.required],
|
||||
merchant: [''],
|
||||
paymentMethod: [''],
|
||||
description: [''],
|
||||
proofType: ['RECEIPT'],
|
||||
proofLabel: [''],
|
||||
proofNote: ['']
|
||||
});
|
||||
|
||||
readonly filterForm = this.fb.nonNullable.group({
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
categoryId: [''],
|
||||
search: ['']
|
||||
});
|
||||
|
||||
readonly merchantForm = this.fb.nonNullable.group({
|
||||
name: ['', [Validators.required, Validators.minLength(2)]],
|
||||
kind: ['MERCHANT' as Merchant['kind'], Validators.required],
|
||||
notes: ['']
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.categoriesService.ensureLoaded(true);
|
||||
this.merchantsService.ensureLoaded(true);
|
||||
this.loadExpenses();
|
||||
}
|
||||
|
||||
activeMerchants() {
|
||||
return this.merchants().filter((item) => item.isActive);
|
||||
}
|
||||
|
||||
loadExpenses() {
|
||||
this.expensesService.list(this.filterForm.getRawValue()).subscribe({
|
||||
next: (response) => this.expenses.set(response.items)
|
||||
});
|
||||
}
|
||||
|
||||
resetFilters() {
|
||||
this.filterForm.reset({ startDate: '', endDate: '', categoryId: '', search: '' });
|
||||
this.loadExpenses();
|
||||
}
|
||||
|
||||
selectMerchant(id: string) {
|
||||
this.selectedMerchantId.set(id);
|
||||
const merchant = this.merchants().find((item) => item.id === id);
|
||||
this.expenseForm.patchValue({ merchant: merchant?.name ?? '' });
|
||||
}
|
||||
|
||||
openMerchantModal() {
|
||||
this.merchantForm.reset({ name: '', kind: 'MERCHANT', notes: '' });
|
||||
this.merchantModalOpen.set(true);
|
||||
}
|
||||
|
||||
saveMerchant() {
|
||||
if (this.merchantForm.invalid) return;
|
||||
this.merchantsService.create({ ...this.merchantForm.getRawValue(), isActive: true }).subscribe({
|
||||
next: (response) => {
|
||||
this.toast.success('Kontrahent został dodany.');
|
||||
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.')
|
||||
});
|
||||
}
|
||||
|
||||
onProofSelected(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0] ?? null;
|
||||
this.croppedFile.set(file);
|
||||
this.croppedPreview.set(null);
|
||||
this.imageChangedEvent.set(event);
|
||||
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
this.showCropper.set(true);
|
||||
} else {
|
||||
this.showCropper.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
onImageCropped(event: ImageCroppedEvent) {
|
||||
if (!event.blob) return;
|
||||
const file = new File([event.blob], `proof-${Date.now()}.png`, { type: 'image/png' });
|
||||
this.croppedFile.set(file);
|
||||
this.croppedPreview.set(event.objectUrl ?? null);
|
||||
}
|
||||
|
||||
submitExpense() {
|
||||
if (this.expenseForm.invalid) return;
|
||||
const raw = this.expenseForm.getRawValue();
|
||||
this.saving.set(true);
|
||||
|
||||
if (this.editingExpenseId()) {
|
||||
this.expensesService
|
||||
.update(this.editingExpenseId()!, {
|
||||
title: raw.title,
|
||||
amount: raw.amount,
|
||||
expenseDate: raw.expenseDate,
|
||||
categoryId: raw.categoryId,
|
||||
merchant: raw.merchant,
|
||||
paymentMethod: raw.paymentMethod as Expense['paymentMethod'],
|
||||
description: raw.description,
|
||||
currency: 'PLN'
|
||||
})
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.saving.set(false);
|
||||
this.toast.success('Wydatek został zapisany.');
|
||||
this.cancelEdit();
|
||||
this.loadExpenses();
|
||||
},
|
||||
error: (error) => {
|
||||
this.saving.set(false);
|
||||
this.toast.error(error.error?.message ?? 'Nie udało się zapisać wydatku.');
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.set('title', raw.title);
|
||||
formData.set('amount', String(raw.amount));
|
||||
formData.set('expenseDate', raw.expenseDate);
|
||||
formData.set('categoryId', raw.categoryId);
|
||||
formData.set('merchant', raw.merchant);
|
||||
formData.set('paymentMethod', raw.paymentMethod);
|
||||
formData.set('description', raw.description);
|
||||
formData.set('currency', 'PLN');
|
||||
formData.set('proofType', raw.proofType);
|
||||
formData.set('proofLabel', raw.proofLabel);
|
||||
formData.set('proofNote', raw.proofNote);
|
||||
if (this.croppedFile()) formData.set('proofFile', this.croppedFile()!);
|
||||
|
||||
this.expensesService.create(formData).subscribe({
|
||||
next: () => {
|
||||
this.saving.set(false);
|
||||
this.toast.success('Wydatek został dodany.');
|
||||
this.expenseForm.reset({
|
||||
title: '',
|
||||
amount: 0,
|
||||
expenseDate: today,
|
||||
categoryId: '',
|
||||
merchant: '',
|
||||
paymentMethod: '',
|
||||
description: '',
|
||||
proofType: 'RECEIPT',
|
||||
proofLabel: '',
|
||||
proofNote: ''
|
||||
});
|
||||
this.selectedMerchantId.set('');
|
||||
this.croppedFile.set(null);
|
||||
this.croppedPreview.set(null);
|
||||
this.showCropper.set(false);
|
||||
this.loadExpenses();
|
||||
},
|
||||
error: (error) => {
|
||||
this.saving.set(false);
|
||||
this.toast.error(error.error?.message ?? 'Nie udało się dodać wydatku.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
startEdit(item: Expense) {
|
||||
this.editingExpenseId.set(item.id);
|
||||
this.expenseForm.patchValue({
|
||||
title: item.title,
|
||||
amount: item.amount,
|
||||
expenseDate: item.expenseDate,
|
||||
categoryId: item.category.id,
|
||||
merchant: item.merchant ?? '',
|
||||
paymentMethod: item.paymentMethod ?? '',
|
||||
description: item.description ?? ''
|
||||
});
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.editingExpenseId.set(null);
|
||||
this.expenseForm.reset({
|
||||
title: '',
|
||||
amount: 0,
|
||||
expenseDate: today,
|
||||
categoryId: '',
|
||||
merchant: '',
|
||||
paymentMethod: '',
|
||||
description: '',
|
||||
proofType: 'RECEIPT',
|
||||
proofLabel: '',
|
||||
proofNote: ''
|
||||
});
|
||||
}
|
||||
|
||||
removeExpense(item: Expense) {
|
||||
this.expensesService.delete(item.id).subscribe({
|
||||
next: () => {
|
||||
this.toast.success('Wydatek został usunięty.');
|
||||
this.loadExpenses();
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się usunąć wydatku.')
|
||||
});
|
||||
}
|
||||
|
||||
openProof(proof: Proof) {
|
||||
this.proofPreview.set(proof);
|
||||
}
|
||||
|
||||
closeMerchantModal() {
|
||||
this.merchantModalOpen.set(false);
|
||||
}
|
||||
|
||||
closeProofPreview() {
|
||||
this.proofPreview.set(null);
|
||||
}
|
||||
}
|
||||
170
web/src/app/features/merchants/merchants.component.ts
Normal file
170
web/src/app/features/merchants/merchants.component.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
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 type { Merchant } from '../../shared/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-merchants',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
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">Kontrahenci</h2>
|
||||
<div class="text-secondary">Zapisani sprzedawcy i usługodawcy do szybkiego wyboru przy wydatkach.</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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card pv-card overflow-hidden">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr><td colspan="5" class="text-secondary">Brak zapisanych kontrahentów.</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (modalOpen()) {
|
||||
<div class="modal modal-blur fade show d-block" tabindex="-1" role="dialog">
|
||||
<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>
|
||||
<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>
|
||||
<input class="form-control" formControlName="name" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Typ</label>
|
||||
<select class="form-select" formControlName="kind">
|
||||
<option value="MERCHANT">Sprzedawca</option>
|
||||
<option value="SERVICE_PROVIDER">Usługodawca</option>
|
||||
<option value="OTHER">Inny</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Notatki</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>
|
||||
</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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop fade show"></div>
|
||||
}
|
||||
`
|
||||
})
|
||||
export class MerchantsComponent implements OnInit {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly merchants = inject(MerchantsService);
|
||||
private readonly toast = inject(ToastService);
|
||||
|
||||
readonly items = this.merchants.items;
|
||||
readonly modalOpen = signal(false);
|
||||
readonly editingId = signal<string | null>(null);
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
name: ['', [Validators.required, Validators.minLength(2)]],
|
||||
kind: ['MERCHANT' as Merchant['kind'], Validators.required],
|
||||
notes: [''],
|
||||
isActive: [true]
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.merchants.ensureLoaded(true);
|
||||
}
|
||||
|
||||
labelKind(kind: Merchant['kind']) {
|
||||
return kind === 'SERVICE_PROVIDER' ? 'Usługodawca' : kind === 'MERCHANT' ? 'Sprzedawca' : 'Inny';
|
||||
}
|
||||
|
||||
openCreate() {
|
||||
this.editingId.set(null);
|
||||
this.form.reset({ name: '', kind: 'MERCHANT', notes: '', isActive: true });
|
||||
this.modalOpen.set(true);
|
||||
}
|
||||
|
||||
openEdit(item: Merchant) {
|
||||
this.editingId.set(item.id);
|
||||
this.form.reset({
|
||||
name: item.name,
|
||||
kind: item.kind,
|
||||
notes: item.notes ?? '',
|
||||
isActive: item.isActive
|
||||
});
|
||||
this.modalOpen.set(true);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalOpen.set(false);
|
||||
}
|
||||
|
||||
submit() {
|
||||
if (this.form.invalid) return;
|
||||
const payload = this.form.getRawValue();
|
||||
const request = this.editingId() ? this.merchants.update(this.editingId()!, payload) : this.merchants.create(payload);
|
||||
|
||||
request.subscribe({
|
||||
next: () => {
|
||||
this.toast.success(this.editingId() ? 'Kontrahent został zapisany.' : 'Kontrahent został dodany.');
|
||||
this.closeModal();
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać kontrahenta.')
|
||||
});
|
||||
}
|
||||
|
||||
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.')
|
||||
});
|
||||
}
|
||||
}
|
||||
160
web/src/app/features/reports/reports.component.ts
Normal file
160
web/src/app/features/reports/reports.component.ts
Normal file
@@ -0,0 +1,160 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
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 type { ReportPreferences, StatsResponse } from '../../shared/models';
|
||||
import { CategoryPickerComponent } from '../../shared/ui/category-picker.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-reports',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, CategoryPickerComponent],
|
||||
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">Raporty</h2>
|
||||
<div class="text-secondary">Skonfiguruj raporty SMTP, podgląd i ręczne wysyłanie podsumowań.</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-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>
|
||||
</label>
|
||||
<div>
|
||||
<label class="form-label">Częstotliwość</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>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Adres docelowy</label>
|
||||
<input class="form-control" formControlName="sendToEmail" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Próg kwotowy</label>
|
||||
<input class="form-control" type="number" step="0.01" formControlName="thresholdAmount" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Kategorie raportu</label>
|
||||
<app-category-picker
|
||||
[items]="categories()"
|
||||
[selectedIds]="form.getRawValue().categoryIds"
|
||||
placeholder="Wszystkie kategorie"
|
||||
(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>
|
||||
</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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-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>
|
||||
}
|
||||
<div class="card bg-body-tertiary overflow-hidden">
|
||||
<div class="card-body">
|
||||
<div [innerHTML]="html()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ReportsComponent implements OnInit {
|
||||
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 summary = signal<StatsResponse | null>(null);
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
enabled: [false],
|
||||
frequency: ['monthly' as ReportPreferences['frequency'], Validators.required],
|
||||
sendToEmail: ['', Validators.required],
|
||||
thresholdAmount: [0],
|
||||
categoryIds: [[] as string[]]
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.categoriesService.ensureLoaded(true);
|
||||
this.reports.getPreferences().subscribe({
|
||||
next: (response) => {
|
||||
this.form.reset({
|
||||
enabled: response.item.enabled,
|
||||
frequency: response.item.frequency,
|
||||
sendToEmail: response.item.sendToEmail ?? '',
|
||||
thresholdAmount: response.item.thresholdAmount,
|
||||
categoryIds: response.item.categoryIds ?? []
|
||||
});
|
||||
this.preview();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setCategoryIds(categoryIds: string[]) {
|
||||
this.form.patchValue({ categoryIds });
|
||||
}
|
||||
|
||||
save() {
|
||||
if (this.form.invalid) return;
|
||||
const payload: ReportPreferences = this.form.getRawValue();
|
||||
this.reports.updatePreferences(payload).subscribe({
|
||||
next: () => {
|
||||
this.toast.success('Ustawienia raportów zapisane.');
|
||||
this.preview();
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się zapisać raportów.')
|
||||
});
|
||||
}
|
||||
|
||||
preview() {
|
||||
const payload: ReportPreferences = this.form.getRawValue();
|
||||
this.reports.preview(payload).subscribe({
|
||||
next: (response) => {
|
||||
this.html.set(response.html);
|
||||
this.summary.set(response.summary);
|
||||
},
|
||||
error: (error) => this.toast.error(error.error?.message ?? 'Nie udało się pobrać podglądu.')
|
||||
});
|
||||
}
|
||||
|
||||
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.')
|
||||
});
|
||||
}
|
||||
}
|
||||
233
web/src/app/features/stats/stats.component.ts
Normal file
233
web/src/app/features/stats/stats.component.ts
Normal file
@@ -0,0 +1,233 @@
|
||||
import { CommonModule, CurrencyPipe } from '@angular/common';
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
||||
import {
|
||||
Chart,
|
||||
DoughnutController,
|
||||
ArcElement,
|
||||
Tooltip,
|
||||
Legend,
|
||||
LineController,
|
||||
LineElement,
|
||||
PointElement,
|
||||
CategoryScale,
|
||||
LinearScale
|
||||
} from 'chart.js';
|
||||
import { CategoriesService } from '../../core/services/categories.service';
|
||||
import { StatsService } from '../../core/services/stats.service';
|
||||
import type { StatsResponse } from '../../shared/models';
|
||||
import { CategoryPickerComponent } from '../../shared/ui/category-picker.component';
|
||||
|
||||
Chart.register(
|
||||
DoughnutController,
|
||||
ArcElement,
|
||||
Tooltip,
|
||||
Legend,
|
||||
LineController,
|
||||
LineElement,
|
||||
PointElement,
|
||||
CategoryScale,
|
||||
LinearScale
|
||||
);
|
||||
|
||||
@Component({
|
||||
selector: 'app-stats',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, CurrencyPipe, CategoryPickerComponent],
|
||||
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">Statystyki</h2>
|
||||
<div class="text-secondary">Analiza miesięczna, kwartalna i roczna z podziałem na kategorie i zakres dat.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card overflow-hidden">
|
||||
<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>
|
||||
<select class="form-select" formControlName="bucket">
|
||||
<option value="month">Miesięczny</option>
|
||||
<option value="quarter">Kwartalny</option>
|
||||
<option value="year">Roczny</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">Kategorie</label>
|
||||
<app-category-picker
|
||||
[items]="categories()"
|
||||
[selectedIds]="form.getRawValue().categoryIds"
|
||||
placeholder="Wszystkie kategorie"
|
||||
(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>
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" type="button" (click)="reset()">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-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-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>
|
||||
</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">Trend wydatków</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-header"><h3 class="card-title">Podział kategorii</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>
|
||||
<tbody>
|
||||
@for (row of stats()?.byCategory || []; track row.categoryId) {
|
||||
<tr>
|
||||
<td>{{ row.categoryName }}</td>
|
||||
<td class="text-end">{{ row.total | currency:'PLN':'symbol':'1.2-2' }}</td>
|
||||
<td class="text-end">{{ row.count }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr><td colspan="3" class="text-secondary">Brak danych.</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class StatsComponent implements OnInit {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly categoriesService = inject(CategoriesService);
|
||||
private readonly statsService = inject(StatsService);
|
||||
|
||||
readonly categories = this.categoriesService.items;
|
||||
readonly stats = signal<StatsResponse | null>(null);
|
||||
private categoryChart?: Chart;
|
||||
private lineChart?: Chart;
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
bucket: ['month' as 'month' | 'quarter' | 'year'],
|
||||
startDate: [''],
|
||||
endDate: [''],
|
||||
categoryIds: [[] as string[]]
|
||||
});
|
||||
|
||||
ngOnInit() {
|
||||
this.categoriesService.ensureLoaded(true);
|
||||
this.load();
|
||||
}
|
||||
|
||||
setCategoryIds(categoryIds: string[]) {
|
||||
this.form.patchValue({ categoryIds });
|
||||
}
|
||||
|
||||
load() {
|
||||
const raw = this.form.getRawValue();
|
||||
this.statsService
|
||||
.overview({
|
||||
startDate: raw.startDate || undefined,
|
||||
endDate: raw.endDate || undefined,
|
||||
categoryIds: raw.categoryIds.join(',') || undefined,
|
||||
bucket: raw.bucket
|
||||
})
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.stats.set(response);
|
||||
setTimeout(() => this.renderCharts(), 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.form.reset({ bucket: 'month', startDate: '', endDate: '', categoryIds: [] });
|
||||
this.load();
|
||||
}
|
||||
|
||||
hasCategoryData() {
|
||||
return Boolean(this.stats()?.byCategory?.length);
|
||||
}
|
||||
|
||||
hasTimelineData() {
|
||||
return Boolean(this.stats()?.timeline?.length);
|
||||
}
|
||||
|
||||
private renderCharts() {
|
||||
const current = this.stats();
|
||||
const categoryCanvas = document.getElementById('statsCategoryChart') as HTMLCanvasElement | null;
|
||||
const lineCanvas = document.getElementById('statsLineChart') as HTMLCanvasElement | null;
|
||||
|
||||
if (categoryCanvas && current?.byCategory?.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) }]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
cutout: '64%',
|
||||
plugins: { legend: { position: 'bottom' } }
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.categoryChart?.destroy();
|
||||
}
|
||||
|
||||
if (lineCanvas && current?.timeline?.length) {
|
||||
this.lineChart?.destroy();
|
||||
this.lineChart = new Chart(lineCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: current.timeline.map((item) => item.label),
|
||||
datasets: [{ label: 'Wydatki', data: current.timeline.map((item) => item.total), tension: 0.35 }]
|
||||
},
|
||||
options: { maintainAspectRatio: false }
|
||||
});
|
||||
} else {
|
||||
this.lineChart?.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user