feat(WEB-505): implement waive penalties for loan repayment and reschedule (#2941)

Fix waive-penalties amount calc and align translations across locales

fix:test issue

Fix waive penalties recalculation, clean up subscription leaks, and align penalty translations

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -116,6 +116,42 @@
               <input matInput formControlName="newInterestRate" />
             </mat-form-field>
           }
+
+          <mat-checkbox class="m-b-10" [formControl]="waivePenalties">
+            {{ 'labels.inputs.Waive Penalties' | translate }}
+          </mat-checkbox>
+
+          @if (waivePenalties.value) {
+            @if (penalties.length > 0) {
+              <div class="layout-row-wrap m-t-20">
+                <div class="flex-100 m-b-10">
+                  <mat-checkbox [checked]="selectAllPenalties" (change)="toggleSelectAllPenalties()">
+                    {{ 'labels.inputs.All' | translate }}
+                  </mat-checkbox>
+                </div>
+                <div class="flex-100 layout-row-wrap">
+                  @for (penalty of penalties; track penalty.id) {
+                    <div class="penalty-item-container">
+                      <mat-checkbox
+                        [checked]="isPenaltySelected(penalty.id)"
+                        (change)="togglePenaltySelection(penalty.id)"
+                      ></mat-checkbox>
+                      <span class="penalty-label mat-body-strong">{{ 'labels.inputs.Penalty' | translate }}</span>
+                      <span class="penalty-name">{{ getPenaltyDisplayKey(penalty) | translate }}</span>
+                      <span class="penalty-date">{{ penalty.dueDate | dateFormat }}</span>
+                      <span class="penalty-amount r-amount">{{
+                        penalty.amountOutstanding || penalty.amount || 0 | formatNumber
+                      }}</span>
+                    </div>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="m-t-20 m-l-10">
+                <span class="mat-body-2">{{ 'labels.text.No penalties found' | translate }}</span>
+              </div>
+            }
+          }
         </div>
 
         <mat-card-actions class="layout-row align-center gap-5px responsive-column">

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.scss

@@ -1,3 +1,45 @@
 .container {
   max-width: 37rem;
 }
+
+.penalty-item-container {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: auto minmax(80px, 110px) minmax(140px, 100%) minmax(130px, 170px) minmax(90px, 120px);
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 12px 16px;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.penalty-label {
+  min-width: 80px;
+}
+
+.penalty-name {
+  min-width: 120px;
+}
+
+.penalty-date {
+  color: rgb(0 0 0 / 70%);
+  white-space: nowrap;
+}
+
+.penalty-amount {
+  text-align: right;
+  white-space: nowrap;
+}
+
+:host-context(.dark-theme) {
+  .penalty-item-container {
+    background-color: #3a3a3a;
+    color: rgb(255 255 255 / 87%);
+    border-color: #4a4a4a;
+  }
+}

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, inject } from '@angular/core';
+import { Component, OnInit, Input, inject, DestroyRef } from '@angular/core';
 import { LoansService } from 'app/loans/loans.service';
 import {
   UntypedFormBuilder,
@@ -13,7 +13,10 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { PenaltyManagementService } from 'app/loans/services/penalty-management.service';
+import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'mifosx-loan-reschedule',
@@ -21,7 +24,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./loan-reschedule.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    MatCheckbox
+    MatCheckbox,
+    FormatNumberPipe
   ]
 })
 export class LoanRescheduleComponent implements OnInit {
@@ -31,6 +35,8 @@ export class LoanRescheduleComponent implements OnInit {
   private router = inject(Router);
   private dateUtils = inject(Dates);
   private settingsService = inject(SettingsService);
+  private penaltyManagementService = inject(PenaltyManagementService);
+  private destroyRef = inject(DestroyRef);
 
   @Input() dataObject: any;
   loanId: any;
@@ -46,6 +52,14 @@ export class LoanRescheduleComponent implements OnInit {
   introduceGracePeriods = new UntypedFormControl(false);
   extendRepaymentPeriod = new UntypedFormControl(false);
   adjustinterestrates = new UntypedFormControl(false);
+  waivePenalties = new UntypedFormControl(false);
+
+  /** Penalties list */
+  penalties: any[] = [];
+  /** Selected penalty IDs */
+  selectedPenalties: number[] = [];
+  /** Select all penalties checkbox */
+  selectAllPenalties = false;
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -62,6 +76,8 @@ export class LoanRescheduleComponent implements OnInit {
     this.maxDate = this.settingsService.businessDate;
     this.codes = this.dataObject.rescheduleReasons;
     this.setRescheduleLoanForm();
+    this.loadPenalties();
+    this.setupWaivePenaltiesListener();
   }
 
   setRescheduleLoanForm() {
@@ -109,6 +125,12 @@ export class LoanRescheduleComponent implements OnInit {
       locale
     };
     data.loanId = this.loanId;
+
+    // Add waived penalty charge IDs if penalties are being waived
+    if (this.waivePenalties.value && this.selectedPenalties.length > 0) {
+      data.chargeIds = this.selectedPenalties;
+    }
+
     this.loanService.submitRescheduleData(data).subscribe((response: any) => {
       // TODO: needs to be updated
       // mentioned in Community App:
@@ -116,4 +138,74 @@ export class LoanRescheduleComponent implements OnInit {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
+
+  /**
+   * Load penalties for the loan
+   * Penalties are charges calculated for installments in the payment schedule.
+   * Each penalty charge has a dueDate that corresponds to an installment due date.
+   */
+  loadPenalties() {
+    this.penaltyManagementService.loadPenalties(this.loanId).subscribe({
+      next: (penalties: any[]) => {
+        this.penalties = penalties;
+      },
+      error: (error: any) => {
+        console.error('Error loading penalties:', error);
+        this.penalties = [];
+      }
+    });
+  }
+
+  /**
+   * Setup listener for waive penalties checkbox
+   * Following the pattern of using valueChanges.subscribe()
+   */
+  setupWaivePenaltiesListener() {
+    this.waivePenalties.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value: boolean) => {
+      if (!value) {
+        // Reset selections when toggling off
+        this.selectedPenalties = [];
+        this.selectAllPenalties = false;
+      }
+    });
+  }
+
+  /**
+   * Toggle select all penalties
+   * Following the toggleSelects() pattern from loans-active-client-members
+   */
+  toggleSelectAllPenalties() {
+    const result = this.penaltyManagementService.toggleSelectAllPenalties(this.selectAllPenalties, this.penalties);
+    this.selectAllPenalties = result.selectAllPenalties;
+    this.selectedPenalties = result.selectedPenalties;
+  }
+
+  /**
+   * Toggle individual penalty selection
+   * Following the toggleSelect() pattern from loans-active-client-members
+   */
+  togglePenaltySelection(penaltyId: number) {
+    const result = this.penaltyManagementService.togglePenaltySelection(
+      penaltyId,
+      this.selectedPenalties,
+      this.penalties
+    );
+    this.selectedPenalties = result.selectedPenalties;
+    this.selectAllPenalties = result.selectAllPenalties;
+  }
+
+  /**
+   * Check if penalty is selected
+   */
+  isPenaltySelected(penaltyId: number): boolean {
+    return this.penaltyManagementService.isPenaltySelected(penaltyId, this.selectedPenalties);
+  }
+
+  /**
+   * Get penalty display key or plain text for translation/output
+   * Normalizes common backend values (like MORA / labels.inputs.*) to translation keys
+   */
+  getPenaltyDisplayKey(penalty: any): string {
+    return this.penaltyManagementService.getPenaltyDisplayKey(penalty);
+  }
 }

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -89,16 +89,50 @@
             </mat-select>
           </mat-form-field>
 
-          <div class="flex-fill">
-            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
-              <mat-slide-toggle>
-                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                  <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
-                </div>
-              </mat-slide-toggle>
-            </span>
+          <div class="flex-fill m-b-10">
+            <mat-slide-toggle [checked]="showPaymentDetails" (change)="addPaymentDetails()">
+              {{ 'labels.inputs.Show Payment Details' | translate }}
+            </mat-slide-toggle>
           </div>
 
+          <div class="flex-fill m-b-10">
+            <mat-slide-toggle [checked]="waivePenalties" (change)="toggleWaivePenalties()">
+              {{ 'labels.inputs.Waive Penalties' | translate }}
+            </mat-slide-toggle>
+          </div>
+
+          @if (waivePenalties) {
+            @if (penalties.length > 0) {
+              <div class="layout-row-wrap m-t-20">
+                <div class="flex-100 m-b-10">
+                  <mat-checkbox [checked]="selectAllPenalties" (change)="toggleSelectAllPenalties()">
+                    {{ 'labels.inputs.All' | translate }}
+                  </mat-checkbox>
+                </div>
+                <div class="flex-100 layout-row-wrap">
+                  @for (penalty of penalties; track penalty.id) {
+                    <div class="penalty-item-container">
+                      <mat-checkbox
+                        [checked]="isPenaltySelected(penalty.id)"
+                        (change)="togglePenaltySelection(penalty.id)"
+                      ></mat-checkbox>
+                      <span class="penalty-label mat-body-strong">{{ 'labels.inputs.Penalty' | translate }}</span>
+                      <span class="penalty-name">{{ getPenaltyDisplayKey(penalty) | translate }}</span>
+                      <span class="penalty-date">{{ penalty.dueDate | dateFormat }}</span>
+                      <span class="penalty-amount r-amount">{{
+                        penalty.amountOutstanding || penalty.amount || 0 | formatNumber
+                      }}</span>
+                    </div>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="m-t-20 m-l-10">
+                <span class="mat-body-2">{{ 'labels.text.No penalties found' | translate }}</span>
+              </div>
+            }
+          }
+
           @if (showPaymentDetails) {
             <mat-form-field>
               <mat-label> {{ 'labels.inputs.Account' | translate }} #</mat-label>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss

@@ -13,3 +13,45 @@
 .right-label {
   padding-right: 25px !important;
 }
+
+.penalty-item-container {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: auto minmax(80px, 110px) minmax(140px, 100%) minmax(130px, 170px) minmax(90px, 120px);
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 12px 16px;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.penalty-label {
+  min-width: 80px;
+}
+
+.penalty-name {
+  min-width: 120px;
+}
+
+.penalty-date {
+  white-space: nowrap;
+}
+
+.penalty-amount {
+  text-align: right;
+  white-space: nowrap;
+}
+
+// Dark mode styles
+:host-context(.dark-theme) {
+  .penalty-item-container {
+    background-color: #3a3a3a;
+    color: rgb(255 255 255 / 87%);
+    border-color: #4a4a4a;
+  }
+}

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts

@@ -8,8 +8,10 @@ import { LoansService } from 'app/loans/loans.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 import { Currency } from 'app/shared/models/general.model';
+import { PenaltyManagementService } from 'app/loans/services/penalty-management.service';
 import { InputAmountComponent } from '../../../../shared/input-amount/input-amount.component';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { FormatNumberPipe } from '../../../../pipes/format-number.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@@ -25,6 +27,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     ...STANDALONE_SHARED_IMPORTS,
     InputAmountComponent,
     MatSlideToggle,
+    MatCheckbox,
     CdkTextareaAutosize,
     FormatNumberPipe
   ]
@@ -36,6 +39,7 @@ export class MakeRepaymentComponent implements OnInit {
   private router = inject(Router);
   private dateUtils = inject(Dates);
   private settingsService = inject(SettingsService);
+  private penaltyManagementService = inject(PenaltyManagementService);
 
   @Input() dataObject: any;
   /** Loan Id */
@@ -44,6 +48,14 @@ export class MakeRepaymentComponent implements OnInit {
   paymentTypes: any;
   /** Show payment details */
   showPaymentDetails = false;
+  /** Waive Penalties toggle */
+  waivePenalties = false;
+  /** Penalties list */
+  penalties: any[] = [];
+  /** Selected penalty IDs */
+  selectedPenalties: number[] = [];
+  /** Select all penalties checkbox */
+  selectAllPenalties = false;
   /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
@@ -79,6 +91,7 @@ export class MakeRepaymentComponent implements OnInit {
     if (this.dataObject.currency) {
       this.currency = this.dataObject.currency;
     }
+    this.loadPenalties();
   }
 
   /**
@@ -97,22 +110,11 @@ export class MakeRepaymentComponent implements OnInit {
     });
 
     if (this.isCapitalizedIncome()) {
-      this.repaymentLoanForm.addControl(
-        'transactionAmount',
-        new UntypedFormControl('', [
-          Validators.required,
-          Validators.min(0.001),
-          Validators.max(this.dataObject.amount)
-        ])
-      );
+      this.repaymentLoanForm.addControl('transactionAmount', new UntypedFormControl('', []));
+      this.updateTransactionAmountValidators(false);
     } else {
-      this.repaymentLoanForm.addControl(
-        'transactionAmount',
-        new UntypedFormControl('', [
-          Validators.required,
-          Validators.min(0.001)
-        ])
-      );
+      this.repaymentLoanForm.addControl('transactionAmount', new UntypedFormControl('', []));
+      this.updateTransactionAmountValidators(false);
     }
     if (this.isCapitalizedIncome() || this.isBuyDownFee()) {
       this.repaymentLoanForm.addControl('classificationId', new UntypedFormControl(''));
@@ -169,6 +171,141 @@ export class MakeRepaymentComponent implements OnInit {
     return code.includes('merchantissuedrefund') || code.includes('payoutrefund');
   }
 
+  /**
+   * Load penalties for the loan
+   * Penalties are charges calculated for installments in the payment schedule.
+   * Each penalty charge has a dueDate that corresponds to an installment due date.
+   */
+  loadPenalties() {
+    this.penaltyManagementService.loadPenalties(this.loanId).subscribe({
+      next: (penalties: any[]) => {
+        this.penalties = penalties;
+      },
+      error: (error: any) => {
+        console.error('Error loading penalties:', error);
+        this.penalties = [];
+      }
+    });
+  }
+
+  /**
+   * Toggle waive penalties
+   * Following the addPaymentDetails() pattern
+   */
+  toggleWaivePenalties() {
+    this.waivePenalties = !this.waivePenalties;
+    if (!this.waivePenalties) {
+      // Reset selections when toggling off
+      this.selectedPenalties = [];
+      this.selectAllPenalties = false;
+      this.updateTransactionAmountValidators(false);
+      this.recalculateTransactionAmount();
+    } else {
+      this.recalculateTransactionAmount();
+    }
+  }
+
+  /**
+   * Toggle select all penalties
+   * Following the toggleSelects() pattern from loans-active-client-members
+   */
+  toggleSelectAllPenalties() {
+    const result = this.penaltyManagementService.toggleSelectAllPenalties(this.selectAllPenalties, this.penalties);
+    this.selectAllPenalties = result.selectAllPenalties;
+    this.selectedPenalties = result.selectedPenalties;
+    this.recalculateTransactionAmount();
+  }
+
+  /**
+   * Toggle individual penalty selection
+   * Following the toggleSelect() pattern from loans-active-client-members
+   */
+  togglePenaltySelection(penaltyId: number) {
+    const result = this.penaltyManagementService.togglePenaltySelection(
+      penaltyId,
+      this.selectedPenalties,
+      this.penalties
+    );
+    this.selectedPenalties = result.selectedPenalties;
+    this.selectAllPenalties = result.selectAllPenalties;
+    this.recalculateTransactionAmount();
+  }
+
+  /**
+   * Check if penalty is selected
+   */
+  isPenaltySelected(penaltyId: number): boolean {
+    return this.penaltyManagementService.isPenaltySelected(penaltyId, this.selectedPenalties);
+  }
+
+  /**
+   * Get penalty display key or plain text for translation/output
+   * Normalizes common backend values (like MORA / labels.inputs.*) to translation keys
+   */
+  getPenaltyDisplayKey(penalty: any): string {
+    return this.penaltyManagementService.getPenaltyDisplayKey(penalty);
+  }
+
+  /**
+   * Recalculate transaction amount when penalties are waived
+   */
+  recalculateTransactionAmount() {
+    const currentAmountValue = this.repaymentLoanForm.value.transactionAmount;
+    const currentAmount =
+      currentAmountValue !== undefined && currentAmountValue !== null
+        ? Number(currentAmountValue)
+        : Number(this.dataObject.amount ?? 0);
+    const baseAmount = isNaN(currentAmount) ? Number(this.dataObject.amount ?? 0) : currentAmount;
+
+    if (!this.waivePenalties || this.selectedPenalties.length === 0) {
+      // Reset to original amount if no penalties selected
+      this.repaymentLoanForm.patchValue(
+        {
+          transactionAmount: baseAmount
+        },
+        { emitEvent: false }
+      );
+      return;
+    }
+
+    // Calculate total waived amount
+    let totalWaived = 0;
+    this.selectedPenalties.forEach((penaltyId: number) => {
+      const penalty = this.penalties.find((p: any) => p.id === penaltyId);
+      if (penalty) {
+        totalWaived += penalty.amountOutstanding || penalty.amount || 0;
+      }
+    });
+
+    // Calculate new transaction amount
+    const newAmount = Math.max(0, baseAmount - totalWaived);
+
+    // Allow zero when fully waived
+    this.updateTransactionAmountValidators(this.waivePenalties && newAmount === 0);
+
+    this.repaymentLoanForm.patchValue(
+      {
+        transactionAmount: newAmount
+      },
+      { emitEvent: false }
+    );
+  }
+
+  /**
+   * Update transaction amount validators to allow or disallow zero
+   */
+  private updateTransactionAmountValidators(allowZero: boolean) {
+    const validators = [
+      Validators.required,
+      Validators.min(allowZero ? 0 : 0.001)
+    ];
+    if (this.isCapitalizedIncome()) {
+      validators.push(Validators.max(this.dataObject.amount));
+    }
+    this.repaymentLoanForm.controls.transactionAmount.setValidators(validators);
+    this.repaymentLoanForm.controls.transactionAmount.updateValueAndValidity({ emitEvent: false });
+  }
+
   /** Submits the repayment form */
   submit() {
     const repaymentLoanFormData = this.repaymentLoanForm.value;
@@ -188,6 +325,12 @@ export class MakeRepaymentComponent implements OnInit {
       data.interestRefundCalculation = false;
     }
     delete data.skipInterestRefund;
+
+    // Add waived penalty charge IDs if penalties are being waived
+    if (this.waivePenalties && this.selectedPenalties.length > 0) {
+      data.chargeIds = this.selectedPenalties;
+    }
+
     this.loanService.submitLoanActionButton(this.loanId, data, this.command).subscribe((response: any) => {
       this.router.navigate(['../../transactions'], { relativeTo: this.route });
     });

src/app/loans/loans.service.ts

@@ -528,6 +528,14 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/guarantors/accounts/template`, { params: httpParams });
   }
 
+  /**
+   * @param {string} loanId Loan Id
+   * @returns {Observable<any>} All charges for the loan
+   */
+  getLoanCharges(loanId: string): Observable<any> {
+    return this.http.get(`/loans/${loanId}/charges`);
+  }
+
   /**
    * @param {string} accountId loans account Id
    * @param {string} chargeId loans charge Id

src/app/loans/services/penalty-management.service.ts

@@ -0,0 +1,190 @@
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { LoansService } from '../loans.service';
+import { Dates } from 'app/core/utils/dates';
+
+/**
+ * Service for managing loan penalty charges
+ * Provides shared logic for loading, filtering, and managing penalties
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class PenaltyManagementService {
+  private loanService = inject(LoansService);
+  private dateUtils = inject(Dates);
+
+  /**
+   * Load penalties for the loan
+   * Penalties are charges calculated for installments in the payment schedule.
+   * Each penalty charge has a dueDate that corresponds to an installment due date.
+   * @param loanId The loan ID
+   * @returns Observable of filtered and sorted penalties
+   */
+  loadPenalties(loanId: string): Observable<any[]> {
+    return this.loanService.getLoanCharges(loanId).pipe(
+      map((response: any) => {
+        // Handle different response structures - could be array directly or wrapped
+        let charges: any[] = [];
+        if (Array.isArray(response)) {
+          charges = response;
+        } else if (response && Array.isArray(response.pageItems)) {
+          charges = response.pageItems;
+        } else if (response && Array.isArray(response.content)) {
+          charges = response.content;
+        } else if (response && Array.isArray(response.charges)) {
+          charges = response.charges;
+        } else if (response && response.data && Array.isArray(response.data)) {
+          charges = response.data;
+        }
+
+        const filteredPenalties = this.filterPenaltyCharges(charges);
+        // Parse dates for proper display
+        // The dueDate on each penalty corresponds to the installment due date in the payment schedule
+        filteredPenalties.forEach((penalty: any) => {
+          if (penalty.dueDate) {
+            penalty.dueDate = this.dateUtils.parseDate(penalty.dueDate);
+          }
+        });
+        // Sort by due date to show penalties in chronological order
+        filteredPenalties.sort((a: any, b: any) => {
+          if (a.dueDate && b.dueDate) {
+            return a.dueDate.getTime() - b.dueDate.getTime();
+          }
+          return 0;
+        });
+        return filteredPenalties;
+      })
+    );
+  }
+
+  /**
+   * Filter penalty charges from all charges
+   * Returns only penalty charges that are:
+   * - Marked as penalties (penalty === true) or overdue charges
+   * - Not already waived or paid
+   * - Have outstanding amounts
+   * These penalties are calculated for specific installments in the payment schedule.
+   * @param charges Array of all charges
+   * @returns Array of filtered penalty charges
+   */
+  filterPenaltyCharges(charges: any[]): any[] {
+    if (!charges || !Array.isArray(charges)) {
+      return [];
+    }
+    return charges.filter((charge: any) => {
+      if (!charge) {
+        return false;
+      }
+      // Check if it's a penalty charge
+      const isPenalty =
+        charge.penalty === true ||
+        charge.penalty === 'true' ||
+        (charge.chargeTimeType &&
+          (charge.chargeTimeType.value?.toLowerCase().includes('overdue') ||
+            charge.chargeTimeType.code?.toLowerCase().includes('overdue') ||
+            charge.chargeTimeType.id === 9)); // Overdue charge time type ID
+
+      if (!isPenalty) {
+        return false;
+      }
+
+      // Check if already waived or paid
+      if (charge.waived === true || charge.waived === 'true' || charge.paid === true || charge.paid === 'true') {
+        return false;
+      }
+
+      // Check if has outstanding amount
+      const outstanding =
+        charge.amountOutstanding || charge.amountOutstanding === 0 ? charge.amountOutstanding : charge.amount;
+      return outstanding > 0;
+    });
+  }
+
+  /**
+   * Toggle select all penalties
+   * @param selectAllPenalties Current state of select all checkbox
+   * @param penalties Array of all penalties
+   * @returns Object with updated selectAllPenalties state and selectedPenalties array
+   */
+  toggleSelectAllPenalties(
+    selectAllPenalties: boolean,
+    penalties: any[]
+  ): { selectAllPenalties: boolean; selectedPenalties: number[] } {
+    const newSelectAll = !selectAllPenalties;
+    return {
+      selectAllPenalties: newSelectAll,
+      selectedPenalties: newSelectAll ? penalties.map((penalty: any) => penalty.id) : []
+    };
+  }
+
+  /**
+   * Toggle individual penalty selection
+   * @param penaltyId The penalty ID to toggle
+   * @param selectedPenalties Current array of selected penalty IDs
+   * @param penalties Array of all penalties
+   * @returns Object with updated selectedPenalties array and selectAllPenalties state
+   */
+  togglePenaltySelection(
+    penaltyId: number,
+    selectedPenalties: number[],
+    penalties: any[]
+  ): { selectedPenalties: number[]; selectAllPenalties: boolean } {
+    const newSelectedPenalties = [...selectedPenalties];
+    const index = newSelectedPenalties.indexOf(penaltyId);
+    if (index > -1) {
+      newSelectedPenalties.splice(index, 1);
+    } else {
+      newSelectedPenalties.push(penaltyId);
+    }
+    // Update select all checkbox state
+    const len = penalties.length;
+    const selectAllPenalties = len === 0 ? false : newSelectedPenalties.length === len;
+    return {
+      selectedPenalties: newSelectedPenalties,
+      selectAllPenalties
+    };
+  }
+
+  /**
+   * Check if penalty is selected
+   * @param penaltyId The penalty ID to check
+   * @param selectedPenalties Array of selected penalty IDs
+   * @returns True if penalty is selected
+   */
+  isPenaltySelected(penaltyId: number, selectedPenalties: number[]): boolean {
+    return selectedPenalties.includes(penaltyId);
+  }
+
+  /**
+   * Get penalty display key or plain text for translation/output
+   * Normalizes common backend values (like MORA / labels.inputs.*) to translation keys
+   * @param penalty The penalty object
+   * @returns Translation key or plain text
+   */
+  getPenaltyDisplayKey(penalty: any): string {
+    if (!penalty) {
+      return 'labels.inputs.Overdue Fees';
+    }
+
+    const rawName = (penalty.name || penalty.chargeTimeType?.value || 'Overdue Fees').toString().trim();
+    const upperName = rawName.toUpperCase();
+
+    // Handle known aliases from backend
+    if (upperName === 'MORA' || upperName === 'OVERDUE') {
+      return 'labels.inputs.Overdue';
+    }
+    if (upperName === 'OVERDUE FEES') {
+      return 'labels.inputs.Overdue Fees';
+    }
+
+    // Pass through existing translation keys (labels.*)
+    if (rawName.startsWith('labels.')) {
+      return rawName;
+    }
+
+    // Fall back to the raw name (translate pipe will no-op if not a key)
+    return rawName;
+  }
+}