nessar/lmnp-organizer
1
0 Fork 0
Code Issues 84 Pull Requests 3 Actions Packages Projects 2 Releases Wiki Activity

feat: add rent payment schedules and receipts

Browse Source
This commit is contained in:
nessar authored and Nessar committed 2026-08-17 14:18:15 +02:00
1 parent f876639c02
commit 47cb4bcdaf
26 files changed
+1118 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/app/components/rent-payments-page/rent-payments-page.css
+63
View File
@@ -0,0 +1,63 @@
.rent-payment-grid {
display: grid;
gap: var(--space-4, 1rem);
}
.rent-payment {
padding: var(--space-5, 1.25rem);
border: 1px solid var(--border, #dce5df);
border-radius: var(--radius-xl, 1.375rem);
background: var(--surface, #ffffff);
}
.payment-topline,
.rent-payment dl > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3, 0.75rem);
}
.payment-topline {
margin-bottom: var(--space-4, 1rem);
}
.rent-payment h2 {
margin-bottom: var(--space-1, 0.25rem);
}
.payment-month,
.rent-payment dt {
color: var(--text-muted, #687670);
}
.rent-payment dl {
margin: var(--space-5, 1.25rem) 0;
}
.rent-payment dl > div {
padding: var(--space-2, 0.5rem) 0;
border-bottom: 1px solid var(--border, #dce5df);
}
.rent-payment dd {
margin: 0;
font-weight: 700;
}
.payment-status {
font-size: 0.8rem;
font-weight: 700;
}
.payment-status.paid { color: var(--accent, #0f766e); }
.payment-status.late { color: var(--danger, #b42318); }
.payment-status.upcoming { color: var(--text-muted, #687670); }
@media (min-width: 700px) {
.rent-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.rent-payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
frontend/src/app/components/rent-payments-page/rent-payments-page.html
+100
View File
@@ -0,0 +1,100 @@
<section class="page-section">
<header class="page-heading">
<div>
<p class="eyebrow">Location</p>
<h1>Mes loyers</h1>
<p>Suivez les échéances et téléchargez les quittances après règlement.</p>
</div>
</header>
<div class="content-region" [attr.aria-busy]="contentLoading()">
@if (!contentReady() && loadError()) {
<article class="load-error" role="alert">
<h2>Chargement impossible</h2>
<p>{{ loadError() }}</p>
<button mat-stroked-button type="button" (click)="load()">Réessayer</button>
</article>
} @else if (!contentReady()) {
<div class="rent-payment-grid" aria-label="Chargement des loyers">
@for (placeholder of [1, 2, 3]; track placeholder) {
<article class="skeleton-card" aria-hidden="true">
<span class="skeleton-line skeleton-line-short"></span>
<span class="skeleton-line skeleton-line-title"></span>
<span class="skeleton-line skeleton-line-medium"></span>
</article>
}
</div>
} @else {
@if (contentLoading()) {
<mat-progress-bar mode="indeterminate" aria-label="Actualisation des loyers" />
}
@if (loadError()) {
<div class="refresh-error" role="alert">
<p>{{ loadError() }}</p>
<button mat-button type="button" (click)="load()">Réessayer</button>
</div>
}
@if (workspace.rentPayments().length === 0) {
<article class="empty-state">
<p class="eyebrow">Échéancier</p>
<h2>Aucune échéance de loyer</h2>
<p>Les échéances sont créées automatiquement pour les baux actifs.</p>
</article>
} @else {
<div class="rent-payment-grid">
@for (payment of workspace.rentPayments(); track payment.id) {
<article class="rent-payment" [attr.aria-busy]="workspace.rentPaymentSaving(payment.id)">
<div class="payment-topline">
<span class="payment-status" [class]="payment.status.toLowerCase()">
{{ statusLabel(payment.status) }}
</span>
<strong>{{ payment.total.toLocaleString('fr-FR') }} €</strong>
</div>
<h2>{{ apartmentName(payment) }}</h2>
<p class="payment-month">{{ monthLabel(payment.month) }}</p>
<dl>
<div><dt>Loyer</dt><dd>{{ payment.rent.toLocaleString('fr-FR') }} €</dd></div>
<div><dt>Charges</dt><dd>{{ payment.charges.toLocaleString('fr-FR') }} €</dd></div>
<div><dt>Échéance</dt><dd>{{ payment.dueDate }}</dd></div>
</dl>
@if (workspace.rentPaymentSaveError(payment.id) || workspace.rentReceiptDownloadError(payment.id)) {
<p class="card-error" role="alert">
{{ workspace.rentPaymentSaveError(payment.id) || workspace.rentReceiptDownloadError(payment.id) }}
</p>
}
<div class="card-actions" aria-live="polite">
@if (payment.status === 'PAID') {
<button
mat-button
type="button"
[disabled]="workspace.rentReceiptDownloading(payment.id)"
(click)="workspace.downloadRentReceipt(payment)"
>
@if (workspace.rentReceiptDownloading(payment.id)) {
<mat-spinner diameter="16" aria-hidden="true" /> Téléchargement…
} @else {
Télécharger la quittance
}
</button>
} @else {
<button
mat-flat-button
type="button"
[disabled]="workspace.rentPaymentSaving(payment.id)"
(click)="workspace.markRentPaymentPaid(payment.id)"
>
@if (workspace.rentPaymentSaving(payment.id)) {
<mat-spinner diameter="16" aria-hidden="true" /> Enregistrement…
} @else {
Marquer comme payé
}
</button>
}
</div>
</article>
}
</div>
}
}
</div>
</section>
frontend/src/app/components/rent-payments-page/rent-payments-page.spec.ts
+49
View File
@@ -0,0 +1,49 @@
import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { WorkspaceService } from '../../services/workspace.service';
import { RentPaymentsPage } from './rent-payments-page';
describe('RentPaymentsPage', () => {
it('loads the schedule and exposes payment actions after its dependencies are ready', () => {
const workspace = {
apartments: signal([{ id: 'apartment-1', name: 'T2' }]),
leases: signal([{ id: 'lease-1', apartmentId: 'apartment-1' }]),
rentPayments: signal([
{
id: 'payment-1',
leaseId: 'lease-1',
month: '2026-07',
dueDate: '2026-07-01',
rent: 800,
charges: 50,
total: 850,
status: 'LATE',
paidAt: null,
},
]),
apartmentLoadState: signal({ loaded: true, loading: false, error: '' }),
leaseLoadState: signal({ loaded: true, loading: false, error: '' }),
rentPaymentLoadState: signal({ loaded: true, loading: false, error: '' }),
loadApartments: vi.fn(),
loadLeases: vi.fn(),
loadRentPayments: vi.fn(),
markRentPaymentPaid: vi.fn(),
rentPaymentSaving: vi.fn(() => false),
rentPaymentSaveError: vi.fn(() => ''),
downloadRentReceipt: vi.fn(),
rentReceiptDownloading: vi.fn(() => false),
rentReceiptDownloadError: vi.fn(() => ''),
};
TestBed.configureTestingModule({
providers: [{ provide: WorkspaceService, useValue: workspace }],
});
const fixture = TestBed.createComponent(RentPaymentsPage);
fixture.detectChanges();
expect(workspace.loadRentPayments).toHaveBeenCalled();
expect(fixture.nativeElement.textContent).toContain('T2');
fixture.nativeElement.querySelector('button').click();
expect(workspace.markRentPaymentPaid).toHaveBeenCalledWith('payment-1');
});
});
frontend/src/app/components/rent-payments-page/rent-payments-page.ts
+59
View File
@@ -0,0 +1,59 @@
import { Component, computed, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { RentPayment, RentPaymentStatus } from '../../services/rent-payment.service';
import { WorkspaceService } from '../../services/workspace.service';
@Component({
selector: 'app-rent-payments-page',
imports: [MatButtonModule, MatProgressBarModule, MatProgressSpinnerModule],
templateUrl: './rent-payments-page.html',
styleUrl: './rent-payments-page.css',
})
export class RentPaymentsPage {
readonly workspace = inject(WorkspaceService);
readonly contentReady = computed(
() =>
this.workspace.rentPaymentLoadState().loaded &&
this.workspace.leaseLoadState().loaded &&
this.workspace.apartmentLoadState().loaded,
);
readonly contentLoading = computed(
() =>
this.workspace.rentPaymentLoadState().loading ||
this.workspace.leaseLoadState().loading ||
this.workspace.apartmentLoadState().loading,
);
readonly loadError = computed(
() =>
this.workspace.rentPaymentLoadState().error ||
this.workspace.leaseLoadState().error ||
this.workspace.apartmentLoadState().error,
);
constructor() {
this.load();
}
apartmentName(payment: RentPayment): string {
const lease = this.workspace.leases().find((item) => item.id === payment.leaseId);
return this.workspace.apartments().find((item) => item.id === lease?.apartmentId)?.name ?? 'Bien inconnu';
}
monthLabel(month: string): string {
return new Intl.DateTimeFormat('fr-FR', { month: 'long', year: 'numeric' }).format(
new Date(`${month}-01T12:00:00`),
);
}
statusLabel(status: RentPaymentStatus): string {
return { PAID: 'Payé', LATE: 'En retard', UPCOMING: 'À venir' }[status];
}
load(): void {
this.workspace.loadRentPayments();
this.workspace.loadLeases();
this.workspace.loadApartments();
}
}
frontend/src/app/components/workspace-navigation/workspace-navigation.html
+10
View File
@@ -45,6 +45,16 @@
<fa-icon [icon]="faFileLines" aria-hidden="true" />
<span>Baux</span>
</button>
<button
mat-button
type="button"
class="navigation-item"
routerLink="/rent-payments"
routerLinkActive="active"
>
<fa-icon [icon]="faReceipt" aria-hidden="true" />
<span>Loyers</span>
</button>
<button
mat-button
type="button"
frontend/src/app/components/workspace-navigation/workspace-navigation.ts
+2
View File
@@ -4,6 +4,7 @@ import {
faBuilding,
faFileLines,
faGear,
faReceipt,
faTableCellsLarge,
faUsers,
} from '@fortawesome/free-solid-svg-icons';
@@ -24,6 +25,7 @@ export class WorkspaceNavigation {
readonly faBuilding = faBuilding;
readonly faUsers = faUsers;
readonly faFileLines = faFileLines;
readonly faReceipt = faReceipt;
readonly faGear = faGear;
readonly userInitial = input.required<string>();
readonly logoutRequested = output<void>();