feat: add rent payment schedules and receipts

frontend/src/app/components/rent-payments-page/rent-payments-page.ts

@@ -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();
+  }
+}