feat:Unificaction of radhathakare's PR (#1879)

* feat:Clients Translate Module

* feat: Collections Translate Module

* feat:Loan Translate Module

* feat:Search Translate Module

* feat English Json File

---------

Co-authored-by: radhathakare <radhathakare322@gmail.com>

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

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{"labels.inputs.Charge"  |translate}}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData" [value]="charge">
         {{ charge.name }}
@@ -12,7 +12,7 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{"labels.buttons.Add"  |translate}}
     </button>
   </div>
 
@@ -20,21 +20,21 @@
     [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.name + ', ' + charge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,14 +44,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
@@ -63,7 +63,7 @@
         <span
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-          N/A
+                      {{"labels.inputs.N/A"  |translate}}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
               || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -73,7 +73,7 @@
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions"  |translate}} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -88,27 +88,27 @@
 
   <mat-divider fxFlex="98%"></mat-divider>
 
-  <h4 fxFlex="98%" class="mat-h4">Overdue Charges</h4>
+  <h4 fxFlex="98%" class="mat-h4">{{"labels.heading.Overdue Charges"  |translate}}</h4>
 
   <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.name }},{{ charge.currency.displaySymbol }} </td>
     </ng-container>
 
     <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeCalculationType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.amount| formatNumber }} </td>
     </ng-container>
 
     <ng-container matColumnDef="collectedon">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On"  |translate}} </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
@@ -121,13 +121,13 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous"  |translate}}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!loansAccountFormValid">
-    Next
+    {{"labels.buttons.Next"  |translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
   <button mat-raised-button *ngIf="loanId" [routerLink]="['../', 'general']">
-    Cancel
+    {{"labels.buttons.Cancel"  |translate}}
   </button>
 </div>