feat: add rent payment schedules and receipts
This commit is contained in:
nessar authored and 
Nessar committed
1 parent
f876639c02
commit
47cb4bcdaf
26 files changed
+1118
-3
No files matched your search
@@ -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)); }
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user