feat: add rent payment history and reversal dialogs

- Implemented RentPaymentHistoryServiceTest to validate payment retrieval with refunds and reversals.
- Created ReverseRentPaymentServiceTest to ensure correct handling of payment reversals and allocation releases.
- Developed rent-payment-allocation-dialog component with form for surplus allocation.
- Added rent-payment-refund-dialog component for processing refunds with validation.
- Introduced rent-payment-reversal-dialog component for reversing payments with reason input.
- Implemented utility functions for formatting Euro values and handling date formatting.
- Enhanced rent-payment-dialogs.spec.ts to cover new dialog functionalities and error handling.

frontend/src/app/components/rent-payment-allocation-dialog/rent-payment-allocation-dialog.css

@@ -0,0 +1,41 @@
+.action-dialog-content,
+.dialog-fieldset {
+  display: grid;
+  gap: var(--space-4, 1rem);
+}
+
+.action-dialog-content {
+  width: min(32rem, calc(100vw - 4rem));
+  max-width: 100%;
+  max-height: 75vh;
+  overscroll-behavior-y: contain;
+}
+
+.dialog-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.outcome-summary {
+  margin: 0;
+  padding: var(--space-4, 1rem);
+  border: 1px solid var(--border, #dce5df);
+  border-radius: var(--radius-md, 0.8125rem);
+  background: var(--surface-accent, #dcefeb);
+}
+
+.dialog-error {
+  margin: 0;
+  color: var(--danger, #b42318);
+}
+
+mat-dialog-actions button {
+  min-height: 2.75rem;
+}
+
+mat-spinner {
+  display: inline-block;
+  margin-inline-end: var(--space-2, 0.5rem);
+}

frontend/src/app/components/rent-payment-allocation-dialog/rent-payment-allocation-dialog.html

@@ -0,0 +1,49 @@
+<h2 mat-dialog-title>Affecter le surplus</h2>
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <mat-dialog-content class="action-dialog-content">
+    <p>
+      Solde non affecté disponible :
+      <strong>{{ formatEuro(data.payment.unallocatedBalance) }}</strong>
+    </p>
+    <fieldset class="dialog-fieldset" [disabled]="saving()">
+      <mat-form-field appearance="outline">
+        <mat-label>Échéance cible</mat-label>
+        <mat-select formControlName="rentDueId" required>
+          @for (item of data.eligibleRentDues; track item.rentDue.id) {
+            <mat-option [value]="item.rentDue.id">
+              {{ item.label }} — {{ formatEuro(item.rentDue.remainingAmount) }} restant
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Montant à affecter</mat-label>
+        <input matInput type="number" step="0.01" min="0.01" formControlName="amount" required />
+        <span matTextSuffix>€</span>
+        @if (form.controls.amount.hasError('unavailableAmount')) {
+          <mat-error>Le montant dépasse le surplus ou le solde de l’échéance.</mat-error>
+        } @else if (form.controls.amount.invalid) {
+          <mat-error>Le montant doit être strictement positif.</mat-error>
+        }
+      </mat-form-field>
+    </fieldset>
+    @if (selectedRentDue(); as item) {
+      <p class="outcome-summary" aria-live="polite">
+        Solde de l’échéance après affectation :
+        <strong>{{ formatEuro(remainingAfter()) }}</strong>
+      </p>
+    }
+    @if (error()) {
+      <p class="dialog-error" role="alert">{{ error() }}</p>
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close type="button" [disabled]="saving()">Annuler</button>
+    <button mat-flat-button type="submit" [disabled]="form.invalid || saving()">
+      @if (saving()) {
+        <mat-spinner diameter="18" aria-label="Affectation en cours" />
+      }
+      Confirmer l’affectation
+    </button>
+  </mat-dialog-actions>
+</form>

frontend/src/app/components/rent-payment-allocation-dialog/rent-payment-allocation-dialog.ts

@@ -0,0 +1,131 @@
+import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { finalize } from 'rxjs';
+import { RentDue } from '../../services/lease.service';
+import { httpErrorMessage } from '../../services/http-error-message';
+import { formatEuro } from '../../services/rent-payment-format';
+import { RentPayment, RentPaymentService } from '../../services/rent-payment.service';
+import { isRentPaymentDataStale, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
+
+export interface EligibleRentDue {
+  rentDue: RentDue;
+  label: string;
+}
+
+export interface RentPaymentAllocationDialogData {
+  payment: RentPayment;
+  eligibleRentDues: EligibleRentDue[];
+}
+
+@Component({
+  selector: 'app-rent-payment-allocation-dialog',
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatSelectModule,
+  ],
+  templateUrl: './rent-payment-allocation-dialog.html',
+  styleUrl: './rent-payment-allocation-dialog.css',
+})
+export class RentPaymentAllocationDialog {
+  readonly data = inject<RentPaymentAllocationDialogData>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<RentPaymentAllocationDialog>);
+  private readonly payments = inject(RentPaymentService);
+  private readonly operationId = crypto.randomUUID();
+  readonly saving = signal(false);
+  readonly error = signal('');
+  readonly formatEuro = formatEuro;
+
+  readonly form = new FormGroup({
+    rentDueId: new FormControl(this.data.eligibleRentDues[0]?.rentDue.id ?? '', {
+      nonNullable: true,
+      validators: Validators.required,
+    }),
+    amount: new FormControl(0, {
+      nonNullable: true,
+      validators: [Validators.required, Validators.min(0.01)],
+    }),
+  });
+
+  private readonly rentDueId = toSignal(this.form.controls.rentDueId.valueChanges, {
+    initialValue: this.form.controls.rentDueId.value,
+  });
+  readonly selectedRentDue = computed(() =>
+    this.data.eligibleRentDues.find((item) => item.rentDue.id === this.rentDueId()),
+  );
+  readonly maximumAmount = computed(() =>
+    Math.min(
+      this.data.payment.unallocatedBalance,
+      this.selectedRentDue()?.rentDue.remainingAmount ?? 0,
+    ),
+  );
+  private readonly amount = toSignal(this.form.controls.amount.valueChanges, {
+    initialValue: this.form.controls.amount.value,
+  });
+  readonly remainingAfter = computed(() =>
+    Math.max((this.selectedRentDue()?.rentDue.remainingAmount ?? 0) - (this.amount() ?? 0), 0),
+  );
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+    this.form.controls.amount.addValidators(this.withinAvailableAmount.bind(this));
+    this.form.controls.rentDueId.valueChanges
+      .pipe(takeUntilDestroyed(destroyRef))
+      .subscribe(() => this.useMaximum());
+    this.useMaximum();
+  }
+
+  useMaximum(): void {
+    this.form.controls.amount.setValue(this.maximumAmount());
+    this.form.controls.amount.updateValueAndValidity();
+  }
+
+  submit(): void {
+    this.form.markAllAsTouched();
+    const due = this.selectedRentDue()?.rentDue;
+    if (!due || this.form.invalid || this.saving()) return;
+    this.saving.set(true);
+    this.error.set('');
+    this.payments
+      .allocate(this.data.payment.id, {
+        operationId: this.operationId,
+        paymentVersion: this.data.payment.version,
+        rentDueId: due.id,
+        rentDueVersion: due.version,
+        amount: this.form.controls.amount.value,
+      })
+      .pipe(finalize(() => this.saving.set(false)))
+      .subscribe({
+        next: (payment) => this.dialogRef.close(payment),
+        error: (error) => {
+          if (isRentPaymentDataStale(error)) {
+            this.dialogRef.close(RENT_PAYMENT_DATA_STALE);
+            return;
+          }
+          this.error.set(httpErrorMessage(error, 'Impossible d’affecter ce règlement.'));
+        },
+      });
+  }
+
+  private withinAvailableAmount(control: AbstractControl<number>): ValidationErrors | null {
+    return control.value > this.maximumAmount() ? { unavailableAmount: true } : null;
+  }
+}

frontend/src/app/components/rent-payment-dialog-result.ts

@@ -0,0 +1,9 @@
+import { RentPayment } from '../services/rent-payment.service';
+
+export const RENT_PAYMENT_DATA_STALE = 'RENT_PAYMENT_DATA_STALE';
+
+export type RentPaymentDialogResult = RentPayment | typeof RENT_PAYMENT_DATA_STALE;
+
+export function isRentPaymentDataStale(error: unknown): boolean {
+  return typeof error === 'object' && error !== null && 'status' in error && error.status === 409;
+}

frontend/src/app/components/rent-payment-dialogs.spec.ts

@@ -0,0 +1,171 @@
+import { Type } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { of, throwError } from 'rxjs';
+import { RENT_PAYMENT_DATA_STALE } from './rent-payment-dialog-result';
+import { RentPaymentAllocationDialog } from './rent-payment-allocation-dialog/rent-payment-allocation-dialog';
+import { RentPaymentRefundDialog } from './rent-payment-refund-dialog/rent-payment-refund-dialog';
+import { RentPaymentReversalDialog } from './rent-payment-reversal-dialog/rent-payment-reversal-dialog';
+import { RentPaymentValidationDialog } from './rent-payment-validation-dialog/rent-payment-validation-dialog';
+import { RentDue } from '../services/lease.service';
+import { utcIsoDate } from '../services/rent-payment-format';
+import { RentPayment, RentPaymentService } from '../services/rent-payment.service';
+
+describe('rent payment dialogs', () => {
+  const dialogRef = { close: vi.fn() };
+  const payments = {
+    record: vi.fn(),
+    allocate: vi.fn(),
+    refund: vi.fn(),
+    reverse: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('uses UTC for payment and refund date defaults', () => {
+    expect(utcIsoDate(new Date('2026-07-18T23:30:00Z'))).toBe('2026-07-18');
+  });
+
+  it('records one received amount and exposes its surplus outcome', () => {
+    const result = payment({ amount: 950, unallocatedBalance: 100 });
+    payments.record.mockReturnValue(of(result));
+    const component = create(RentPaymentValidationDialog, {
+      rentDue: due(),
+      apartmentName: 'T2',
+    });
+    component.form.controls.amount.setValue(950);
+
+    component.submit();
+
+    expect(component.surplus()).toBe(100);
+    expect(payments.record).toHaveBeenCalledWith({
+      operationId: expect.any(String),
+      rentDueId: 'due-1',
+      rentDueVersion: 2,
+      receivedAt: component.today,
+      amount: 950,
+    });
+    expect(dialogRef.close).toHaveBeenCalledWith(result);
+  });
+
+  it('closes stale data so the page can refresh instead of retrying an obsolete version', () => {
+    payments.record.mockReturnValue(throwError(() => ({ status: 409 })));
+    const component = create(RentPaymentValidationDialog, {
+      rentDue: due(),
+      apartmentName: 'T2',
+    });
+
+    component.submit();
+
+    expect(dialogRef.close).toHaveBeenCalledWith(RENT_PAYMENT_DATA_STALE);
+  });
+
+  it('defaults a surplus allocation to the largest safe amount', () => {
+    const result = payment({ unallocatedBalance: 20, version: 4 });
+    payments.allocate.mockReturnValue(of(result));
+    const component = create(RentPaymentAllocationDialog, {
+      payment: payment({ unallocatedBalance: 100, version: 3 }),
+      eligibleRentDues: [
+        { rentDue: due({ id: 'due-2', remainingAmount: 80, version: 5 }), label: 'Août' },
+      ],
+    });
+
+    expect(component.form.controls.amount.value).toBe(80);
+    component.form.controls.amount.setValue(50);
+    component.submit();
+
+    expect(payments.allocate).toHaveBeenCalledWith('payment-1', {
+      operationId: expect.any(String),
+      paymentVersion: 3,
+      rentDueId: 'due-2',
+      rentDueVersion: 5,
+      amount: 50,
+    });
+  });
+
+  it('defaults a refund to the full surplus and prevents a future date', () => {
+    const result = payment({ unallocatedBalance: 0, refundedAmount: 100, version: 4 });
+    payments.refund.mockReturnValue(of(result));
+    const component = create(
+      RentPaymentRefundDialog,
+      payment({ unallocatedBalance: 100, version: 3 }),
+    );
+
+    expect(component.form.controls.amount.value).toBe(100);
+    component.form.controls.refundedAt.setValue('9999-01-01');
+    component.submit();
+    expect(payments.refund).not.toHaveBeenCalled();
+
+    component.form.controls.refundedAt.setValue(component.today);
+    component.submit();
+    expect(payments.refund).toHaveBeenCalledWith(
+      'payment-1',
+      expect.objectContaining({ amount: 100, paymentVersion: 3 }),
+    );
+  });
+
+  it('requires and submits a reversal reason', () => {
+    const result = payment({ status: 'REVERSED', version: 4 });
+    payments.reverse.mockReturnValue(of(result));
+    const component = create(RentPaymentReversalDialog, payment({ version: 3 }));
+
+    component.submit();
+    expect(payments.reverse).not.toHaveBeenCalled();
+
+    component.form.controls.reason.setValue('Erreur de saisie');
+    component.submit();
+    expect(payments.reverse).toHaveBeenCalledWith('payment-1', 3, 'Erreur de saisie');
+    expect(dialogRef.close).toHaveBeenCalledWith(result);
+  });
+
+  function create<T>(component: Type<T>, data: unknown): T {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: data },
+        { provide: MatDialogRef, useValue: dialogRef },
+        { provide: RentPaymentService, useValue: payments },
+      ],
+    });
+    return TestBed.createComponent(component).componentInstance;
+  }
+});
+
+function due(overrides: Partial<RentDue> = {}): RentDue {
+  return {
+    id: 'due-1',
+    leaseId: 'lease-1',
+    month: '2026-07',
+    dueDate: '2026-07-05',
+    rent: 800,
+    charges: 50,
+    total: 850,
+    allocatedAmount: 0,
+    remainingAmount: 850,
+    settlement: 'UNPAID',
+    timing: 'OVERDUE',
+    version: 2,
+    ...overrides,
+  };
+}
+
+function payment(overrides: Partial<RentPayment> = {}): RentPayment {
+  return {
+    id: 'payment-1',
+    leaseId: 'lease-1',
+    receivedAt: '2026-07-06',
+    amount: 850,
+    status: 'CONFIRMED',
+    allocations: [],
+    allocatedAmount: 850,
+    refundedAmount: 0,
+    unallocatedBalance: 0,
+    confirmedAt: '2026-07-06',
+    version: 0,
+    refunds: [],
+    reversal: null,
+    ...overrides,
+  };
+}

