From 51e9e8546284981fd7a7ca93aec519bab32b9618 Mon Sep 17 00:00:00 2001
From: Jose Alberto Hernandez <alberto@black-box.lan>
Date: Wed, 15 May 2024 00:52:38 -0600
Subject: [PATCH] Update Loan account view to use Delinquency installment

---
 .../loans-account-schedule-step.component.ts  |  1 +
 .../loans-account-terms-step.component.html   | 74 +++++++++++--------
 .../loans-account-terms-step.component.ts     | 16 +++-
 .../account-details.component.html            | 22 +++---
 .../general-tab/general-tab.component.html    |  4 +-
 5 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
index cd2068ed1..5c7fea2b7 100644
--- a/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.ts
@@ -37,6 +37,7 @@ export class LoansAccountScheduleStepComponent implements OnInit {
     const dateFormat = this.settingsService.dateFormat;
     const payload = this.loansService.buildLoanRequestPayload(this.loansAccount, this.loansAccountTemplate,
       this.loansAccountProductTemplate.calendarOptions, locale, dateFormat);
+    delete payload['enableInstallmentLevelDelinquency'];
 
     this.loansService.calculateLoanSchedule(payload).subscribe((response: any) => {
       this.repaymentScheduleDetails = response;
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
index 872002eb7..df3c03f1f 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html
@@ -25,7 +25,7 @@
       <mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
       <mat-select required formControlName="loanTermFrequencyType">
         <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
-          {{ type.value }}
+          {{ type.value | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequencyType.hasError('required')">
@@ -81,7 +81,7 @@
       <mat-label>{{"labels.inputs.Frequency" | translate}}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" disabled required>
         <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
-          {{ repaymentFrequencyType.value }}
+          {{ repaymentFrequencyType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -91,7 +91,7 @@
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option *ngFor="let repaymentFrequencyNthDayType of repaymentFrequencyNthDayTypeData"
           [value]="repaymentFrequencyNthDayType.id">
-          {{ repaymentFrequencyNthDayType.value }}
+          {{ repaymentFrequencyNthDayType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -101,7 +101,7 @@
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option *ngFor="let repaymentFrequencyDayOfWeekType of repaymentFrequencyDaysOfWeekTypeData"
           [value]="repaymentFrequencyDayOfWeekType.id">
-          {{ repaymentFrequencyDayOfWeekType.value }}
+          {{ repaymentFrequencyDayOfWeekType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -111,24 +111,36 @@
     <ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
 
       <mat-form-field fxFlex="23%">
-        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}}</mat-label>
+        <mat-label>{{"labels.inputs.Nominal interest rate" | translate}} %</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod">
       </mat-form-field>
 
+      <mat-form-field fxFlex="23%">
+        <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
+        <mat-select formControlName="interestRateFrequencyType">
+          <mat-option *ngFor="let interestRateFrequencyType of interestRateFrequencyTypeData" [value]="interestRateFrequencyType.id">
+            {{ interestRateFrequencyType.value | translateCatalog }}
+          </mat-option>
+        </mat-select>
+        <mat-error>
+          {{'labels.inputs.Nominal interest rate frequency' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
+        </mat-error>
+      </mat-form-field>
+
       <mat-form-field fxFlex="23%">
         <mat-label>{{"labels.inputs.Interest method" | translate}}</mat-label>
         <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate}}">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-            {{ interestType.value }}
+            {{ interestType.value | translateCatalog }}
           </mat-option>
         </mat-select>
       </mat-form-field>
     
-      <mat-form-field fxFlex="14%">
+      <mat-form-field fxFlex="23%">
         <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
         <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
           <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
-            {{ amortizationType.value }}
+            {{ amortizationType.value | translateCatalog }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
@@ -136,12 +148,12 @@
         </mat-error>
       </mat-form-field>
       
-      <mat-form-field fxFlex="14%" *ngIf="isEqualPrincipalPayments()">
+      <mat-form-field fxFlex="23%" *ngIf="isEqualPrincipalPayments()">
         <mat-label>{{"labels.inputs.Principal Percentage Per Installment" | translate}}</mat-label>
         <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment">
       </mat-form-field>
 
-      <mat-checkbox fxFlex="14%" formControlName="isEqualAmortization"
+      <mat-checkbox fxFlex="23%" formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization">
         <p>{{"labels.inputs.Is Equal Amortization" | translate}}</p>
       </mat-checkbox>
@@ -149,14 +161,13 @@
     </ng-container>
 
     <ng-container *ngIf="loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
-
       <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
         <mat-form-field fxFlex="48%">
           <mat-label>{{"labels.inputs.Interest Method" | translate}}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
-              {{ interestType.value }}
+              {{ interestType.value | translateCatalog }}
             </mat-option>
           </mat-select>
         </mat-form-field>
@@ -165,7 +176,7 @@
           <mat-label>{{"labels.inputs.Amortization" | translate}}</mat-label>
           <mat-select required matTooltip="{{ 'tooltips.The Amortization value' | translate}}" formControlName="amortizationType">
             <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
-              {{ amortizationType.value }}
+              {{ amortizationType.value | translateCatalog }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="loansAccountTermsForm.controls.amortizationType.hasError('required')">
@@ -176,22 +187,21 @@
         <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
           <p>{{"labels.inputs.Is Floating Rate" | translate}}?</p>
         </mat-checkbox>
-
       </div>
-
     </ng-container>
+
     <h4 fxFlex="98%" class="mat-h4">{{"labels.inputs.Loan Schedule" | translate}}</h4>
 
     <div fxFlex="48%" *ngIf="loanScheduleType">
       <span fxFlex="40%"><p>{{"labels.inputs.Loan Schedule Type" | translate}}</p></span>
-      <span fxFlex="60%"><p>{{ loanScheduleType.value }}</p></span>
+      <span fxFlex="60%"><p>{{ loanScheduleType.value | translateCatalog }}</p></span>
     </div>
 
     <mat-form-field fxFlex="48%">
       <mat-label>{{"labels.inputs.Repayment Strategy" | translate}}</mat-label>
       <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}" [disabled]="repaymentStrategyDisabled">
         <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyOptions" [value]="transactionProcessingStrategy.code">
-          {{ transactionProcessingStrategy.name }}
+          {{ transactionProcessingStrategy.name | translateCatalog }}
         </mat-option>
       </mat-select>
       <mat-error *ngIf="loansAccountTermsForm.controls.transactionProcessingStrategyCode.hasError('required')">
@@ -206,7 +216,7 @@
       <mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}">
         <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData"
           [value]="interestCalculationPeriodType.id">
-          {{ interestCalculationPeriodType.value }}
+          {{ interestCalculationPeriodType.value | translateCatalog }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -242,18 +252,18 @@
       <input type="number" matInput formControlName="graceOnArrearsAgeing">
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
-      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
-      <input type="number" matInput formControlName="fixedEmiAmount">
-    </mat-form-field>
+    <div fxFlexFill fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+      <p><span fxFlex="53%"><b>{{"labels.inputs.Delinquency Bucket" | translate}}</b></span>
+      <span fxFlex="48%">{{ loanProduct?.delinquencyBucket.name }}</span></p>
+    </div>
 
-    <ng-container *ngIf="isDelinquencyEnabled()">
-      <mat-checkbox fxFlex="48%" formControlName="enableInstallmentLevelDelinquency">
+    <ng-container fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+      <mat-checkbox formControlName="enableInstallmentLevelDelinquency">
         <p>{{'labels.inputs.Enable installment level Delinquency' | translate}}</p>
       </mat-checkbox>
     </ng-container>
 
-    <ng-container *ngIf="loansAccountTermsData?.isTopup">
+    <ng-container fxFlex="48%" *ngIf="loansAccountTermsData?.isTopup">
 
       <mat-checkbox fxFlex="20%" formControlName="isTopup">
         <p>{{"labels.inputs.Is Topup Loan" | translate}}?</p>
@@ -270,16 +280,21 @@
 
     </ng-container>
 
+    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
+      <mat-label>{{"labels.inputs.Installment Amount" | translate}}</mat-label>
+      <input type="number" matInput formControlName="fixedEmiAmount">
+    </mat-form-field>
+
     <mat-divider fxFlex="98%"></mat-divider>
 
     <div fxFlexFill>
-      <span fxFlex="40%">{{"labels.inputs.Recalculate Interest" | translate}}</span>
+      <span fxFlex="40%"><b>{{"labels.inputs.Recalculate Interest" | translate}}</b></span>
       <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled| yesNo }}</span>
     </div>
 
     <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
       <span fxFlex="40%">{{"labels.inputs.Days in year" | translate}}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value}}</span>
+      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateCatalog }}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
@@ -291,7 +306,7 @@
 
       <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
         <span fxFlex="40%">{{"labels.inputs.Days in month" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateCatalog }}</span>
       </div>
 
     </ng-container>
@@ -300,8 +315,7 @@
 
       <div fxFlexFill>
         <span fxFlex="40%">{{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
-          }}</span>
+        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }}</span>
       </div>
 
       <div fxFlexFill>
diff --git a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
index 5ac5e4b2a..1fa27b1e2 100644
--- a/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
+++ b/src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.ts
@@ -89,6 +89,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
   loanScheduleType: OptionData | null = null;
   loanProduct: LoanProduct | null = null;
 
+  interestRateFrequencyTypeData: any[] = [];
+
   /**
    * Create Loans Account Terms Form
    * @param formBuilder FormBuilder
@@ -116,6 +118,10 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         this.loanProduct = this.loansAccountTermsData.product;
       }
 
+      this.interestRateFrequencyTypeData = this.loansAccountTermsData.interestRateFrequencyTypeOptions;
+      console.log(this.loansAccountTermsData);
+      console.log(this.loanProduct);
+
       this.loansAccountTermsForm.patchValue({
         'principalAmount': this.loansAccountTermsData.principal,
         'loanTermFrequency': this.loansAccountTermsData.termFrequency,
@@ -138,7 +144,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
-        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
+        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
       });
 
       this.setAdvancedPaymentStrategyControls();
@@ -156,7 +163,6 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         });
       }
       if (this.isDelinquencyEnabled()) {
-        console.log("TEST " + this.loansAccountTermsData.enableInstallmentLevelDelinquency);
         this.loansAccountTermsForm.addControl('enableInstallmentLevelDelinquency', new UntypedFormControl(this.loansAccountTermsData.enableInstallmentLevelDelinquency || this.loanProduct.enableInstallmentLevelDelinquency));
       }
       this.collateralDataSource = this.loansAccountTermsData.collateral || [];
@@ -230,7 +236,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
         'maxOutstandingLoanBalance': this.loansAccountTermsData.maxOutstandingLoanBalance,
         'transactionProcessingStrategyCode': this.loansAccountTermsData.transactionProcessingStrategyCode,
         'interestRateDifferential': this.loansAccountTermsData.interestRateDifferential,
-        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan
+        'multiDisburseLoan': this.loansAccountTermsData.multiDisburseLoan,
+        'interestRateFrequencyType': this.loansAccountTermsData.interestRateFrequencyType.id
       });
     }
     this.createloansAccountTermsForm();
@@ -349,7 +356,8 @@ export class LoansAccountTermsStepComponent implements OnInit, OnChanges {
       'maxOutstandingLoanBalance': [''],
       'interestRateDifferential': [''],
       'transactionProcessingStrategyCode': ['', Validators.required],
-      'multiDisburseLoan': [false]
+      'multiDisburseLoan': [false],
+      'interestRateFrequencyType': ['']
     });
   }
 
diff --git a/src/app/loans/loans-view/account-details/account-details.component.html b/src/app/loans/loans-view/account-details/account-details.component.html
index 499a3f88f..1e31452cc 100644
--- a/src/app/loans/loans-view/account-details/account-details.component.html
+++ b/src/app/loans/loans-view/account-details/account-details.component.html
@@ -5,26 +5,26 @@
 
         <div fxFlexFill>
             <span fxFlex="50%">{{"labels.inputs.Repayment Strategy" | translate}}</span>
-            <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName }}</span>
+            <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateCatalog }}</span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%">{{"labels.inputs.Repayments" | translate}}</span>
-            <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value}}
+            <span fxFlex="50%">{{loanDetails.numberOfRepayments}} every {{loanDetails.repaymentEvery}}&nbsp;{{loanDetails.repaymentFrequencyType.value | translateCatalog }}
             <span *ngIf="loanDetails.repaymentFrequencyType?.id == 2 && loanDetails.repaymentFrequencyNthDayType?.id != 0 && loanDetails.repaymentFrequencyDayOfWeekType?.id != 0" class="m-l-10">
-              <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value}}
+              <span class="m-l-10">{{"labels.commons.on" | translate}}</span>{{loanDetails.repaymentFrequencyNthDayType?.value}}&nbsp;{{loanDetails.repaymentFrequencyDayOfWeekType?.value | translateCatalog }}
             </span>
             </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.fixedLength">
             <span fxFlex="50%"> {{"labels.inputs.Fixed Length" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value}}</span>
+            <span fxFlex="50%"> {{loanDetails.fixedLength}} {{loanDetails.repaymentFrequencyType.value | translateCatalog }}</span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Amortization" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.amortizationType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.amortizationType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
@@ -39,7 +39,7 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest" | translate}} </span>
-            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value}}) </span>
+            <span fxFlex="50%"> {{loanDetails.annualInterestRate | formatNumber}} % {{"labels.text.per annum" | translate}} ({{loanDetails.interestRatePerPeriod}} %&nbsp; {{loanDetails.interestRateFrequencyType.value | translateCatalog }}) </span>
         </div>
 
         <div fxFlexFill>
@@ -80,7 +80,7 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Interest Calculation Period" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.interestCalculationPeriodType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill>
@@ -135,22 +135,22 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Days in year" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInYearType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.daysInYearType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> {{"labels.inputs.Days in month" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.daysInMonthType.value }} </span>
+            <span fxFlex="50%"> {{loanDetails.daysInMonthType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
             <span fxFlex="50%"> {{"labels.inputs.Interest recalculation compounding on" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
             <span fxFlex="50%"> {{"labels.inputs.Advance payments adjustment type" | translate}}</span>
-            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value}} </span>
+            <span fxFlex="50%"> {{loanDetails.interestRecalculationData.rescheduleStrategyType.value | translateCatalog }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
diff --git a/src/app/loans/loans-view/general-tab/general-tab.component.html b/src/app/loans/loans-view/general-tab/general-tab.component.html
index 51b47fbcb..83d0d620b 100644
--- a/src/app/loans/loans-view/general-tab/general-tab.component.html
+++ b/src/app/loans/loans-view/general-tab/general-tab.component.html
@@ -81,7 +81,7 @@
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
+        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">
@@ -133,7 +133,7 @@
     <table mat-table [dataSource]="detailsDataSource">
 
       <ng-container matColumnDef="Key">
-        <td mat-cell *matCellDef="let ele"> {{ ele.key }} </td>
+        <td mat-cell *matCellDef="let ele"> {{ 'labels.inputs.' + ele.key | translate }} </td>
       </ng-container>
 
       <ng-container matColumnDef="Value">