fix(charges): normalize chargeId, skip invalid charges, and preserve UI charge fields to fix preview errors and disbursement failures (#2822)

improve the line is missing the empty string fallback present

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -24,7 +24,7 @@
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let charge">
-        {{ charge.name + ', ' + charge.currency.displaySymbol }}
+        {{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}
       </td>
     </ng-container>
 
@@ -110,7 +110,7 @@
   <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-      <td mat-cell *matCellDef="let charge">{{ charge.name }},{{ charge.currency.displaySymbol }}</td>
+      <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}</td>
     </ng-container>
 
     <ng-container matColumnDef="type">

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.ts

@@ -338,32 +338,21 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   get loansAccountCharges() {
     const uniqueCharges = this.getUniqueCharges(this.chargesDataSource);
     return {
-      charges: uniqueCharges.map((charge: any) => {
-        const result: any = {};
-        result.chargeId = charge.chargeId;
-
-        if (charge.id && charge.id !== charge.chargeId) {
-          result.id = charge.id;
-        }
-
-        if (charge.amount !== undefined) result.amount = charge.amount;
-        if (charge.dueDate !== undefined) result.dueDate = charge.dueDate;
-        if (charge.feeInterval !== undefined) result.feeInterval = charge.feeInterval;
-        if (charge.feeOnMonthDay !== undefined) result.feeOnMonthDay = charge.feeOnMonthDay;
-
-        return result;
-      })
+      charges: uniqueCharges.map((charge: any) => ({
+        ...charge,
+        chargeId: charge.chargeId ?? charge.id
+      }))
     };
   }
   private getUniqueCharges<T extends { id?: number | string; chargeId?: number | string }>(charges: T[]): T[] {
     const uniqueChargesMap = new Map<number | string, T>();
 
     for (const charge of charges ?? []) {
-      const chargeId = charge.chargeId;
+      const chargeId = charge.chargeId ?? charge.id;
       if (chargeId == null) {
         continue;
       }
-      uniqueChargesMap.set(chargeId, charge);
+      uniqueChargesMap.set(chargeId, { ...charge, chargeId });
     }
 
     return Array.from(uniqueChargesMap.values());

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -262,7 +262,7 @@
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
-          {{ charge.name + ', ' + charge.currency.displaySymbol }}
+          {{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}
         </td>
       </ng-container>
 
@@ -329,7 +329,7 @@
     <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
-        <td mat-cell *matCellDef="let charge">{{ charge.name }},{{ charge.currency.displaySymbol }}</td>
+        <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + (charge.currency?.displaySymbol || '') }}</td>
       </ng-container>
 
       <ng-container matColumnDef="type">