frontend/src/app/components/rent-payment-refund-dialog/rent-payment-refund-dialog.css

@@ -0,0 +1,33 @@
+.action-dialog-content,
+.dialog-fieldset {
+  display: grid;
+  gap: var(--space-4, 1rem);
+}
+
+.action-dialog-content {
+  width: min(30rem, calc(100vw - 4rem));
+  max-width: 100%;
+  max-height: 75vh;
+  overscroll-behavior-y: contain;
+}
+
+.dialog-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.dialog-error {
+  margin: 0;
+  color: var(--danger, #b42318);
+}
+
+mat-dialog-actions button {
+  min-height: 2.75rem;
+}
+
+mat-spinner {
+  display: inline-block;
+  margin-inline-end: var(--space-2, 0.5rem);
+}

frontend/src/app/components/rent-payment-refund-dialog/rent-payment-refund-dialog.html

@@ -0,0 +1,39 @@
+<h2 mat-dialog-title>Rembourser le surplus</h2>
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <mat-dialog-content class="action-dialog-content">
+    <p>
+      Solde non affecté disponible : <strong>{{ formatEuro(payment.unallocatedBalance) }}</strong>
+    </p>
+    <fieldset class="dialog-fieldset" [disabled]="saving()">
+      <mat-form-field appearance="outline">
+        <mat-label>Date du remboursement</mat-label>
+        <input matInput type="date" formControlName="refundedAt" [max]="today" required />
+        @if (form.controls.refundedAt.hasError('futureDate')) {
+          <mat-error>La date du remboursement ne peut pas être dans le futur.</mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field appearance="outline">
+        <mat-label>Montant remboursé</mat-label>
+        <input matInput type="number" step="0.01" min="0.01" formControlName="amount" required />
+        <span matTextSuffix>€</span>
+        @if (form.controls.amount.hasError('max')) {
+          <mat-error>Le remboursement dépasse le solde non affecté.</mat-error>
+        } @else if (form.controls.amount.invalid) {
+          <mat-error>Le montant doit être strictement positif.</mat-error>
+        }
+      </mat-form-field>
+    </fieldset>
+    @if (error()) {
+      <p class="dialog-error" role="alert">{{ error() }}</p>
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close type="button" [disabled]="saving()">Annuler</button>
+    <button mat-flat-button type="submit" [disabled]="form.invalid || saving()">
+      @if (saving()) {
+        <mat-spinner diameter="18" aria-label="Remboursement en cours" />
+      }
+      Confirmer le remboursement
+    </button>
+  </mat-dialog-actions>
+</form>

frontend/src/app/components/rent-payment-refund-dialog/rent-payment-refund-dialog.ts

@@ -0,0 +1,86 @@
+import { Component, inject, signal } from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { finalize } from 'rxjs';
+import { httpErrorMessage } from '../../services/http-error-message';
+import { formatEuro, utcIsoDate } from '../../services/rent-payment-format';
+import { RentPayment, RentPaymentService } from '../../services/rent-payment.service';
+import { isRentPaymentDataStale, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
+
+@Component({
+  selector: 'app-rent-payment-refund-dialog',
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+  ],
+  templateUrl: './rent-payment-refund-dialog.html',
+  styleUrl: './rent-payment-refund-dialog.css',
+})
+export class RentPaymentRefundDialog {
+  readonly payment = inject<RentPayment>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<RentPaymentRefundDialog>);
+  private readonly payments = inject(RentPaymentService);
+  private readonly operationId = crypto.randomUUID();
+  readonly today = utcIsoDate();
+  readonly saving = signal(false);
+  readonly error = signal('');
+  readonly formatEuro = formatEuro;
+
+  readonly form = new FormGroup({
+    refundedAt: new FormControl(this.today, {
+      nonNullable: true,
+      validators: [Validators.required, this.notFuture.bind(this)],
+    }),
+    amount: new FormControl(this.payment.unallocatedBalance, {
+      nonNullable: true,
+      validators: [
+        Validators.required,
+        Validators.min(0.01),
+        Validators.max(this.payment.unallocatedBalance),
+      ],
+    }),
+  });
+
+  submit(): void {
+    this.form.markAllAsTouched();
+    if (this.form.invalid || this.saving()) return;
+    this.saving.set(true);
+    this.error.set('');
+    this.payments
+      .refund(this.payment.id, {
+        operationId: this.operationId,
+        paymentVersion: this.payment.version,
+        ...this.form.getRawValue(),
+      })
+      .pipe(finalize(() => this.saving.set(false)))
+      .subscribe({
+        next: (payment) => this.dialogRef.close(payment),
+        error: (error) => {
+          if (isRentPaymentDataStale(error)) {
+            this.dialogRef.close(RENT_PAYMENT_DATA_STALE);
+            return;
+          }
+          this.error.set(httpErrorMessage(error, 'Impossible d’enregistrer ce remboursement.'));
+        },
+      });
+  }
+
+  private notFuture(control: AbstractControl<string>): ValidationErrors | null {
+    return control.value > this.today ? { futureDate: true } : null;
+  }
+}

frontend/src/app/components/rent-payment-reversal-dialog/rent-payment-reversal-dialog.css

@@ -0,0 +1,45 @@
+.action-dialog-content,
+.dialog-fieldset {
+  display: grid;
+  gap: var(--space-4, 1rem);
+}
+
+.action-dialog-content {
+  width: min(30rem, calc(100vw - 4rem));
+  max-width: 100%;
+  max-height: 75vh;
+  overscroll-behavior-y: contain;
+}
+
+.dialog-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.refund-warning {
+  padding: var(--space-4, 1rem);
+  border-radius: var(--radius-md, 0.8125rem);
+  background: var(--danger-soft, #fee9e7);
+  color: var(--danger, #b42318);
+}
+
+.dialog-error {
+  margin: 0;
+  color: var(--danger, #b42318);
+}
+
+.danger-action.mat-mdc-unelevated-button {
+  --mdc-filled-button-container-color: var(--danger, #b42318);
+  --mdc-filled-button-label-text-color: #ffffff;
+}
+
+mat-dialog-actions button {
+  min-height: 2.75rem;
+}
+
+mat-spinner {
+  display: inline-block;
+  margin-inline-end: var(--space-2, 0.5rem);
+}

frontend/src/app/components/rent-payment-reversal-dialog/rent-payment-reversal-dialog.html

@@ -0,0 +1,41 @@
+<h2 mat-dialog-title>Contrepasser le règlement</h2>
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <mat-dialog-content class="action-dialog-content">
+    <p>
+      Les affectations de ce règlement de <strong>{{ formatEuro(payment.amount) }}</strong> seront
+      annulées. Le règlement restera visible dans l’historique.
+    </p>
+    @if (payment.refundedAmount > 0) {
+      <p class="refund-warning" role="note">
+        Les remboursements déjà confirmés, pour {{ formatEuro(payment.refundedAmount) }}, resteront
+        des sorties historiques.
+      </p>
+    }
+    <fieldset class="dialog-fieldset" [disabled]="saving()">
+      <mat-form-field appearance="outline">
+        <mat-label>Motif de la contrepassation</mat-label>
+        <textarea matInput rows="4" maxlength="500" formControlName="reason" required></textarea>
+        @if (form.controls.reason.invalid) {
+          <mat-error>Le motif est obligatoire.</mat-error>
+        }
+      </mat-form-field>
+    </fieldset>
+    @if (error()) {
+      <p class="dialog-error" role="alert">{{ error() }}</p>
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close type="button" [disabled]="saving()">Annuler</button>
+    <button
+      mat-flat-button
+      type="submit"
+      class="danger-action"
+      [disabled]="form.invalid || saving()"
+    >
+      @if (saving()) {
+        <mat-spinner diameter="18" aria-label="Contrepassation en cours" />
+      }
+      Contrepasser
+    </button>
+  </mat-dialog-actions>
+</form>

frontend/src/app/components/rent-payment-reversal-dialog/rent-payment-reversal-dialog.ts

@@ -0,0 +1,61 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { finalize } from 'rxjs';
+import { httpErrorMessage } from '../../services/http-error-message';
+import { formatEuro } from '../../services/rent-payment-format';
+import { RentPayment, RentPaymentService } from '../../services/rent-payment.service';
+import { isRentPaymentDataStale, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
+
+@Component({
+  selector: 'app-rent-payment-reversal-dialog',
+  imports: [
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+  ],
+  templateUrl: './rent-payment-reversal-dialog.html',
+  styleUrl: './rent-payment-reversal-dialog.css',
+})
+export class RentPaymentReversalDialog {
+  readonly payment = inject<RentPayment>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<RentPaymentReversalDialog>);
+  private readonly payments = inject(RentPaymentService);
+  readonly saving = signal(false);
+  readonly error = signal('');
+  readonly formatEuro = formatEuro;
+
+  readonly form = new FormGroup({
+    reason: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.maxLength(500)],
+    }),
+  });
+
+  submit(): void {
+    this.form.markAllAsTouched();
+    if (this.form.invalid || this.saving()) return;
+    this.saving.set(true);
+    this.error.set('');
+    this.payments
+      .reverse(this.payment.id, this.payment.version, this.form.controls.reason.value)
+      .pipe(finalize(() => this.saving.set(false)))
+      .subscribe({
+        next: (payment) => this.dialogRef.close(payment),
+        error: (error) => {
+          if (isRentPaymentDataStale(error)) {
+            this.dialogRef.close(RENT_PAYMENT_DATA_STALE);
+            return;
+          }
+          this.error.set(httpErrorMessage(error, 'Impossible de contrepasser ce règlement.'));
+        },
+      });
+  }
+}

frontend/src/app/components/rent-payment-validation-dialog/rent-payment-validation-dialog.css

@@ -1,12 +1,66 @@
-.form-dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-top: 8px;
+.payment-dialog-content,
+.dialog-fieldset,
+.outcome-summary {
+  display: grid;
+  gap: var(--space-4, 1rem);
 }
 
-.form-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.payment-dialog-content {
+  width: min(32rem, calc(100vw - 4rem));
+  max-width: 100%;
+  max-height: 75vh;
+  overscroll-behavior-y: contain;
+}
+
+.due-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
+  gap: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
+  margin: 0;
+  padding: var(--space-4, 1rem);
+  border-radius: var(--radius-md, 0.8125rem);
+  background: var(--surface-soft, #e9efeb);
+}
+
+.due-summary div {
+  min-width: 0;
+}
+
+.due-summary dt {
+  color: var(--text-muted, #687670);
+  font-size: 0.8rem;
+}
+
+.due-summary dd {
+  margin: var(--space-1, 0.25rem) 0 0;
+  font-weight: 700;
+  overflow-wrap: break-word;
+}
+
+.dialog-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.outcome-summary {
+  padding: var(--space-4, 1rem);
+  border: 1px solid var(--border, #dce5df);
+  border-radius: var(--radius-md, 0.8125rem);
+  background: var(--surface-accent, #dcefeb);
+}
+
+.dialog-error {
+  margin: 0;
+  color: var(--danger, #b42318);
+}
+
+mat-dialog-actions button {
+  min-height: 2.75rem;
+}
+
+mat-spinner {
+  display: inline-block;
+  margin-inline-end: var(--space-2, 0.5rem);
 }

frontend/src/app/components/rent-payment-validation-dialog/rent-payment-validation-dialog.html

@@ -1,20 +1,71 @@
-<h2 mat-dialog-title>Valider le paiement</h2>
+<h2 mat-dialog-title>Enregistrer un règlement</h2>
 <form [formGroup]="form" (ngSubmit)="submit()">
-  <mat-dialog-content class="form-dialog-content">
-    <p>Vérifiez ou modifiez les montants payés avant de valider l'échéance.</p>
-    <div class="form-fields">
+  <mat-dialog-content class="payment-dialog-content">
+    <p>
+      Règlement reçu pour <strong>{{ data.apartmentName }}</strong
+      >. Vérifiez la date et le montant avant de confirmer.
+    </p>
+
+    <dl class="due-summary">
+      <div>
+        <dt>Loyer</dt>
+        <dd>{{ formatEuro(data.rentDue.rent) }}</dd>
+      </div>
+      <div>
+        <dt>Charges</dt>
+        <dd>{{ formatEuro(data.rentDue.charges) }}</dd>
+      </div>
+      <div>
+        <dt>Déjà affecté</dt>
+        <dd>{{ formatEuro(data.rentDue.allocatedAmount) }}</dd>
+      </div>
+      <div>
+        <dt>Restant à régler</dt>
+        <dd>{{ formatEuro(data.rentDue.remainingAmount) }}</dd>
+      </div>
+    </dl>
+
+    <fieldset class="dialog-fieldset" [disabled]="saving()">
       <mat-form-field appearance="outline">
-        <mat-label>Loyer principal (€)</mat-label>
-        <input matInput type="number" step="0.01" min="0" formControlName="rent" required />
+        <mat-label>Date de réception</mat-label>
+        <input matInput type="date" formControlName="receivedAt" [max]="today" required />
+        @if (form.controls.receivedAt.hasError('futureDate')) {
+          <mat-error>La date de réception ne peut pas être dans le futur.</mat-error>
+        }
       </mat-form-field>
       <mat-form-field appearance="outline">
-        <mat-label>Charges (€)</mat-label>
-        <input matInput type="number" step="0.01" min="0" formControlName="charges" required />
+        <mat-label>Montant reçu</mat-label>
+        <input matInput type="number" step="0.01" min="0.01" formControlName="amount" required />
+        <span matTextSuffix>€</span>
+        @if (form.controls.amount.invalid) {
+          <mat-error>Le montant doit être strictement positif.</mat-error>
+        }
       </mat-form-field>
+    </fieldset>
+
+    <div class="outcome-summary" aria-live="polite">
+      @if (surplus() > 0) {
+        <strong>L’échéance sera réglée.</strong>
+        <span>Surplus non affecté : {{ formatEuro(surplus()) }}</span>
+      } @else if (remainingAfter() > 0) {
+        <strong>L’échéance restera partiellement réglée.</strong>
+        <span>Solde après règlement : {{ formatEuro(remainingAfter()) }}</span>
+      } @else {
+        <strong>L’échéance sera entièrement réglée.</strong>
+      }
     </div>
+
+    @if (error()) {
+      <p class="dialog-error" role="alert">{{ error() }}</p>
+    }
   </mat-dialog-content>
   <mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close type="button">Annuler</button>
-    <button mat-flat-button type="submit" [disabled]="form.invalid">Valider le paiement</button>
+    <button mat-button mat-dialog-close type="button" [disabled]="saving()">Annuler</button>
+    <button mat-flat-button type="submit" [disabled]="form.invalid || saving()">
+      @if (saving()) {
+        <mat-spinner diameter="18" aria-label="Enregistrement en cours" />
+      }
+      Confirmer le règlement
+    </button>
   </mat-dialog-actions>
 </form>

frontend/src/app/components/rent-payment-validation-dialog/rent-payment-validation-dialog.ts

@@ -1,13 +1,28 @@
-import { Component, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, computed, inject, signal } from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { finalize } from 'rxjs';
+import { RentDue } from '../../services/lease.service';
+import { httpErrorMessage } from '../../services/http-error-message';
+import { formatEuro, utcIsoDate } from '../../services/rent-payment-format';
+import { RentPaymentService } from '../../services/rent-payment.service';
+import { isRentPaymentDataStale, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
 
 export interface RentPaymentValidationDialogData {
-  rent: number;
-  charges: number;
+  rentDue: RentDue;
+  apartmentName: string;
 }
 
 @Component({
@@ -18,28 +33,71 @@ export interface RentPaymentValidationDialogData {
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
+    MatProgressSpinnerModule,
   ],
   templateUrl: './rent-payment-validation-dialog.html',
   styleUrl: './rent-payment-validation-dialog.css',
 })
 export class RentPaymentValidationDialog {
   readonly data = inject<RentPaymentValidationDialogData>(MAT_DIALOG_DATA);
-  readonly dialogRef = inject(MatDialogRef<RentPaymentValidationDialog>);
+  private readonly dialogRef = inject(MatDialogRef<RentPaymentValidationDialog>);
+  private readonly payments = inject(RentPaymentService);
+  private readonly operationId = crypto.randomUUID();
+  readonly today = utcIsoDate();
+  readonly saving = signal(false);
+  readonly error = signal('');
+  readonly formatEuro = formatEuro;
 
   readonly form = new FormGroup({
-    rent: new FormControl(this.data.rent, {
+    receivedAt: new FormControl(this.today, {
       nonNullable: true,
-      validators: [Validators.required, Validators.min(0)],
+      validators: [Validators.required, this.notFuture.bind(this)],
     }),
-    charges: new FormControl(this.data.charges, {
+    amount: new FormControl(this.data.rentDue.remainingAmount, {
       nonNullable: true,
-      validators: [Validators.required, Validators.min(0)],
+      validators: [Validators.required, Validators.min(0.01)],
     }),
   });
 
+  private readonly amount = toSignal(this.form.controls.amount.valueChanges, {
+    initialValue: this.form.controls.amount.value,
+  });
+  readonly allocatedAmount = computed(() =>
+    Math.min(Math.max(this.amount() ?? 0, 0), this.data.rentDue.remainingAmount),
+  );
+  readonly remainingAfter = computed(() =>
+    Math.max(this.data.rentDue.remainingAmount - this.allocatedAmount(), 0),
+  );
+  readonly surplus = computed(() =>
+    Math.max((this.amount() ?? 0) - this.data.rentDue.remainingAmount, 0),
+  );
+
   submit(): void {
-    if (this.form.valid) {
-      this.dialogRef.close(this.form.getRawValue());
-    }
+    this.form.markAllAsTouched();
+    if (this.form.invalid || this.saving()) return;
+    this.saving.set(true);
+    this.error.set('');
+    this.payments
+      .record({
+        operationId: this.operationId,
+        rentDueId: this.data.rentDue.id,
+        rentDueVersion: this.data.rentDue.version,
+        ...this.form.getRawValue(),
+      })
+      .pipe(finalize(() => this.saving.set(false)))
+      .subscribe({
+        next: (payment) => this.dialogRef.close(payment),
+        error: (error) => {
+          if (isRentPaymentDataStale(error)) {
+            this.dialogRef.close(RENT_PAYMENT_DATA_STALE);
+            return;
+          }
+          this.error.set(httpErrorMessage(error, 'Impossible d’enregistrer ce règlement.'));
+        },
+      });
+  }
+
+  private notFuture(control: AbstractControl<string>): ValidationErrors | null {
+    return control.value > this.today ? { futureDate: true } : null;
   }
 }

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

@@ -1,88 +1,188 @@
-.rent-payment-grid {
+.rent-payment-grid,
+.payment-history-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
   gap: var(--space-4, 1rem);
 }
 
-.schedule-actions {
-  margin-bottom: var(--space-4, 1rem);
+.schedule-actions,
+.payment-history {
+  margin-block-start: var(--space-6, 1.5rem);
 }
 
-.rent-payment {
+.schedule-actions {
+  margin-block-end: var(--space-4, 1rem);
+}
+
+.payment-history {
+  padding-block-start: var(--space-8, 2rem);
+  border-block-start: 1px solid var(--border, #dce5df);
+}
+
+.operation-feedback {
+  padding: var(--space-4, 1rem);
+  border: 1px solid;
+  border-radius: var(--radius-md, 0.8125rem);
+}
+
+.success-message {
+  border-color: var(--accent, #0f766e);
+  background: var(--surface-accent, #dcefeb);
+  color: var(--accent-strong, #0a5f59);
+}
+
+.error-message {
+  border-color: var(--danger, #b42318);
+  background: var(--danger-soft, #fee9e7);
+  color: var(--danger, #b42318);
+}
+
+.rent-payment,
+.payment-history-card {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
   padding: var(--space-5, 1.25rem);
   border: 1px solid var(--border, #dce5df);
   border-radius: var(--radius-xl, 1.375rem);
   background: var(--surface, #ffffff);
 }
 
+.payment-history-card.reversed {
+  background: var(--surface-soft, #e9efeb);
+}
+
 .payment-topline,
-.rent-payment dl > div {
+.rent-payment dl > div,
+.payment-history-card dl > div,
+.movement-list li {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3, 0.75rem);
 }
 
 .payment-topline {
-  margin-bottom: var(--space-4, 1rem);
+  margin-block-end: var(--space-4, 1rem);
 }
 
 .rent-payment h2 {
-  margin-bottom: var(--space-1, 0.25rem);
+  margin-block-end: var(--space-1, 0.25rem);
 }
 
 .payment-month,
-.rent-payment dt {
+.rent-payment dt,
+.payment-history-card dt,
+.payment-history-card > p {
   color: var(--text-muted, #687670);
 }
 
-.rent-payment dl {
+.rent-payment dl,
+.payment-history-card 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 dl > div,
+.payment-history-card dl > div {
+  padding-block: var(--space-2, 0.5rem);
+  border-block-end: 1px solid var(--border, #dce5df);
 }
 
-.rent-payment dd {
+.rent-payment dd,
+.payment-history-card dd {
   margin: 0;
   font-weight: 700;
 }
 
-.rent-due-labels {
+.rent-due-labels,
+.card-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2, 0.5rem);
 }
 
+.card-actions {
+  margin-block-start: auto;
+  padding-block-start: var(--space-4, 1rem);
+}
+
+.card-actions button {
+  min-height: 2.75rem;
+}
+
 .settlement-status,
-.timing-status {
+.timing-status,
+.payment-status {
   font-size: 0.8rem;
   font-weight: 700;
 }
 
-.settlement-status.paid {
+.settlement-status.paid,
+.payment-status.confirmed {
   color: var(--accent, #0f766e);
 }
+
 .settlement-status.unpaid,
 .settlement-status.partially_paid {
   color: var(--warning, #9a6700);
 }
-.timing-status.overdue {
+
+.timing-status.overdue,
+.payment-status.reversed,
+.danger-link.mat-mdc-button {
   color: var(--danger, #b42318);
 }
+
 .timing-status.upcoming {
   color: var(--text-muted, #687670);
 }
 
-@media (min-width: 700px) {
-  .rent-payment-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.movement-list {
+  margin-block-start: var(--space-4, 1rem);
 }
 
-@media (min-width: 1100px) {
-  .rent-payment-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+.movement-list h3 {
+  margin-block-end: var(--space-2, 0.5rem);
+  font-size: 1rem;
+}
+
+.movement-list ul {
+  display: grid;
+  gap: var(--space-2, 0.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.movement-list li {
+  min-width: 0;
+  padding: var(--space-2, 0.5rem);
+  border-radius: var(--radius-sm, 0.75rem);
+  background: var(--surface-soft, #e9efeb);
+}
+
+.movement-list li span {
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.reversal-details {
+  display: grid;
+  gap: var(--space-2, 0.5rem);
+  margin-block-start: var(--space-4, 1rem);
+  padding: var(--space-4, 1rem);
+  border-radius: var(--radius-md, 0.8125rem);
+  background: var(--danger-soft, #fee9e7);
+  color: var(--danger, #b42318);
+}
+
+.card-error {
+  margin: var(--space-3, 0.75rem) 0 0;
+  color: var(--danger, #b42318);
+}
+
+mat-spinner {
+  display: inline-block;
+  margin-inline-end: var(--space-2, 0.5rem);
 }

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

@@ -3,18 +3,29 @@
     <div>
       <p class="eyebrow">Location</p>
       <h1>Mes loyers</h1>
-      <p>Suivez les échéances de vos baux actifs.</p>
+      <p>Suivez les échéances et enregistrez les règlements déjà reçus.</p>
     </div>
   </header>
 
-  <div class="content-region" [attr.aria-busy]="contentLoading()">
-    @if (!contentReady() && loadError()) {
+  @if (feedback(); as feedback) {
+    <p
+      class="operation-feedback"
+      [class.success-message]="feedback.kind === 'success'"
+      [class.error-message]="feedback.kind === 'error'"
+      [attr.role]="feedback.kind === 'error' ? 'alert' : 'status'"
+    >
+      {{ feedback.message }}
+    </p>
+  }
+
+  <div class="content-region" [attr.aria-busy]="scheduleLoading()">
+    @if (!scheduleReady() && scheduleError()) {
       <article class="load-error" role="alert">
         <h2>Chargement impossible</h2>
-        <p>{{ loadError() }}</p>
+        <p>{{ scheduleError() }}</p>
         <button mat-stroked-button type="button" (click)="load()">Réessayer</button>
       </article>
-    } @else if (!contentReady()) {
+    } @else if (!scheduleReady()) {
       <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">
@@ -25,12 +36,12 @@
         }
       </div>
     } @else {
-      @if (contentLoading()) {
+      @if (scheduleLoading()) {
         <mat-progress-bar mode="indeterminate" aria-label="Actualisation des loyers" />
       }
-      @if (loadError()) {
+      @if (scheduleError()) {
         <div class="refresh-error" role="alert">
-          <p>{{ loadError() }}</p>
+          <p>{{ scheduleError() }}</p>
           <button mat-button type="button" (click)="load()">Réessayer</button>
         </div>
       }
@@ -66,32 +77,196 @@
                     {{ timingLabel(rentDue.timing) }}
                   </span>
                 </div>
-                <strong>{{ rentDue.total.toLocaleString('fr-FR') }} €</strong>
+                <strong>{{ formatEuro(rentDue.total) }}</strong>
               </div>
               <h2>{{ apartmentName(rentDue) }}</h2>
               <p class="payment-month">{{ monthLabel(rentDue.month) }}</p>
               <dl>
                 <div>
                   <dt>Loyer</dt>
-                  <dd>{{ rentDue.rent.toLocaleString('fr-FR') }} €</dd>
+                  <dd>{{ formatEuro(rentDue.rent) }}</dd>
                 </div>
                 <div>
                   <dt>Charges</dt>
-                  <dd>{{ rentDue.charges.toLocaleString('fr-FR') }} €</dd>
+                  <dd>{{ formatEuro(rentDue.charges) }}</dd>
+                </div>
+                <div>
+                  <dt>Déjà réglé</dt>
+                  <dd>{{ formatEuro(rentDue.allocatedAmount) }}</dd>
                 </div>
                 <div>
                   <dt>Restant à régler</dt>
-                  <dd>{{ rentDue.remainingAmount.toLocaleString('fr-FR') }} €</dd>
+                  <dd>{{ formatEuro(rentDue.remainingAmount) }}</dd>
                 </div>
                 <div>
                   <dt>Échéance</dt>
                   <dd>{{ rentDue.dueDate | date: 'dd MMMM yyyy' }}</dd>
                 </div>
               </dl>
+              <div class="card-actions">
+                @if (rentDue.settlement !== 'PAID') {
+                  <button mat-flat-button type="button" (click)="recordPayment(rentDue)">
+                    Enregistrer un règlement
+                  </button>
+                } @else {
+                  <button
+                    mat-stroked-button
+                    type="button"
+                    [disabled]="workspace.rentReceiptDownloading(rentDue.id)"
+                    (click)="workspace.downloadRentReceipt(rentDue)"
+                  >
+                    @if (workspace.rentReceiptDownloading(rentDue.id)) {
+                      <mat-spinner diameter="18" aria-label="Téléchargement en cours" />
+                    }
+                    Télécharger la quittance
+                  </button>
+                }
+              </div>
+              @if (workspace.rentReceiptDownloadError(rentDue.id)) {
+                <p class="card-error" role="alert">
+                  {{ workspace.rentReceiptDownloadError(rentDue.id) }}
+                </p>
+              }
             </article>
           }
         </div>
       }
     }
   </div>
+
+  <section class="payment-history" aria-labelledby="payment-history-title">
+    <header>
+      <p class="eyebrow">Encaissements</p>
+      <h2 id="payment-history-title">Règlements enregistrés</h2>
+    </header>
+    <div [attr.aria-busy]="workspace.rentPaymentLoadState().loading">
+      @if (!workspace.rentPaymentLoadState().loaded && workspace.rentPaymentLoadState().error) {
+        <article class="load-error" role="alert">
+          <p>{{ workspace.rentPaymentLoadState().error }}</p>
+          <button mat-stroked-button type="button" (click)="workspace.loadRentPayments()">
+            Réessayer
+          </button>
+        </article>
+      } @else if (!workspace.rentPaymentLoadState().loaded) {
+        <div class="payment-history-grid" aria-label="Chargement des règlements">
+          @for (placeholder of [1, 2]; track placeholder) {
+            <article class="skeleton-card" aria-hidden="true"></article>
+          }
+        </div>
+      } @else {
+        @if (workspace.rentPaymentLoadState().loading) {
+          <mat-progress-bar mode="indeterminate" aria-label="Actualisation des règlements" />
+        }
+        @if (workspace.rentPaymentLoadState().error) {
+          <p class="refresh-error" role="alert">{{ workspace.rentPaymentLoadState().error }}</p>
+        }
+        @if (displayedPayments().length === 0) {
+          <article class="empty-state"><p>Aucun règlement enregistré.</p></article>
+        } @else {
+          <div class="payment-history-grid">
+            @for (payment of displayedPayments(); track payment.id) {
+              <article
+                class="payment-history-card"
+                [class.reversed]="payment.status === 'REVERSED'"
+              >
+                <div class="payment-topline">
+                  <span class="payment-status" [class]="payment.status.toLowerCase()">
+                    {{ paymentStatusLabel(payment.status) }}
+                  </span>
+                  <strong>{{ formatEuro(payment.amount) }}</strong>
+                </div>
+                <p>Reçu le {{ payment.receivedAt | date: 'dd MMMM yyyy' }}</p>
+                <dl>
+                  <div>
+                    <dt>Affecté</dt>
+                    <dd>{{ formatEuro(payment.allocatedAmount) }}</dd>
+                  </div>
+                  <div>
+                    <dt>Remboursé</dt>
+                    <dd>{{ formatEuro(payment.refundedAmount) }}</dd>
+                  </div>
+                  <div>
+                    <dt>Solde non affecté</dt>
+                    <dd>{{ formatEuro(payment.unallocatedBalance) }}</dd>
+                  </div>
+                </dl>
+
+                @if (payment.allocations.length > 0) {
+                  <div class="movement-list">
+                    <h3>Affectations</h3>
+                    <ul>
+                      @for (allocation of payment.allocations; track allocation.id) {
+                        <li>
+                          <span>{{ allocationLabel(allocation) }}</span
+                          ><strong>{{ formatEuro(allocation.amount) }}</strong>
+                        </li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (payment.refunds.length > 0) {
+                  <div class="movement-list">
+                    <h3>Remboursements</h3>
+                    <ul>
+                      @for (refund of payment.refunds; track refund.id) {
+                        <li>
+                          <span>{{ refund.refundedAt | date: 'dd MMMM yyyy' }}</span
+                          ><strong>{{ formatEuro(refund.amount) }}</strong>
+                        </li>
+                      }
+                    </ul>
+                  </div>
+                }
+                @if (payment.reversal; as reversal) {
+                  <div class="reversal-details">
+                    <strong>Contrepassé le {{ reversal.reversedAt | date: 'dd MMMM yyyy' }}</strong>
+                    <span>{{ reversal.reason }}</span>
+                  </div>
+                }
+
+                @if (payment.status === 'CONFIRMED') {
+                  <div class="card-actions">
+                    <button
+                      mat-stroked-button
+                      type="button"
+                      [disabled]="workspace.paymentReceiptDownloading(payment.id)"
+                      (click)="workspace.downloadPaymentReceipt(payment)"
+                    >
+                      @if (workspace.paymentReceiptDownloading(payment.id)) {
+                        <mat-spinner diameter="18" aria-label="Téléchargement en cours" />
+                      }
+                      Télécharger le reçu
+                    </button>
+                    @if (canAllocate(payment)) {
+                      <button mat-stroked-button type="button" (click)="allocateSurplus(payment)">
+                        Affecter
+                      </button>
+                    }
+                    @if (payment.unallocatedBalance > 0) {
+                      <button mat-stroked-button type="button" (click)="refundSurplus(payment)">
+                        Rembourser
+                      </button>
+                    }
+                    <button
+                      mat-button
+                      type="button"
+                      class="danger-link"
+                      (click)="reversePayment(payment)"
+                    >
+                      Contrepasser
+                    </button>
+                  </div>
+                }
+                @if (workspace.paymentReceiptDownloadError(payment.id)) {
+                  <p class="card-error" role="alert">
+                    {{ workspace.paymentReceiptDownloadError(payment.id) }}
+                  </p>
+                }
+              </article>
+            }
+          </div>
+        }
+      }
+    </div>
+  </section>
 </section>

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

@@ -1,103 +1,90 @@
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { RentPaymentAllocationDialog } from '../rent-payment-allocation-dialog/rent-payment-allocation-dialog';
+import { RentPaymentRefundDialog } from '../rent-payment-refund-dialog/rent-payment-refund-dialog';
+import { RentPaymentReversalDialog } from '../rent-payment-reversal-dialog/rent-payment-reversal-dialog';
+import { RentPaymentValidationDialog } from '../rent-payment-validation-dialog/rent-payment-validation-dialog';
+import { RentPaymentDialogResult, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
 import { RentDue } from '../../services/lease.service';
+import { RentPayment } from '../../services/rent-payment.service';
 import { WorkspaceService } from '../../services/workspace.service';
 import { RentPaymentsPage } from './rent-payments-page';
 
 describe('RentPaymentsPage', () => {
-  it('loads and renders RentDue records instead of the legacy combined model', () => {
-    const workspace = {
-      ...createWorkspace([rentDue('due-1', '2027-08', 'UPCOMING')]),
-      rentPayments: signal([payment('legacy-payment', '2026-07', 'LATE')]),
-      loadRentPayments: vi.fn(),
-    };
-    const fixture = createFixture(workspace);
+  it('loads dues and payment history and offers recording on every non-paid due', () => {
+    const { fixture, workspace } = createFixture([
+      rentDue('due-1', '2027-08', 'UPCOMING'),
+      rentDue('due-2', '2027-09', 'UPCOMING', 'PAID', { allocatedAmount: 850, remainingAmount: 0 }),
+    ]);
 
     expect(workspace.loadRentDues).toHaveBeenCalledOnce();
-    expect(workspace.loadRentPayments).not.toHaveBeenCalled();
-    expect(paymentMonths(fixture)).toEqual(['août 2027']);
-    expect(fixture.nativeElement.textContent).not.toContain('Marquer comme payé');
+    expect(workspace.loadRentPayments).toHaveBeenCalledOnce();
+    expect(button(fixture, 'Enregistrer un règlement')).not.toBeNull();
+    expect(fixture.nativeElement.textContent).toContain('Aucun règlement enregistré');
   });
 
-  it('renders amounts, settlement and timing as independent RentDue facts', () => {
-    const fixture = createFixture(
-      createWorkspace([
-        rentDue('due-1', '2026-07', 'OVERDUE', 'PARTIALLY_PAID', {
-          remainingAmount: 350,
-        }),
-      ]),
-    );
+  it('renders amounts, settlement, and timing as independent RentDue facts', () => {
+    const { fixture } = createFixture([
+      rentDue('due-1', '2026-07', 'OVERDUE', 'PARTIALLY_PAID', {
+        allocatedAmount: 500,
+        remainingAmount: 350,
+      }),
+    ]);
     const card = fixture.nativeElement.querySelector('.rent-payment') as HTMLElement;
 
     expect(card.textContent).toContain('T2');
-    expect(card.textContent).toContain('800 €');
-    expect(card.textContent).toContain('50 €');
-    expect(card.textContent).toContain('850 €');
-    expect(card.textContent).toContain('350 €');
+    expect(card.textContent).toContain('800,00 €');
+    expect(card.textContent).toContain('500,00 €');
+    expect(card.textContent).toContain('350,00 €');
     expect(card.querySelector('.settlement-status.partially_paid')?.textContent).toContain(
       'Partiellement réglée',
     );
     expect(card.querySelector('.timing-status.overdue')?.textContent).toContain('En retard');
-    expect(card.querySelector('.card-actions')).toBeNull();
   });
 
   it('shows overdue dues through the next upcoming due', () => {
-    const workspace = createWorkspace([
+    const { fixture } = createFixture([
       rentDue('overdue-january', '2026-01', 'OVERDUE'),
       rentDue('overdue-february', '2026-02', 'OVERDUE'),
       rentDue('upcoming-march', '2026-03', 'UPCOMING'),
       rentDue('upcoming-april', '2026-04', 'UPCOMING'),
     ]);
-    const fixture = createFixture(workspace);
 
     expect(paymentMonths(fixture)).toEqual(['janvier 2026', 'février 2026', 'mars 2026']);
   });
 
   it('starts the current schedule at the older of the last paid and first unpaid due', () => {
-    const workspace = createWorkspace([
-      rentDue('paid-january', '2026-01', 'OVERDUE', 'PAID'),
+    const { fixture } = createFixture([
+      rentDue('paid-january', '2026-01', 'OVERDUE', 'PAID', {
+        allocatedAmount: 850,
+        remainingAmount: 0,
+      }),
       rentDue('unpaid-february', '2026-02', 'OVERDUE'),
-      rentDue('paid-march', '2026-03', 'OVERDUE', 'PAID'),
+      rentDue('paid-march', '2026-03', 'OVERDUE', 'PAID', {
+        allocatedAmount: 850,
+        remainingAmount: 0,
+      }),
       rentDue('unpaid-april', '2026-04', 'OVERDUE'),
       rentDue('upcoming-may', '2026-05', 'UPCOMING'),
       rentDue('upcoming-june', '2026-06', 'UPCOMING'),
     ]);
-    const fixture = createFixture(workspace);
 
-    expect(paymentMonths(fixture)).toEqual([
-      'février 2026',
-      'mars 2026',
-      'avril 2026',
-      'mai 2026',
-    ]);
-  });
-
-  it('shows only the next due when none are overdue', () => {
-    const workspace = createWorkspace([
-      rentDue('upcoming-march', '2026-03', 'UPCOMING'),
-      rentDue('upcoming-april', '2026-04', 'UPCOMING'),
-    ]);
-    const fixture = createFixture(workspace);
-
-    expect(paymentMonths(fixture)).toEqual(['mars 2026']);
+    expect(paymentMonths(fixture)).toEqual(['février 2026', 'mars 2026', 'avril 2026', 'mai 2026']);
   });
 
   it('reveals and hides the full chronological schedule', () => {
-    const workspace = createWorkspace([
+    const { fixture } = createFixture([
       rentDue('upcoming-april', '2026-04', 'UPCOMING'),
       rentDue('overdue-january', '2026-01', 'OVERDUE'),
       rentDue('upcoming-march', '2026-03', 'UPCOMING'),
       rentDue('overdue-february', '2026-02', 'OVERDUE'),
     ]);
-    const fixture = createFixture(workspace);
-
     const toggle = fixture.nativeElement.querySelector('[aria-pressed]') as HTMLButtonElement;
-    expect(toggle.textContent).toContain('Afficher toutes les échéances');
-    expect(paymentMonths(fixture)).toEqual(['janvier 2026', 'février 2026', 'mars 2026']);
 
     toggle.click();
     fixture.detectChanges();
-
     expect(toggle.getAttribute('aria-pressed')).toBe('true');
     expect(paymentMonths(fixture)).toEqual([
       'janvier 2026',
@@ -105,52 +92,134 @@ describe('RentPaymentsPage', () => {
       'mars 2026',
       'avril 2026',
     ]);
-
-    toggle.click();
-    fixture.detectChanges();
-
-    expect(toggle.getAttribute('aria-pressed')).toBe('false');
-    expect(paymentMonths(fixture)).toEqual(['janvier 2026', 'février 2026', 'mars 2026']);
   });
 
-  it('shows loading and error states before the schedule is ready', () => {
-    const loadingFixture = createFixture(
-      createWorkspace([], { loaded: false, loading: true, error: '' }),
-    );
-    expect(loadingFixture.nativeElement.querySelector('.skeleton-card')).not.toBeNull();
+  it('keeps the payment modal result and refreshes the ledger after success', () => {
+    const recorded = payment({ unallocatedBalance: 100, amount: 950 });
+    const { fixture, workspace, dialog } = createFixture([rentDue('due-1', '2026-07', 'UPCOMING')]);
+    dialog.open.mockReturnValueOnce({ afterClosed: () => of(recorded) });
 
-    const errorFixture = createFixture(
-      createWorkspace([], { loaded: false, loading: false, error: 'Erreur de chargement.' }),
+    button(fixture, 'Enregistrer un règlement')?.click();
+    fixture.detectChanges();
+
+    expect(dialog.open).toHaveBeenCalledWith(
+      RentPaymentValidationDialog,
+      expect.objectContaining({
+        data: expect.objectContaining({ apartmentName: 'T2' }),
+      }),
     );
-    expect(errorFixture.nativeElement.textContent).toContain('Erreur de chargement.');
+    expect(workspace.acceptRentPayment).toHaveBeenCalledWith(recorded);
+    expect(fixture.nativeElement.textContent).toContain('Le règlement a été enregistré.');
+  });
+
+  it('refreshes stale payment data and announces the rejected operation', () => {
+    const { fixture, workspace, dialog } = createFixture([rentDue('due-1', '2026-07', 'UPCOMING')]);
+    dialog.open.mockReturnValueOnce({ afterClosed: () => of(RENT_PAYMENT_DATA_STALE) });
+
+    button(fixture, 'Enregistrer un règlement')?.click();
+    fixture.detectChanges();
+
+    expect(workspace.loadRentDues).toHaveBeenCalledTimes(2);
+    expect(workspace.loadRentPayments).toHaveBeenCalledTimes(2);
+    expect(workspace.acceptRentPayment).not.toHaveBeenCalled();
+    expect(fixture.nativeElement.querySelector('[role="alert"]')?.textContent).toContain(
+      'Les données ont changé',
+    );
+  });
+
+  it('shows confirmed payment history and opens each lifecycle action', () => {
+    const recorded = payment({ unallocatedBalance: 100, amount: 950 });
+    const { fixture, dialog } = createFixture(
+      [
+        rentDue('due-1', '2026-07', 'OVERDUE', 'PAID', {
+          allocatedAmount: 850,
+          remainingAmount: 0,
+        }),
+        rentDue('due-2', '2026-08', 'UPCOMING'),
+      ],
+      [recorded],
+    );
+    dialog.open.mockReturnValue({ afterClosed: () => of(undefined) });
+
+    button(fixture, 'Affecter')?.click();
+    button(fixture, 'Rembourser')?.click();
+    button(fixture, 'Contrepasser')?.click();
+
+    expect(dialog.open.mock.calls.map((call) => call[0])).toEqual([
+      RentPaymentAllocationDialog,
+      RentPaymentRefundDialog,
+      RentPaymentReversalDialog,
+    ]);
+    expect(fixture.nativeElement.textContent).toContain('100,00 €');
+    expect(fixture.nativeElement.textContent).toContain('Télécharger le reçu');
+  });
+
+  it('keeps reversal metadata visible without mutation actions', () => {
+    const reversed = payment({
+      status: 'REVERSED',
+      reversal: {
+        id: 'reversal-1',
+        reversedAt: '2026-07-08',
+        reason: 'Erreur de saisie',
+        reversedAllocations: [],
+      },
+    });
+    const { fixture } = createFixture([], [reversed]);
+    const history = fixture.nativeElement.querySelector('.payment-history-card') as HTMLElement;
+
+    expect(history.textContent).toContain('Contrepassé');
+    expect(history.textContent).toContain('Erreur de saisie');
+    expect(history.textContent).not.toContain('Télécharger le reçu');
+  });
+
+  it('shows independent loading and error states', () => {
+    const { fixture } = createFixture([], [], { loaded: false, loading: false, error: 'Erreur.' });
+    expect(fixture.nativeElement.textContent).toContain('Erreur.');
+    expect(fixture.nativeElement.querySelector('[role="alert"]')).not.toBeNull();
   });
 });
 
-function createFixture(workspace: ReturnType<typeof createWorkspace>) {
-  TestBed.resetTestingModule();
-  TestBed.configureTestingModule({
-    providers: [{ provide: WorkspaceService, useValue: workspace }],
-  });
-  const fixture = TestBed.createComponent(RentPaymentsPage);
-  fixture.detectChanges();
-  return fixture;
-}
-
-function createWorkspace(
+function createFixture(
   rentDues: RentDue[],
+  rentPayments: RentPayment[] = [],
   loadState = { loaded: true, loading: false, error: '' },
 ) {
-  return {
+  TestBed.resetTestingModule();
+  const workspace = {
     apartments: signal([{ id: 'apartment-1', name: 'T2' }]),
     leases: signal([{ id: 'lease-1', apartmentId: 'apartment-1' }]),
     rentDues: signal(rentDues),
+    rentPayments: signal(rentPayments),
     apartmentLoadState: signal(loadState),
     leaseLoadState: signal(loadState),
     rentDueLoadState: signal(loadState),
+    rentPaymentLoadState: signal(loadState),
     loadApartments: vi.fn(),
     loadLeases: vi.fn(),
     loadRentDues: vi.fn(),
+    loadRentPayments: vi.fn(),
+    acceptRentPayment: vi.fn(),
+    rentReceiptDownloading: vi.fn(() => false),
+    rentReceiptDownloadError: vi.fn(() => ''),
+    downloadRentReceipt: vi.fn(),
+    paymentReceiptDownloading: vi.fn(() => false),
+    paymentReceiptDownloadError: vi.fn(() => ''),
+    downloadPaymentReceipt: vi.fn(),
   };
+  const dialog = {
+    open: vi
+      .fn()
+      .mockReturnValue({ afterClosed: () => of<RentPaymentDialogResult | undefined>(undefined) }),
+  };
+  TestBed.configureTestingModule({
+    providers: [
+      { provide: WorkspaceService, useValue: workspace },
+      { provide: MatDialog, useValue: dialog },
+    ],
+  });
+  const fixture = TestBed.createComponent(RentPaymentsPage);
+  fixture.detectChanges();
+  return { fixture, workspace, dialog };
 }
 
 function rentDue(
@@ -168,29 +237,47 @@ function rentDue(
     rent: 800,
     charges: 50,
     total: 850,
+    allocatedAmount: 0,
     remainingAmount: 850,
     settlement,
     timing,
+    version: 0,
     ...overrides,
   };
 }
 
-function payment(id: string, month: string, status: 'PAID' | 'LATE' | 'UPCOMING') {
+function payment(overrides: Partial<RentPayment> = {}): RentPayment {
   return {
-    id,
+    id: 'payment-1',
     leaseId: 'lease-1',
-    month,
-    dueDate: `${month}-05`,
-    rent: 800,
-    charges: 50,
-    total: 850,
-    status,
-    paidAt: status === 'PAID' ? `${month}-05` : null,
+    receivedAt: '2026-07-06',
+    amount: 850,
+    status: 'CONFIRMED',
+    allocations: [
+      { id: 'allocation-1', rentDueId: 'due-1', amount: 850, allocatedAt: '2026-07-06' },
+    ],
+    allocatedAmount: 850,
+    refundedAmount: 0,
+    unallocatedBalance: 0,
+    confirmedAt: '2026-07-06',
+    version: 0,
+    refunds: [],
+    reversal: null,
+    ...overrides,
   };
 }
 
-function paymentMonths(fixture: ReturnType<typeof createFixture>): string[] {
+function paymentMonths(fixture: ReturnType<typeof TestBed.createComponent>): string[] {
   return [...fixture.nativeElement.querySelectorAll('.payment-month')].map((element) =>
     element.textContent.trim(),
   );
 }
+
+function button(
+  fixture: ReturnType<typeof TestBed.createComponent>,
+  text: string,
+): HTMLButtonElement | undefined {
+  return [...fixture.nativeElement.querySelectorAll('button')].find((element) =>
+    element.textContent.includes(text),
+  );
+}

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

@@ -1,37 +1,67 @@
+import { DatePipe } from '@angular/common';
 import { Component, computed, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {
+  EligibleRentDue,
+  RentPaymentAllocationDialog,
+} from '../rent-payment-allocation-dialog/rent-payment-allocation-dialog';
+import { RentPaymentRefundDialog } from '../rent-payment-refund-dialog/rent-payment-refund-dialog';
+import { RentPaymentReversalDialog } from '../rent-payment-reversal-dialog/rent-payment-reversal-dialog';
+import {
+  RentPaymentValidationDialog,
+  RentPaymentValidationDialogData,
+} from '../rent-payment-validation-dialog/rent-payment-validation-dialog';
 import { RentDue } from '../../services/lease.service';
+import { formatEuro } from '../../services/rent-payment-format';
+import { PaymentAllocation, RentPayment } from '../../services/rent-payment.service';
 import { WorkspaceService } from '../../services/workspace.service';
-import { DatePipe } from '@angular/common';
+import { RentPaymentDialogResult, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
+
+interface PaymentFeedback {
+  kind: 'success' | 'error';
+  message: string;
+}
 
 @Component({
   selector: 'app-rent-payments-page',
-  imports: [MatButtonModule, MatProgressBarModule, DatePipe],
+  imports: [DatePipe, MatButtonModule, MatProgressBarModule, MatProgressSpinnerModule],
   templateUrl: './rent-payments-page.html',
   styleUrl: './rent-payments-page.css',
 })
 export class RentPaymentsPage {
   readonly workspace = inject(WorkspaceService);
+  private readonly dialog = inject(MatDialog);
   readonly showFullSchedule = signal(false);
+  readonly feedback = signal<PaymentFeedback | null>(null);
+  readonly formatEuro = formatEuro;
   readonly displayedRentDues = computed(() =>
     this.showFullSchedule()
       ? sortRentDues(this.workspace.rentDues())
       : currentRentDues(this.workspace.rentDues()),
   );
-  readonly contentReady = computed(
+  readonly displayedPayments = computed(() =>
+    [...this.workspace.rentPayments()].sort(
+      (left, right) =>
+        right.receivedAt.localeCompare(left.receivedAt) ||
+        right.confirmedAt.localeCompare(left.confirmedAt),
+    ),
+  );
+  readonly scheduleReady = computed(
     () =>
       this.workspace.rentDueLoadState().loaded &&
       this.workspace.leaseLoadState().loaded &&
       this.workspace.apartmentLoadState().loaded,
   );
-  readonly contentLoading = computed(
+  readonly scheduleLoading = computed(
     () =>
       this.workspace.rentDueLoadState().loading ||
       this.workspace.leaseLoadState().loading ||
       this.workspace.apartmentLoadState().loading,
   );
-  readonly loadError = computed(
+  readonly scheduleError = computed(
     () =>
       this.workspace.rentDueLoadState().error ||
       this.workspace.leaseLoadState().error ||
@@ -66,15 +96,119 @@ export class RentPaymentsPage {
     return { UPCOMING: 'À venir', OVERDUE: 'En retard' }[timing];
   }
 
+  paymentStatusLabel(status: RentPayment['status']): string {
+    return { CONFIRMED: 'Confirmé', REVERSED: 'Contrepassé' }[status];
+  }
+
+  allocationLabel(allocation: PaymentAllocation): string {
+    const due = this.workspace.rentDues().find((item) => item.id === allocation.rentDueId);
+    return due ? `${this.apartmentName(due)} — ${this.monthLabel(due.month)}` : 'Échéance inconnue';
+  }
+
   load(): void {
     this.workspace.loadRentDues();
     this.workspace.loadLeases();
     this.workspace.loadApartments();
+    this.workspace.loadRentPayments();
   }
 
   toggleSchedule(): void {
     this.showFullSchedule.update((showFullSchedule) => !showFullSchedule);
   }
+
+  recordPayment(rentDue: RentDue): void {
+    this.dialog
+      .open<RentPaymentValidationDialog, RentPaymentValidationDialogData, RentPaymentDialogResult>(
+        RentPaymentValidationDialog,
+        {
+          data: { rentDue, apartmentName: this.apartmentName(rentDue) },
+          width: 'min(36rem, calc(100vw - 2rem))',
+          maxWidth: 'calc(100vw - 2rem)',
+        },
+      )
+      .afterClosed()
+      .subscribe((payment) => this.accept(payment, 'Le règlement a été enregistré.'));
+  }
+
+  allocateSurplus(payment: RentPayment): void {
+    const eligibleRentDues = this.eligibleRentDues(payment);
+    if (eligibleRentDues.length === 0) return;
+    this.dialog
+      .open<
+        RentPaymentAllocationDialog,
+        { payment: RentPayment; eligibleRentDues: EligibleRentDue[] },
+        RentPaymentDialogResult
+      >(RentPaymentAllocationDialog, {
+        data: { payment, eligibleRentDues },
+        width: 'min(36rem, calc(100vw - 2rem))',
+        maxWidth: 'calc(100vw - 2rem)',
+      })
+      .afterClosed()
+      .subscribe((updated) => this.accept(updated, 'Le surplus a été affecté.'));
+  }
+
+  refundSurplus(payment: RentPayment): void {
+    this.dialog
+      .open<RentPaymentRefundDialog, RentPayment, RentPaymentDialogResult>(
+        RentPaymentRefundDialog,
+        {
+          data: payment,
+          width: 'min(34rem, calc(100vw - 2rem))',
+          maxWidth: 'calc(100vw - 2rem)',
+        },
+      )
+      .afterClosed()
+      .subscribe((updated) => this.accept(updated, 'Le remboursement a été enregistré.'));
+  }
+
+  reversePayment(payment: RentPayment): void {
+    this.dialog
+      .open<RentPaymentReversalDialog, RentPayment, RentPaymentDialogResult>(
+        RentPaymentReversalDialog,
+        {
+          data: payment,
+          role: 'alertdialog',
+          width: 'min(34rem, calc(100vw - 2rem))',
+          maxWidth: 'calc(100vw - 2rem)',
+        },
+      )
+      .afterClosed()
+      .subscribe((updated) => this.accept(updated, 'Le règlement a été contrepassé.'));
+  }
+
+  canAllocate(payment: RentPayment): boolean {
+    return payment.unallocatedBalance > 0 && this.eligibleRentDues(payment).length > 0;
+  }
+
+  private eligibleRentDues(payment: RentPayment): EligibleRentDue[] {
+    const allocatedDueIds = new Set(payment.allocations.map((allocation) => allocation.rentDueId));
+    return sortRentDues(this.workspace.rentDues())
+      .filter(
+        (due) =>
+          due.leaseId === payment.leaseId &&
+          due.settlement !== 'PAID' &&
+          !allocatedDueIds.has(due.id),
+      )
+      .map((rentDue) => ({
+        rentDue,
+        label: `${this.apartmentName(rentDue)} — ${this.monthLabel(rentDue.month)}`,
+      }));
+  }
+
+  private accept(result: RentPaymentDialogResult | undefined, message: string): void {
+    if (!result) return;
+    if (result === RENT_PAYMENT_DATA_STALE) {
+      this.workspace.loadRentDues();
+      this.workspace.loadRentPayments();
+      this.feedback.set({
+        kind: 'error',
+        message: 'Les données ont changé. Elles ont été actualisées ; recommencez l’opération.',
+      });
+      return;
+    }
+    this.workspace.acceptRentPayment(result);
+    this.feedback.set({ kind: 'success', message });
+  }
 }
 
 function sortRentDues(rentDues: readonly RentDue[]): RentDue[] {