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/glim-account/create-glim-account/create-glim-account.component.ts

@@ -183,10 +183,31 @@ export class CreateGlimAccountComponent {
     // const monthDayFormat = 'dd MMMM';
     const data = {
       ...this.loansAccount,
-      charges: this.loansAccount.charges.map((charge: any) => ({
+      charges: (this.loansAccount.charges ?? [])
-        chargeId: charge.id,
+        .map((charge: any) => {
-        amount: charge.amount
+          const chargeId = charge.chargeId ?? charge.id;
-      })),
+          if (chargeId == null) {
+            return null;
+          }
+          const mappedCharge: any = {
+            chargeId,
+            amount: charge.amount
+          };
+          if (charge.id && charge.id !== chargeId) {
+            mappedCharge.id = charge.id;
+          }
+          if (charge.dueDate) {
+            mappedCharge.dueDate = this.dateUtils.formatDate(charge.dueDate, dateFormat);
+          }
+          if (charge.feeInterval !== undefined) {
+            mappedCharge.feeInterval = charge.feeInterval;
+          }
+          if (charge.feeOnMonthDay !== undefined) {
+            mappedCharge.feeOnMonthDay = charge.feeOnMonthDay;
+          }
+          return mappedCharge;
+        })
+        .filter(Boolean),
       clientId: client.id,
       totalLoan: totalLoan,
       loanType: 'glim',

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) => {
+      charges: uniqueCharges.map((charge: any) => ({
-        const result: any = {};
+        ...charge,
-        result.chargeId = charge.chargeId;
+        chargeId: charge.chargeId ?? charge.id
-
+      }))
-        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;
-      })
     };
   }
   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">

src/app/loans/loans.service.ts

@@ -642,11 +642,31 @@ export class LoansService {
   ): any {
     const loansAccountData = {
       ...loansAccount,
-      charges: loansAccount.charges.map((charge: any) => ({
+      charges: (loansAccount.charges ?? [])
-        chargeId: charge.id,
+        .map((charge: any) => {
-        amount: charge.amount,
+          const chargeId = charge.chargeId ?? charge.id;
-        dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat)
+          if (chargeId == null) {
-      })),
+            return null;
+          }
+          const mappedCharge: any = {
+            chargeId,
+            amount: charge.amount
+          };
+          if (charge.id && charge.id !== chargeId) {
+            mappedCharge.id = charge.id;
+          }
+          if (charge.dueDate) {
+            mappedCharge.dueDate = this.dateUtils.formatDate(charge.dueDate, dateFormat);
+          }
+          if (charge.feeInterval !== undefined) {
+            mappedCharge.feeInterval = charge.feeInterval;
+          }
+          if (charge.feeOnMonthDay !== undefined) {
+            mappedCharge.feeOnMonthDay = charge.feeOnMonthDay;
+          }
+          return mappedCharge;
+        })
+        .filter(Boolean),
       disbursementData: loansAccount.disbursementData.map((item: any) => ({
         expectedDisbursementDate: this.dateUtils.formatDate(item.expectedDisbursementDate, dateFormat),
         principal: item.principal